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.
The W3C didn't add them until HTML5, so they came to the game fairly late.
It's basically just a matter of personal preference, or perhaps the preference of the company that employs the developer.
Use of semantic elements is optional for this course. But you should know what they are for the next exam.
See further comments in the source code, where semantic elements are used to create the page layout..
Other than the use of semantic elements, the page layout is the same as other examples I have provided.
<header> </header>
<footer> </footer>
<nav> </nav>
<article> </article>
<section> </section>
<aside> </aside>
<figcaption> </figcaption>
<figure> </figure>
<main> </main>
<summary> </summary>
Semantic Inline Elements: You don't have to know this for exams, or otherwise, but there are also some inline semantic elements. We mention this here just for the sake of completeness. The following 2 elements make italic text: <dfn>definition</dfn> and <em>emphasis</em>. They literally do exactly what the <i>italic<\i> element does. The <abbr>abbreviation</abbr> element literally does nothing - it causes no formatting. The <q>quotation</q> element simply adds "quotation" marks, just like if you typed the " characters. So you see, these elements really add nothing to the HTML language, other than some extra semantics. There are a few others, but I think you get the idea.