Web Semantics and HTML Structure
Style is important. There is no debate around the proposition that people want a website that looks good. This is for a very good reason - an attractive website will draw in your customers, build their confidence in what you can provide for them, and keep them engaged with your website. But a great website can't just look pretty. You can create a gorgeous website with nothing but a single large image. This can be beautiful graphic design - but nothing but design.
- adjective: of or relating to the study of meaning and changes of meaning
Of course, that's an extreme example. Very rarely do you run across a website designed that badly. (I'd love to say never, but I have seen it.) Such a design is completely lacking in web semantics - the design conveys beauty, but no meaning. Conveying meaning is the essence of web semantics.
HTML is called a structural markup language. This means that the HTML (or XHTML) tags are used to define the structure of a document. Any document has structure - look at your Microsoft Word document, and the structure of your report is very clear - it contains images, paragraphs, bulleted lists, numbered lists, and headings. When an HTML tag is used to mark-up text it is intended to show what that text is being used for - to define it's semantic function.
This is the intention of HTML. HTML should clearly describe the purpose a block of text serves within the page. The reality is frequently less than perfect, however. The creation of the HTML language stream, in reality, became polluted. It began to include code which did not serve any structural purpose - tags like
<blink>. A lot of this is due to extensions created by the leading browsers, Internet Explorer and Netscape, which accrued such extensive use that they were (unfortunately) added to the HTML specifications.
In addition to this, many structures began to be used for purposes outside of their definition. The most common example is the use of
<table> tags to create the beautiful layouts designers imagined. Other examples include
<blockquote> to create indented text or
<p> to add extra white space into a design.
Why do I care if my document has "semantic" meaning?
First of all, for the life of your website, semantic meaning has tremendous value. If you quote text and use
<font> tags and tables to set them apart, you have no way to specifically identify quoted texts in your site. If, instead, you make use of the semantically correct
<blockquote> tag, you can identify all block quoted material and alter their appearance using CSS or perform other web interactions on just those texts. If you intend to alter your website in the future, design using S and semantically valid HTML will be an enormous aid.
Secondly, search engines are better able to process semantic HTML than code without meaningful markup. A search engine can give higher priority to text in your site that is defined as a heading, as emphasized text, or as a navigation block. The robot indexing your site knows that headings are more definitive about the subject of a document. They may not analyze all of your
<font> elements to attempt to figure out which one is acting as a heading.
Lastly, semantics provide "hooks" for assistive technology to use when a visitor with an impairment browses your website. Proper heading tags provide an internal navigation structure for screen readers, table headers tell listeners where in a table they are currently navigating, and help explain the meaning of the data being accessed. Best practice accessibility depends on an understanding of the way data is being used — the structure of the information. The visual presentation is irrelevant to many assistive technologies.
The core of a website is the content it presents. However beautiful your design, it's the content alone which will really win your visitors. The best possible presentation of your content is only possible with semantic web design, where search engines and humans have an equal ability to discern the meaning of your content.
- Guide to Semantic Use of HTML Elements
- Why Use Semantic HTML?
- Graph the Semantic Structure of Your Web Page