Semantic HTML

You may have heard the term “semantic HTML”, and we refer to it often throughout these pages. First of all, “semantic” simply means “meaning”. So when you are writing semantic HTML, you are focusing on giving your content meaning. As a page author, writing valid, semantic code is probably the best thing you can do to help us maintain a site that is compliant with modern standards. So how is semantic code different from non-semantic code, and why is it so important?

Semantic code requires that page creators:

Pay particular attention to the intended meaning of every piece of content on a page.

Use HTML tags that appropriately describe the content that they contain.

Avoid using tags that don’t accurately describe the content they contain.

Never use tags inappropriately for the sole purpose of achieving a particular visual effect.

Never use deprecated tags such as <font> and <u> that were once used to describe the presentation of the content. All visual effects should be included in the CSS.

Benefits of Writing Semantically

Semantic code ensures site-wide style consistency for elements with the same meaning. Every paragraph, every list, every heading displays the same on your page as it does on everyone else’s.

It frees you from the need to concern yourself with presentation details.

It allows for device independence. The same HTML document can be paired with a variety of different style sheets, each optimized for use on a particular device, such as a computer screen, printers, mobile devices, and browsers for those with vision impairments. Without semantically written code, this would be difficult if not impossible to achieve effectively.

If/when we decide it is time to redesign the entire site, it should be a relatively simple matter to change the CSS for a completely updated look.