Content grouping and structure
Practice
This practice will consist of the addition of content to the document obtained in the practice of the previous tutorial ("The document structure"). To keep examples from getting too long, we'll be focusing only on the content; this is, everything that's inside the body element. So be careful, because you're not going to see the head section of the document here, but it should be present in your file.
We'll begin our practice by creating a simple paragraph, following the sequence: opening tag, content and closing tag.
<body>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</body>
Today I woke up decided to learn HTML on my own.
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
There are two things to note here: first, we added the paragraph inside the body, the right place to add content in a document; and second, we inserted it after the previous declared paragraph, just because it made sense.
The next thing we're going to do is to create a very basic table of contents for this document. This will be represented by an ordered list and will be placed at the begining (before the paragraphs). Let's start with the opening and closing tags of the list container (ol), leaving a space inbetween to include a couple of items later.
<body>
<ol>
</ol>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</body>
Now we can add the items to the list concluding, by now, with our table of contents. Items in ordered lists (as well as in unordered lists) are inserted with the li element, and the steps are the same as before: opening tag, content and closing tag. So, let's add a couple of these inbetween the list tags.
<body>
<ol>
<li>I made up my mind</li>
<li>Getting the hang of it</li>
</ol>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</body>
- I made up my mind
- Getting the hang of it
Today I woke up decided to learn HTML on my own.
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
This structure is good enough on its own, but as we're very meticulous, we're dividing this small content into sections. We'll start by setting up the following two main sections: a header section containing the table of content; and a main section enclosing the central content of the document. Later, we'll make further divisions.
<body>
<header>
<ol>
<li>I made up my mind</li>
<li>Getting the hang of it</li>
</ol>
</header>
<main>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</main>
</body>
- I made up my mind
- Getting the hang of it
Today I woke up decided to learn HTML on my own.
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
Next we'll divide the main section of this document into two more sections, each containing one of the two paragraphs. This is a thematic division of the content that will contribute by making the document more readable. In subsequent practices you'll see clearly how each of these sections match an item in the table of contents. For now, just bear with me and pay close attention to the placement of the tags of each section: the opening tag before a paragraph; the closing tag after it.
<body>
<header>
<ol>
<li>I made up my mind</li>
<li>Getting the hang of it</li>
</ol>
</header>
<main>
<section>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
</section>
<section>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</section>
</main>
</body>
- I made up my mind
- Getting the hang of it
Today I woke up decided to learn HTML on my own.
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
Lastly, we'll add a heading to each one of these sections, with the exception of main. In this case, and because of the structure of our content, we'll add only level one headings with the h1 element. As expected, these titles will precede all the content of the sections they belong to.
<body>
<header>
<h1>Table of contents</h1>
<ol>
<li>I made up my mind</li>
<li>Getting the hang of it</li>
</ol>
</header>
<main>
<section>
<h1>I made up my mind</h1>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
</section>
<section>
<h1>Getting the hang of it</h1>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</section>
</main>
</body>
Table of contents
- I made up my mind
- Getting the hang of it
I made up my mind
Today I woke up decided to learn HTML on my own.
Getting the hang of it
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
Now you can see, specially when your document is rendered, how the table of contents lists each section in the document. This a good use of the sectioning elements provided in HTML5 and an improvement in readability for the users.
This tutorial introduced the idea of grouping and sectioning of content in HTML documents. Although the elements analized here are only a small selection, they should be more than enough to get you ready to discover the other grouping and sectioning elements by yourself. Don't forget to visit the list of elements in HTML5 for this purpose.