In this first post about web standards, I’d like to discuss a topic that may seem overdone and has been discussed extensively. Unfortunately, some developers do not follow the principles, perhaps out of convenience or lack of knowledge. So I will try to help at least some of them see the light.
I’ll start with two basic concepts, according to Jeffrey Zeldman:
-
Valid Markup: markup that contains no errors (for example, forgetting to close tags) and no illegal tags or attributes (for example, using the
heightattribute on tables, which is not allowed). -
Semantic Markup: markup in which the tags represent the type of content for which they were designed (for example, using the
h1heading tag to mark the most important piece of content on the page).
If I use an h1 tag on a piece of content just to make it look a little larger, without being sure that the content is actually more important, that is not semantic markup.
A web page can be valid without being semantically structured, as is the case with table-based layouts, where table cells are used to create a visual appearance rather than to represent the content. They have no syntax errors or illegal attributes, however, and are therefore valid.
The reverse is also possible, such as a table representing a calendar (semantic markup) but with some unclosed tags (invalid). Professionals who try to create pages based on web-standards best practices care both about making the page valid and about choosing the right tags for each piece of content, thereby achieving semantic markup as well.
Many developers—and even some instructors who pass on a distorted understanding—still confuse this with the idea that HTML is for visual presentation. This is probably a legacy of table-based layout practices, which were used when CSS was not supported by the major browsers. Another complication is that human perception is so strongly oriented toward sight. Professionals may therefore say it is better to use an h3 tag because h1 looks too large in the browser and h6 is almost illegible—a mindset stuck on formatting. Instead, the idea should be that we can use h1 for the page’s genuinely most important heading, then use the next heading levels for content that is progressively less important.
Understanding this basic principle of semantic markup is the first step, and it is essential for building an accessible page with good usability, making it comfortable for users and easy for search engines to index. It also broadens the possibilities for use on mobile devices, screen readers, and any other mechanisms or devices that may be created.
Valid Markup is easy to detect with automated software because it is a matter of syntax and predefined rules. But good use of Semantic Markup depends strictly on the developer’s awareness and maturity when it comes to web standards. At that point, the human factor is essential.
This is my attempt to contribute, because starting a page with semantic markup is “starting off on the right foot.” Depending on the context, if a page is built without concern for using tags that fit its content, it is very likely to fail—or even be obsolete by the time it is finished, when its owner realizes that it appears very far down Google’s results.