We’ve seen that web development consists of three pillars: HTML, CSS, and JS. Today we’re going to start with the most fundamental of them all, HTML.
As its name suggests, HTML (HyperText Markup Language) is not a programming language. In the sense that it has no logic, it can’t add numbers, and it can’t make decisions (for that we use JavaScript).
Instead, HTML is a structural markup language. That is, its job is to say, “this is a heading,” “this is a paragraph,” “this is an image”…
Like every language, it has its own syntax rules. So let’s start with the fundamentals of HTML 👇.
HTML Syntax
As I mentioned, the function of HTML is to delimit, classify, and hierarchize the information in a document.
To classify that information, HTML uses a system of nodes that we write in the form of tags and configure using attributes.
A tag is the fundamental building block of HTML. It acts as a container that wraps content to give it semantic meaning to the browser (indicating whether text is a heading, a paragraph, or a button).
Syntactically, they are delimited using angle brackets < >. The vast majority of elements require an opening tag and a closing tag (which includes a forward slash /).
<p>This is the text content of my paragraph.</p>
There are strict exceptions: empty tags or self-closing tags. Elements like images (<img>) or metadata definitions (<meta>) do not contain text inside them, so they don’t need a closing tag.
An attribute is a key-value pair that is always injected inside the opening tag.
Its technical function is to provide additional information, configuration, or specific metadata to that particular tag.
<a href="https://www.google.com" class="featured-link">Go to Google</a>
In this example, the <a> tag defines a link, but the href attribute is the exact instruction that tells the browser which specific URL it should navigate to when clicked.
The Base Code
The boilerplate of HTML is the minimum code structure that every web page needs to function correctly in a browser.
Fortunately, the current HTML5 standard has simplified things tremendously. In the past, creating the initial structure was a small nightmare of extremely long declarations that no one could memorize.
Today, the minimum viable structure of any .html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first web page</title>
</head>
<body>
</body>
</html>
If you use VS Code, you can generate this entire block simply by typing ! and pressing the Tab key (while editing an html file).
Let’s break down what each of these lines does.
Although it is surrounded by < > symbols, curiously it is not an HTML tag. It is a special instruction directed at the browser.
Its sole function is to tell the browser what version of HTML we are using. By simply putting html, we are telling it to use the latest standard version (HTML5).
If you omit this line, older browsers will enter what’s called Quirks Mode.
Basically, the browser assumes the page is very old and will try to render it using outdated rules from the 90s (and it will break your entire layout).
This is indeed a tag, and it is the main container of our entire page. Absolutely all the code on our website must go inside the opening <html> and closing </html> tags.
It includes a lang="en" attribute. This is very important for accessibility and SEO. It tells screen readers (used by visually impaired people) and search engines (like Google) that the content is in English, so they apply the correct pronunciation and search rules.
The head is the section where we store technical information, metadata, and configurations, but nothing we put here (except the title) will be visible on the main page.
Inside the <head>, three fundamental elements stand out:
<meta charset="UTF-8">: This tells the browser how to decode the text. The UTF-8 format includes almost all characters from all languages of the world. If you forget this, accents and special characters will appear as strange symbols (likediseño).<meta name="viewport"...>: This is a vital instruction for our website to adapt to mobile devices. Without it, the mobile device will try to load the page as if it were a shrunk giant monitor. (We’ll look at this in more depth when we cover Responsive Design).<title>: This is the text that appears in the browser tab and the name saved by bookmarks or favorites.
The body is “the message” of the letter. Everything you put between <body> and </body> is the actual content that users will see on their screen when they visit your page.
This is where we will put our texts, images, buttons, videos, and navigation menus. For now, in our skeleton it is empty (it only has a green comment), so if we were to open this file in Chrome, we would see a stark white page.
- Configurations and connections (invisible things) go in the
<head>. - Visual content (what is painted on the screen) goes in the
<body>.
And with this we have our foundations ready. We’ve gone from having nothing to having a valid HTML file ready to receive content.
In the next post, we are going to bring that empty <body> to life by learning the vital content tags that you will use 90% of the time in your day-to-day work.
