# A Learner's guide to Understanding HTML...
We all know what websites are, in fact you're probably reading this article I wrote on a website, on another website. A website is just a collection of interconnected web pages, multimedia content, and files accessible online under a single domain name e.g. iwanttolearnhtml.com, that can be viewed through a web browser like Chrome, Safari, Firefox or internet explorer.
Now that I know what a website is, it is natural that my curiosity will push me to find out what is the technology, or mechanism behind these websites, and what makes it work the way it does. Which brings me to the main reason for this article. HTML.
## HTML...
HTML, stands for Hyper Text Markup Language. As with almost everyone that was new to HTML, in my ignorance, I assumed HTML was a programming language of some sorts, but as I will later learn, and show you in this article, HTML is a markup language that uses elements and tags enclosed in the < & > signs. E.g: `<h1>` for a heading or `<p>` for a paragraph. The tags guide the browser on how to display the content.
NOTE: Most elements in HTML have an opening and closing tag, asides for a few like `<br>` used to break a paragraph when writing in HTML.
## Basic HTML Structure
In the code snippet below, we can see the basic structure of a HTML file. The first line tells the file type, second line the language, the third to seventh line, the head encloses the machine readable information; metadata, the character encoding for the document as UTF-8, viewport & width necessary for responsive web design and finally the title of the HTML page.
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
```
## Baby Steps...
As a beginner to HTML, I learnt that every HTML piece, first starts with a file named `index.html`, then the file itself has three (3) main components:
1. `<header>`
2. `<body>`
3. `<footer>`
To put what I had just learnt into practice, I had to also learn what I call the core elements of HMTL. I call them 'core', because every HTML file you'll find today has some or all of these elements.
### Core Elements...
Headings
HTML has six (6) levels of headings, ranging from `<h1>` (most important) to `<h6>` (least important). The `<h1>` tag is used for main titles, while `<h2>` through `<h6>` are for subheadings.
For paragraphs of text, the `<p>` tag is what I used
I learned that hyperlinks are created using the `<a>` tag.
Images
To add images, I used the `<img>` tag, which requires a `src` attribute for the image’s source and an `alt` attribute for describing the image (important for accessibility):
Lists
HTML offers both unordered (`<ul>`) and ordered lists (`<ol>`). I found this useful for structuring content in bullet points or numbered lists.
## Experimenting
To make sure that I had at least understood the basics of how HTML works, I decided to recreate any simple website I knew, without using styling (CSS) or any form of Javascript, and I made this simple file:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<a href="#what-we-do">What we do</a> |
<a href="#projects">Projects</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<section id="hero">
<h1>Just code.</h1>
<p>Problem solving is our mantra.</p>
<p>LambdaClass is a venture studio focused on advanced systems engineering.</p>
</section>
<section id="what-we-do">
<h2>What we do</h2>
<ul>
<li>Data Engineering</li>
<li>Data Science</li>
<li>Cyber Security</li>
<li>Product Development</li>
</ul>
</section>
<section id="projects">
<h2>Technologies & Projects</h2>
<ul>
<li>Cairo-rs — Implementation of Cairo VM</li>
<li>Libtorrent-rs — Rust BitTorrent library</li>
<li>Lambdaworks — Cryptographic library</li>
<li>Merkle Patricia Tree — Ethereum data structure</li>
</ul>
</section>
<section id="about">
<h2>About LambdaClass</h2>
<p>Lambda is a deep tech venture studio solving complex problems across cryptography, distributed systems, compilers, machine learning, and more.</p>
<p>Founded in Buenos Aires, they have global teams and publish deep technical content on their blog.</p>
</section>
<footer id="contact">
<h2>Contact</h2>
<ul>
<li>Email: pablo@lambdaclass.com</li>
<li>Twitter: <a href="https://x.com/class_lambda">@class_lambda</a></li>
<li>GitHub: <a href="https://github.com/lambdaclass/">lambdaclass GitHub</a></li>
<li>Blog: <a href="https://blog.lambdaclass.com/">LambdaClass Blog</a></li>
</ul>
</footer>
</body>
</html>
```
## Conclusion
Learning HTML, has been one of the best decisions I've made so far, and I can't wait to use CSS for styling and intergate Javascript into my websites, and as usual, I'll write more articles as I keep learning.
Sign in with Wallet
Connect another wallet