The basics of HTML

This section will give your some basic knowledge and tips about HTML, mostly what semantic tag to use in what situation.

What you need to get started

You need this:

<!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>
    // Code
</body>
</html>

You need to indicate that the document is HTML, the language of the document and of course its encoding. You also need a title as it will be visible in the tab and spoken by screen readers when the page is loaded.

The <meta name="viewport>" is especially important. It can be used to block the zoom or zoom out of the page. But don't do it, please never block the user from zooming in or zooming out on a website. This is the basic accessibility thing, don't deactivate it!

Of course there's a lot more that can go into the <head> of a website. Styles, scripts, meta-descriptions, open graph tags... The head has its own life in itself that you can explore, but it's not the purpose of this guide to give you an extended lesson about it so we'll skip it and start adding things inside the <body>.

Divs and spans

HTML is all about putting...things! Inside... other things? So your first reflex is probably to grab a <div> or a <span>, the good old ones! But what's the difference between them?

If you put several <div> one after the other, you'll see they stack one above the other. That's because a <div> has the display:block; CSS property by default. display:block makes the element start on a new line and take 100% of its container width.

If you do the same with <span>, they will stack one after the other. That's because a <span> has the display:inline; CSS property by default, which tells the element to start on the same line as the previous element and that its width and heigh are decided by content.

So just by knowing that, you already know how to stack things vertically and horizontally. Great right?

Wait wait wait... There's CSS in my HTML?

Yes! And for a good reason! Imagine your CSS file disappears and your are left only with your HTML page. Without some pre-made styling, everything would have the same font size, would be inline... That would be unreadable!

That's the reason why browsers implement their own styling when encountering an HTML element. It's a great feature but unfortunately, some people really hate it. When you want to style the HTML elements with your own design, you sometimes have to undo some of the basic styling of the browser.

And yes, some of them are verbose to undo, like buttons. That's the reason some people use what is called "resets" CSS files, to undo the default styling and ease the CSS work.

But please be careful when resetting styles. When you undo the browser styling, you also undo accessibility styles. If you ever used the tab key to navigate inside a website, you saw that the focused element is distinguished from the rest with borders or outlines. Going too hard on un-style can break those things and left you with... nothing. You are lost.

Speaking of being lost, <div> and <span> can sometimes get your users in trouble, unlike the amazing semantic HTML elements.

Next: What is semantic HTML?


Initially published: November 23rd, 2020
Generated: November 12th, 2021