Semantic (X)HTML: Markup with Meaning

Over 1 million movies and TV episodes
Learn more at amazon.com

Before we can start working with CSS, we need to be sure we are able to adequately structure our (X)HTML documents in a modern fashion. Contrary to what you may have learned in the earlier years of web development, (X)HTML should not define the look and presentation of a web page (that's the job of CSS). Instead, the purpose of (X)HTML is to provide context and meaning to the content of the document - this is referred to as semantic markup.

What is Semantic Markup?

CSS relies completely on the (X)HTML that references it. If you want to use CSS to its fullest potential, it's imperative that you provide it with clean, structured content marked up with (X)HTML. Before you can do that, you need to understand (X)HTML's purpose in life. According to the World Wide Web Consortium (W3C), an organization that develops specifications for many of the interoperable technologies used on the Web, "HTML is the lingua franca for publishing hypertext on the World Wide Web ... HTML uses tags such as <h1> and </h1> to structure text into headings, lists, hypertext links etc." (www.w3.org/MarkUp/).

In simpler terms, (X)HTML is a way of adding structure and meaning (or "semantics") to textual content. It's a way of saying, "This line is a header, and these lines make up a paragraph. This text is a list of items, and this text is a link to another document on the Web." Note that it is not the job of HTML to say, "This text is blue, and this is red. This section is a column that is to the right of everything else, and this line is in italics." That presentational information is CSS's job. when developing for the modern Web - especially if you come from the old school - always remember this: (X)HTML tells us what a piece of content is (or what it means), and not what it looks like.

When we refer to "semantic markup," we are talking about (X)HTML that is free of presentational information and chock-full of meaningful tags that define the structure of the document.

How Does Writing Semantic Markup Help You in the Real World?

Good semantic (X)HTML markup helps to promote the accessibility of your site to visitors. Not all visitors to your site will be able to "see" your CSS and JavaScript, but they'll all get your (X)HTML. Therefore it's essential that your markup provide the semantic context necessary for comprehension of your content.

Screen readers (for visitors who are visually impaired) "read" your web page based on the markup. For example, if you use the semantic <acronym> tag, a screen reader may "spell out" your word rather than trying to pronounce it. You'll learn how to create semantically rich markup in the next section.

Personal digital assistants (PDAs), cell phones, and other devices may not render your page in the same way a desktop web browser does (usually because these devices have reduced support for CSS). Using semantic markup ensures that these devices render your page in a way that makes sense. Ideally, it is the job of the viewing device to render the content as appropriate to the context of that device. Starting with semantic markup gives the device the information it needs to make contextual decisions, and saves you from having to think about all the possible contexts where your content will be consumed (now or in the future). For example, a cell phone may choose to render text marked up with a header tag in bold. A PDA may display the same text in a larger font. Either way, by marking up your text as a header, you've made sure the reading device will act accordingly, based on what it feels is appropriate for the context in which the page is being viewed.

Search engine crawlers also rely on your markup to determine context and weight of various keywords. You may not have considered search engine crawlers and bots as "visitors" to your site in the past, but they are actually extremely valuable users. Without them, search engines wouldn't be able to index your sites, and human users would be less likely to find them. It's in your best interest to make your pages as easy to understand as possible for crawlers, which largely ignore presentational markup and pay attention only to semantic markup, Therefore, if the name of your web document is marked up in a <font size="7"> tag instead of an <h1>, your site's position in search engine results could suffer.

Besides promoting accessibility, semantic markup facilitates the proper use of CSS and JavaScript by providing many "hooks" on which to apply styles and behaviors.

Creating Semantically Rich (X)HTML Markup

Now that you understand the benefits of semantic markup, how can you go about creating (X)HTML that is as structured and meaningful as possible?

Start by using the right (X)HTML elements for your content. If it's a paragraph, put it in a <p> tag. If it's a header, put it in an <hx> tag. If it's a list of links, use <a> tags inside of list elements. This may sound simple, but it's astonishing how many sites you'll find on the Internet that don't bother with these details at all. They choose to put two <br> tags after some text rather than using the paragraph element, or they use <font size="5"> instead of a header element.

To help you decide on the right elements for your content, become familiar with some of the lesser-used (X)HTML tags. There are a whole host of useful elements out there that many web developers seem to completely forget about. By simply adapting some of these tags as your own, you can quickly add structure, content, and styling hooks to your documents. We'll be using many of these tags later in the book as we get into styling various page elements. In the meantime, you may wish to brush up on your (X)HTML if these are not elements you are familiar with. Table 1-1 lists some of the lesser-used tags you may want to get to know.

Table 1-1 Semantic (X)HTML Elements That Are Often Underused by Designers and Developers

It should be obvious by now, but creating semantic markup, you want to avoid presentational tags such as <font>,<i>,<b>, and <u>. The sole purpose of each of these tags is to create a visual effect, which in the modern world of web development is the job of CSS, not (X)HTML. You should use elements like em and strong to define the meaning of the content, and then use CSS to specify your desired presentation for those elements (such as underlined, bold, or italic).

Also, do not repurpose structural tags for presentational effect. Before browsers supported CSS, many a web developer (including the authors of this book!) found creative ways to use tags for purposes other than their intended ones. For example, developers used the table element - designed for displaying tabular data such as spreadsheets and invoices - as a layout grid for their pages. They used the <blockquote> tag to create indentions. This sort of repurposing, while clever, is simply not necessary on the modern Web. Using CSS, you can style any element to look any way you'd like. There's no need to use an <li> tag just to get a bullet to appear next to some content. use the list item element (li) if it really is a list item, but if it's not, simply use CSS to restyle the appropriate element with a bullet. Remember, the (X)HTML should tell us what it is, not what it looks like.

This is an excerpt from:

This advanced CSS book is a must for any modern web developer to own. It is completely up-to-date, with information on browser support in all the latest versions and CSS levels 1, 2, and 3. Unlike beginner-level books that teach CSS in a lighthearted style, this one gets serious, giving CSS the proper, professional treatment it deserves. Each technique is presented in an informative tutorial style, with every point backed up by multiple real-world examples and case studies. The authors cover hacks and filters, code management, advanced layouts and styling, typography, and much more. Click here to learn more.

Learn more at amazon.com

More HTML Code:
• HTML center Tag
• Create a Meta Tag Slide Show - No Java Script Required
• Introduction to HTML
• HTML List Basics
• Easy Form Design
• When to Use the nofollow Attribute value
• How to Write and Run HTML
• Use an Image as a Form Submit Button
• HTML Linking Basics
• Changing the Size of an Image on Your Webpage