The word semantic gets tossed around a lot in connection with web design. A comment from someone made me realize I had overlooked discussing what that means here on Web Teacher. I use the word logical quite often instead, although I am not in a majority by talking about the logic of HTML tags as relating to sematics.
To me, however, HTML is simple because it’s logical. You can learn the majority of what you need to know about HTML in just a few hours. (It’s CSS that mortifies with its learning curve.) If text is meant to be a heading, there is a semantic (or logical) tag to create a heading element: h1, h2, h3, h4, h5, h6. Creating a bit of text that is big and bold and merely looks like a heading in a computer monitor is not the same thing. Why? Because the heading element carries the semantic meaning “this is a heading” as part of the markup. And that meaning attaches to the text no matter where or how the text is accessed: a computer monitor, a screen reader, a handheld, a cell phone, a printer.
Another way to think about it is to realize that HTML tags are self-describing. The tag itself explains the logic or semantics of what it is meant to markup. p describes a paragraph. li describes a list item. cite describes a citation. strong describes strong empahsis. See how that works?
Using the tags to create semantic meaning makes your content usable in any Internet-capable device with the logical organization carried with it.
In the move to separate content from presentation (or meaning from appearance) the first requirement is solidly structured semantic HTML. CSS can do literally anything with appearance, as long as there is a logical structure to the content that will hold up no matter how the content is styled. Without the proper HTML semantic underpinning for your content, no amount of CSS can make your page work in multiple Internet-capable devices.
In the world of semantic content, a table is used to display tabular data, a list is marked up as a list, indented text is only marked up as a blockquote when it actually is quoted material, text that needs emphasis is marked up as an em element, and so on through the logic of every HTML tag.
There is room for discussion about what element is semantically correct as markup for a certain bit of content. The lively discussions on topics about the best semantic markup for certain types of content at Simple Bits/Simple Quiz lead Simple Bits’ Dan Cederholm to write two excellent books about semantic markup: Web Standards Solutions
and Bulletproof Web Design. If you want more detail about the topic, pick up one of those books and get the complete story.
Technorati Tags: web design, accessibility, usability, CSS, web standards