This lesson focuses on the semantic elements we use for
sectioning content of a web document. In other words, you'll
learn about those elements that are used to create a document's
structure such as header, footer, and navigation, as well as
container elements like sections and articles.
As you read about the various elements, you'll probably find that
these seem to lend themselves more to sites with articles or
blog posts. In fact, these lesson tutorials do use a lot of these
semantic elements. However, they're not limited to that kind of
you'd still use many of the elements in this tutorial for the
different parts of the game screen!
The set of elements for creating document sections are often
referred to as the
Elements. These elements were added to HTML (HTML5)
in 2014. Document sectioning elements are elements
that are used to divide page content into
logical sections. For example, a <footer> element obviously
contains the footer to a document, article, or entry; The
<article> element contains some kind of article or post that
can stand on its own. All of these elements are block elements.
Read about each of the following elements to learn more about
how they're used:
<article> - to contain an article (news, blog, tutorial, etc.)
or other content that can stand on its own in its own page/document.
For example, a blog might have a list of the most recent postings on the
main page, and each post would be enclosed inside its own <article>
element because each post can stand alone on its own page without losing
any meaning or importance.
<address> - to contain contact information such as
name, email, address, phone number, or any combination of those things.
For example, if a <footer> element contains the copyright information
with the author's name and email, the name and email should be contained
within the <address> elemement.
<header> - the document header, but can also be
used for an article/section header
<footer>- the document footer, but can also be
used for an article/section footer
<nav> - to contain a block of
navigation. This can be page navigation,
or site navigation. A document could have multiple navigation elements
for different kinds of navigation (for example, each tutorial/article
in this page has navigation to the other sections in the tutorial, but there is
also a <nav> element at the top of the page for navigation to my main page and
other courses). It's not necessary to put all links inside a <nav> element,
only when you have a clear block of navigation.
<section> - a generic section of content, used where
the <article> element isn't appropriate. For example, a web page could have
sections for the "About this Application" information, a section for the
latest news, and a section for contact information. Sections could also be
used inside articles: for example this page could be one <article> element with
a section for the overview and a section for the element descriptions.
<aside> - used for a "sidebar", which is a bit of
content that's related to the content around it but could still be
considered separate. You've probably seen these in magazine articles.
For example, if you're reading an article about current trends in web design,
there might be a sidebar with a paragraph about an interesting design decision
the author made or experienced. Or an article might have a relevant quote
displayed in an <aside> element. Sometimes an <aside can even contain
a <nav> block.
<h1> to <h6> - level headings where <h1> is
the highest level and <h6> is the lowest level.
These elements are used for titles and headings of documents and a
document's sections and sub sections. They should be used in a hierarchical
matter, similar to the headings and sub-headings used in any written
document (such as an article or essay). For example, the main
sections of a document use level-1 headings. The sub-sections must use level-2
headings. If the sub-sections have their own sub-sections, you must use
level-3 headings for the sub-sub-sections. Additionally, all <article>
and <section> elements are required to start with a level-N heading.
Don't confuse the level-N headings
with the <header> element: The <header> element contains all the
content of your document's header, which might include some level-N headings
for the page title, sub-title or sub-heading, and navigation. For example,
the header element of this page contains a <h1> element with the course
title and then a <h2> element with the page title, and then the search bar
and lastly a <nav> element that points to my main page and this course's
main page. Level headings must be used in a hierarchical manner:
Note that the level-N heading elements always go in ascending order: <h1> is the
"highest" (most important) level heading and <h6> is the "lowest" (least important).
Here's a CodePen that shows a page using many of the elements mentioned
above. Note that the colours, fonts, and layout were actually done using
CSS, which is a different course. You can learn
CSS after you learn HTML, but for now just ignore the CSS tab.
A MAIN element between the HEADER and FOOTER that contains
An ARTICLE that contains some paragraphs of
text (you can just use filler text if you prefer,
such as BlindText Generator). Make sure your
article starts with a level-3 heading that contains an
appropriate title of your choice.
A second ARTICLE like the previous one, with different
Inside one of your ARTICLEs, add an ASIDE with
some text content.