Every piece of content has two major parts: the content itself, and information about the content. For example, a video has the video itself, but also a title, thumbnail, upload date, etcetera.
The content is called the body. The information about it is the head. (Sometimes header, frontmatter or metadata.)
If HTML is meant for dividing your content into meaningful elements, well, this is the first and biggest division you’ll make! What is actual content? And what is information about the content?
For example, you probably know that tabs in your browser have a title and show a little icon. How do you think these are defined? How do you think the programmer sets these elements? They aren’t part of the page itself, so … they go into the head.
The basic template
Below is the basic template from which every .html file starts.
As you see, the <head> part isn’t displayed on the page. It’s only for information about the page, which is used in other ways. In fact, anything outside the <body> tag won’t be displayed.
The other tags (DOCTYPE and <html>) might feel superfluous. They are necessary when you intend to use a different version of HTML. If your document uses the default, latest version (“HTML5”)—then yes, it feels silly to add this, but do it anyway.
It’s all about semantics again. The <html> tag clearly states that whatever is inside represent an HTML document :)
In my interactive examples, I sneakily add this template behind the scenes. If I don’t spot a head or body tag, I just add them for you, so you don’t have to type all that every time. But they’re still there, because they have to be!
The Head tag
Its primary uses are to …
- Set the title of the page
- Set its icon (called a favicon)
- Load external resources, such as a CSS file (that determines what the page should look like)
- Set a whole bunch of data that a search engine or robot might want. (Description, keywords, tags, which technologies you require or support, etcetera.)
We won’t deal with this anymore until the end of this course. It’s not that important now.
The Body tag
This is the majority of every webpage and the place where this course will spend most of its time. Almost all HTML tags are only usable in the body, not the head.
As expected, elements are laid out in order, from top to bottom.
Again, remember semantics! (I promise I will stop using that word soon.)
Define your elements in the most logical order. You can always change their position on the page later, using CSS. Your HTML documents should be understandable, even in raw form (inside the text editor).
Want to support me?
Buy one of my projects. You get something nice, I get something nice.
Donate through a popular platform using the link below.
Simply giving feedback or spreading the word is also worth a lot.