Currently, HTML documents are usually structured using div elements. The formatting and positioning of these containers is then usually done using CSS. This approach is of course useless for software such as screen readers, as they cannot recognize the meaning of certain content. The new structuring elements are intended to change this.
Two of the most important new elements are section and article, which are the focus of this tutorial.
Labeling articles
The article element can be used to mark texts (forum posts, newspaper articles, etc.) as articles. The following example shows the definition of a typical article.
<article> <h1>Creating web apps (part 09): jQuery mobile (1)</h1> <p>jQuery is undoubtedly one of the best-known JavaScript frameworks. That's why jQuery is already used thousands of times on "classic" websites ...</p> ...</article>
Thanks to the article element, you can structure your content semantically.
A blog is a good example of what this can look like.
<article> <header> <h1>Creating web apps (part 09): jQuery mobile (1)</h1> <p>Published on: <time pubdate="pubdate">May 24, 2014</time></p> </header> <p>jQuery is undoubtedly one of the best-known JavaScript frameworks. This is why jQuery is already used thousands of times on "classic" websites ...</p> ... <footer> <p><small>Copyright by PSD-Tutorials.de</small></p> </footer> </article>
In this example, the article element is divided into the typical header, main and footer areas. And such a division is very often found in blogs.
Creating sections
We continue with the section element. The section element divides the page into different sections. These can be sections, chapters, tabs or similar. For example, sections can be used to logically separate areas such as the introduction and the latest news.section is used to divide the content according to actual content-related aspects. I will come back to the difference between section and div at the end of this tutorial.
The following example shows a typical blog structure. However, this structure also contains something that is actually needed in many blogs, namely a comments section. This comment area is defined within a section element. The individual comments within the section area are in turn each enclosed in an article element.
<article> <header> <h1>Creating web apps (part 09): jQuery mobile (1)</h1> <p>Published on: <time pubdate="pubdate">May 24, 2014</time></p> </header> <p>jQuery is undoubtedly one of the best-known JavaScript frameworks. As a result, jQuery is already used thousands of times on "classic" websites...</p> ... <section> <h2>Comments</h2> <article> <header> <h3>Comments by: Newsfriend</h3> <p><time pubdate datetime="2024-10-05T20:10-07:00">An hour ago</time></p> </header> <p>Thanks for the tutorial!</p> </article> <article> <header> <h3>Comments by: Becker</h3> <p><time pubdate datetime="2024-10-05T20:10-07:00">Two hours ago</time></p> </header> <p>Great! That helps me.</p> </article> </section> </article>
Once again, I would like to point out that I will of course go into more detail about the elements used here, such as header, footer, etc. At this point, just this much: these elements can be used to divide the content into header and footer areas, thus enabling further logical structuring of documents.
Another example will further illustrate the combination of article and section elements. The section element can actually be used to divide an article into logical content areas, each with its own headings.
<article> <h1>App development</h1> <p>Here you can find out how to create web apps.</p> <section> <h2>Creating web apps (part 09): jQuery mobile (1)</h2> <p>jQuery is undoubtedly one of the best-known JavaScript frameworks.</p> </section> <section> <h2>Creating web apps (part 08): The quick start to jQuery</h2> <p>JavaScript is a fine thing for websites, after all, you can do all sorts of interesting things with it.</p> </section> </article>
It is also possible to define article elements within a section element. A typical example of this would be a comments section, as already shown. However, it is also conceivable to divide the section into the topics covered in the blog.
Here is another example:
<section> <h1>App development</h1> <article> <h2>Creating web apps (part 09): jQuery mobile (1)</h2> <p>jQuery is undoubtedly one of the best-known JavaScript frameworks.</p> </article> <article> <h2>Creating web apps (part 08): The quick start to jQuery</h2> <p>JavaScript is a fine thing for websites, after all, you can do all sorts of interesting things with it.</p> </article> </section>
In addition, a section element can contain other section elements. Nesting is therefore permitted. Here is another example:
<section> <h1>PSD-Tutorials.de</h1> <section> <h2>Welcome</h2> <p>We look forward to...</p> </section> <section> <h2>Tutorials</h2> <P>Here are our latest tutorials...</p> </section> <aside> <p>Contact</p> </aside> </section> <footer> <p>(c) 2014 PSD-Tutorials.de</p> </footer>
This section nesting results in the following structure:
1. PSD-Tutorials.de
1.1 Welcome
1.2 Tutorials
1.3 Contact
- (c) 2014 PSD-Tutorials.de
Such structuring is therefore also possible.
The difference between div, article and section
Admittedly, it is not easy to understand the distinction between div , article and section. In fact, the article element was primarily defined for structuring blog posts. The section element is actually one level below article. A heading should also always be defined within the section element. Even if no heading is actually defined, it should at least theoretically be possible to specify a heading within the element in question.
Of course, div elements are not frowned upon in HTML5 either, but should still be used. They are always interesting, for example, when it comes to combining elements.
Finally, we would like to point out once again the visual effects of the elements presented so far. You actually need CSS for the corresponding formatting. The normal use of the elements shown has no effect in the browser. You are only structuring content semantically here. Everything that has to do with the visual appearance is controlled via stylesheets.
