So far, we covered a little bit of the background of HTML and
the basic elements that are required for each HTML document.
In this chapter, we'll begin exploring how to structure pages
properly by examining the sectioning elements that are available in HTML.
One of the major benefits of HTML is that it allows us to
structure documents in a way that illustrates the meaning of the content.
This is often referred to as semantics.
And it's an important part of the web authoring process.
Most of the time content in a web page fits within specific sections.
You might have the company information up top in a heading.
The site navigation and a section below that followed by the main content and
perhaps, a sidebar with some related information below it.
Below everything else, there might be a footer than contains contact
information or other information related to the site.
Now that's a pretty standard layout for
web pages and if you spent any time at all browsing the web,
you probably recognize those sections almost immediately and intuitively.
However, as designers, it's really easy for us to lose track of
the fact that there are people using assistive technology and machines,
such as search engines that can't rely on the visual layout to convey meaning.
For those users,
the actual structure of the page has to convey the information about the content.
If the page isn't structured properly, the page content will have no hierarchy and
no way to convey how the content relates to each other.
That's where HTML's sectioning and heading elements come in.
These elements allow us to group content together in specific sections that have
semantic meaning.
They are the headings, which are the h1 through h6 elements.
And the article, aside, nav and section elements.
When used properly, these elements give your document an intelligent outline that
clearly represents the page's content.
In addition to these sectioning elements, HTML also has several semantic elements
that can help add structure and meaning to your document as well.
These are the header, main and footer elements.
Used together, these elements allow you to group sections of
content into clearly defined regions.
Establish the relationship between those regions and
make your pages more readable for both people and machines.
This will result in more accessible sites, better search engine results and
sites that are more consistent and easier for you to style.
I can't stress enough how important it is for
new web designers to learn how to use these elements correctly.
By focusing on proper page structure early in the process of learning HTML,
you can avoid costly mistakes in the future and
be well on the way to producing semantic sites that perform exactly as intended.