Page Header
Semantic Block Elements
The term Semantic Element refers to HTML elements that have some semantic meaning for humans.This means the elements impart a special meaning or purpose to a human.
The semantic block elements are listed below.
To a browser, they are all just generic block elements just like div blocks.
The semantic elements listed below work exactly like div blocks - no difference whatsoever.
Developers do not need to use semantic elements. Every Web page can be built without using semantic elements.
Some developers use them regularly. Other developers don't use them at all, or rarely.
It's basically just a matter of personal preference, or perhaps the preference of the company that employs the developer.
The W3C added them to HTML5 hoping that developers would start using them to give HTML code more meaning to humans.
It remains unclear whether they will be fully embraced, or whether most developers will simply stick with div blocks.
As it pertains to this course, use of semantic elements is optional.
This example uses semantic elements to create the page layout.
Other than that, it's no different from similar layout examples in this lesson.
There are some further comments in the source code.
<header> </header>
<footer> </footer>
<nav> </nav>
<article> </article>
<section> </section>
<aside> </aside>
<figcaption> </figcaption>
<figure> </figure>
<main> </main>
<summary> </summary>
Note: The summary of elements in the Lesson 3 examples listed inline semantic elements and provided a brief explanation. But it's hard to fully explain semantic elements until this point because one of the main uses of them is creating page layouts using semantic blocks like this example. Even if you don't use semantic elements, you will see them in other people's code and need to understand their existence and purpose, both the inline and block varieties.