HTML and CSS Reference
In-Depth Information
In the past (defined as pre-HTML5), web designers often used
<div>
elements to segment
the page. These elements don't provide very much context as to what they are intended to
contain. But with the semantic markup available in HTML5, you can use more descriptive ele-
ments for the page sections. As you saw in the blog-page layout example, the HTML elements
alone make clear the intent of each segment of the page. As search engines scour webpages,
they detect the markup and know what to take from it to properly index the page.
The
<article>
and
<section>
elements are the main ones used by the SEO algorithm. These
elements are known to contain the main body of the page. That a page have more than one
<article>
and/or
<section>
element is acceptable; they all get indexed. Within each
<article>
element, the engine then seeks out elements such as
<hgroup>
or
<h1>
to get the main
topic of the
<article>
element for relevant indexing. However, this doesn't mean that if a site
doesn't have
<article>
or
<section>
elements, it won't get indexed and be searchable. This
speaks only to the quality of indexing the search engines can conduct to make your site more
searchable by end users.
SEO is a great technique to understand when designing websites. Creating a website just
to leave it in the dark and hard to find doesn't serve much purpose. Being found is very im-
portant and, when the site is found, you don't want to limit your audience. Accessibility is also
very important.
Next, look at how HTML5 affects the use of screen readers.
Screen readers rely on the document outline to parse the structure and present information
to the user. Screen-reader programs can read the text on the page and convert it to audio
through a text-to-speech algorithm. This is helpful for users who might have difficulty view-
ing the webpage. As discussed earlier, the way the document gets outlined in HTML5 has
changed. Here's a little more detail.
Prior to HTML5, a page was outlined using only the header elements (
<h1>
through
<h6>
).
The relative position of each header element to the previous header element within the page
created the hierarchy. Screen readers could use this information to present a table of contents
to users. However, HTML5 introduced semantic elements to create new sections. This means
that
<section>
,
<article>
,
<nav>
, and
<aside>
elements all define new sections. The introduc-
tion of the semantic elements changes how the document outline is created. For example, if
the following HTML was going to be the hierarchy of the sample document, you could possibly
lay it out like this:
<h1>Fruits and Vegetables</h1>
<h2>Fruit</h2>
<h3>Round Fruit</h3>
<h3>Long Fruit</h3>
<h2>Vegetables</h2>
<h3>Green</h3>
<h3>Colorful</h3>
Search WWH ::
Custom Search