Semantic HTML
=============
In the *Try It* section on the :ref:`Tags page `, we used a
```` element to center two paragraphs on the screen. This is an
example of a very common technique. To organize content on the page, we often
split the page into separate sections. We can then fiddle with the size, color,
alignment, etc. for the elements in each section without affecting the
properties in other parts of the page.
Here's an example of an HTML file that organizes a page into six sections:
.. sourcecode:: html
:lineno-start: 6
Content...
Content...
Content...
Content...
For this short file, we can count the number of opening ``
`` tags to
identify the number of sections. However, figuring out what each section does
is more difficult. Is the ``
`` element on line 13 a figure caption for the
``img``? Before we can say for sure, we would need to examine the content
inside that element, or look at the final page in a browser.
For the sample code above, we would want to include plenty of comments in the
file to describe the purpose of each ``div`` element. After all, once we move
on to our next project, another programmer might need to update the code for
this page. We must make sure they understand what we created.
.. admonition:: Tip
Making code work is important, but so is making it easier for others to
understand. Not every piece of code a programmer reads is something they
wrote!
Besides comments, HTML also includes a way to use the tags themselves to
describe the layout of a page. The code below builds exactly the same page as
the first example. However, note how it helps answer the question, *What does
this section do?*
.. sourcecode:: html
:lineno-start: 6
Content...
Content...
Content...
Aha! Finding the figure caption is a snap now, and we can see that we have a
header and footer at the top and bottom of the page. It looks like the purpose
of the ``section`` element is to organize related ``article`` and ``figure``
elements, and the ``article`` tag name gives us a clue about the type of
content that begins on line 10.
HTML Writing Style
------------------
.. index:: ! semantic html
Just like any other author, programmers write HTML with different style guides
and ways of thinking. Two different coders can look at the same set of content
and choose different ways to arrange it on the screen. However, both of them
use the same set of HTML tags to do their work.
**Semantic HTML** is not about the appearance of the webpage. Instead, it's
about the specific meaning of the elements. Semantic HTML uses more descriptive
tag names to help identify what each section of the code does. This helps
programmers clarify the structure of a webpage.
For example, developers can make paragraph text larger than heading text if
they want to. By looking at the HTML, however, we can still identify what is
the paragraph and what is the heading. The ``
`` and ```` tags give us
that information. This is the strength of semantic HTML. The tag names express
meaning.
Another benefit to semantic HTML is that programmers find it easier to
visualize the results when they can put a specific name to a section of their
code.
Screen Readers and Accessibility
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
A well designed webpage organizes content in a clean and attractive way. For
these pages, sighted users can easily find the navigation bar or identify the
main content of the page. However, individuals with visual impairments may use
screen readers to navigate the page.
Screen readers are tools that verbally describe the content on a page. They
also describe the HTML tags surrounding the content. With semantic HTML, we can
make our webpages accessible to all people, including those who use screen
readers.
For example, the ``div`` and ``span`` elements organize content on the page,
but they do not provide any information about the content itself. If we use
separate ``div`` elements to build a navigation bar and organize a set of blog
posts, a screen reader can give no clarification to the user. As the person
listens, they might not recognize which words deal with navigation. However, if
we replace a ``
