The content tags in HTML are the basic building blocks we use to give meaning and structure to the text and media of our website.
Now that we have our file with the base structure ready, we need to start putting content inside the <body> tag so that our page stops being a sad blank canvas.
A web page is essentially a structured document. It has headings, paragraphs, lists, images… The function of HTML is precisely to indicate to the browser what each thing is, which is why we wrap them in tags.
In this post, we’ll look at the most basic and common tags that you’ll use 90% of the time to format your document. 👇
Headings
Headings are used to define the titles and subtitles of our page, creating a visual and semantic hierarchy.
In HTML, we have six levels of headings, ranging from <h1> (the most important and large by default) to <h6> (the least important).
<h1>Welcome to my fabulous website</h1>
<h2>About Me</h2>
<h3>My Robotics Projects</h3>
<p>...</p>
<h2>Contact</h2>
SEO and accessibility: There should only be one <h1> per page. It is the main title of the document (like the headline on the front page of a newspaper).
The other levels (<h2>, <h3>…) can be used as many times as you want to structure the content.
Paragraphs
The <p> tag (short for paragraph) is used to define blocks of normal text. It’s the “workhorse” of any web page, where the bulk of your information will go.
<p>This is my first paragraph. I love programming microcontrollers.</p>
<p>This is another, different paragraph. The browser will automatically add a small margin
between them to make it readable.</p>
A curious thing about HTML is that the browser ignores additional whitespace and line breaks you make in your code editor.
If you write ten consecutive lines separated by a Enter, the browser will render it all as a single, infinite line (which is a disaster for readability).
Links
The <a> tag (short for anchor) is what allows us to create hyperlinks to jump from one page to another. Without it, the Internet as we know it wouldn’t exist.
For a link to work, it’s not enough to just put the tag; we need to use the href attribute to tell the browser which address or URL to go to when clicked.
<a href="https://www.luisllamas.es">my favorite website</a>
If you want the link to open in a new tab (so the user doesn’t leave your page), you can add the target="_blank" attribute. But generally, don’t do that.
Images
To display graphics or photographs, we use the <img> tag. This tag has a peculiarity: it’s an “empty” tag, meaning it has no closing tag </img>. It opens and closes in itself.
For it to display something, it necessarily needs two attributes:
- The
src(source): The path or URL of the image we want to load. - The
alt(alternative text): A text description of what is seen in the image.
<img src="foto-de-mi-perrito.jpg" alt="A very cute little dog running through the park with a ball">
Don’t forget the alt attribute. If for some reason the image doesn’t load (because the server fails or the connection is slow), the browser will show this text in its place.
Additionally, it’s very important for blind people who use screen readers to know what’s in the image.
