We showed you some HTML tags already to mark up your pages and to link them together. There is more to HTML of course - if you want do dive deeper, read on.
First of all, the HTML you used during this course shouldn't have worked at all. We used some tags like <h1> and <p>, but a complete HTML document needs a special structure that we just omitted. Thankfully, browsers are very forgiving and filled the missing part for us. But as professionals, we can't just leave it at that, right? Right.
Challenge
Add basic HTML elements that are needed for a complete HTML document.
Let's use the default.html and make it a real HTML document.
As the first line, add this line of code:
<!DOCTYPE html>
This doctype tells the browser "everything that comes afterwards is indeed HTML, as you may have guessed, but yes, please treat it as HTML, thank you."
And now, you are officially editing a HTML document.
Two main parts of a HTML document
The special structure of a HTML document consists of two parts: one that is visible and shown in the browser and one that is mostly hidden from the visitor and contains additional information about the page (meta information).
Take a look at these elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
After the doctype there is the <html> tag, that encloses everything. Inside, there are these two parts we talked about: <head> and <body>. The "head" is the hidden part, where you can place elements that further describe the page. For example the title tag is used to set the title of your page. This title is then shown in the browser tab or, if you bookmark your page, as name of the bookmark.
Do you see the meta element? Meta elements are so called "self closing" elements, they don't consist of two tags, but only one. <hr /> belongs to this kind of tags, as well as the <img /> you used before.
First off, there is a charset meta tag. Just as we used the doctype to tell the browser that this document is a HTML document, this meta tag tells it which character encoding to use. If we remove this tag, special characters such as ü, é etc. may end up unreadable.
Remember the front matter variables you used before? Place {{ site.title }} inside the title tag.
The "body" is the part of our HTML document, that becomes visible in the browser. Here you can place the other tags that you already used, like headlines, paragraphs, links and images.
If you put the new HTML structure elements together with the former content of the file, it should look something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{{ site.title }}</title>
</head>
<body>
<h1>{{ site.title }}</h1>
<h2>{{ page.title }}</h2>
<p>My Pages:</p>
<p><a href="index.html">Home</a></p>
<p><a href="kittens.html">Kittens</a></p>
<hr />
{{ content }}
</body>
</html>
Bravo! Everything is nice and orderly now.
More semantics
Now you can concentrate on filling your pages with content. Maybe you want do show more pictures, add an article about your favourite car brand or list your best cookie recipes? There are some more HTML tags to help you add structure to your content.
You already used the appropriate elements for headlines, paragraphs, images, links and horizontal rules. Here are some more:
Lists
Everyone loves lists, you can make lists about everything, lists of lists containing lists. There are two types of lists in HTML:
- unordered lists
- ordered lists
The one above is an unordered list, which is shown with bullet points. You create it by using two tags together:
<ul>
<li> unordered list </li>
<li> ordered list </li>
</ul>
This <ul> contains two list items <li>. You can use as many list items inside a list as you want.
An ordered list is shown with numbers in front of each item, so you can easily create a top three list of your favorite animals:
<ol>
<li> Cats </li>
<li> Dogs </li>
<li> Parrots </li>
</ol>
- Cats
- Dogs
- Parrots
Nesting Elements
Be careful whith HTML elements that contain other HTML elements. You need to keep track of opening and closing tags, and close them in correct order. If you don't the browser has to guess what you wanted to achieve, and that can become messy. If you indent the lines as you can see in the code examples, it will help you with spotting mistakes early.
Blockquotes
Another fine HTML Element is the <blockquote>, which is used to mark, well, quotes.
And here I stand, with all my lore,
Poor fool, no wiser than before.
Johann Wolfgang von Goethe. Faust. Part I.
<blockquote>
<p>And here I stand, with all my lore,<br />
Poor fool, no wiser than before.</p>
</blockquote>
More HTML
And there is still more to know about HTML! At this point, we want to give you the basics and a starting point from which to go farther.
To get a good overview about the tags you can use in your HTML document, you can consult one of the many HTML references. We recommend you use the MDN Library. There you can also find a more extensive introduction to HTML. On the "Find more treasures" page we will provide some more links for learning about HTML.
Partner in crime: CSS
You probably wondered how the blockquote on this page can look so beautiful, or how to add colors and stuff. Don't fret, we have a page about styling your documents for you. Read on in the next chapter!