Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Semantic (X)HTML: Markup with Meaning

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2021 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268