Marking up the web

A really quick look at using HTML

The backbone of every website is HTML; upon it rests everything else. HTML stands for Hypertext Markup Language but the only part we are interested in at the moment is the Markup part. Think back to high school or college English for a minute. Remember all of those crazy annotations and markings on your composition papers? Well, they provided meaning–so that you could go back and correct all of your mistakes. Here is an example…

Proofreading annotations

Now, I realize that marking up content for a website and marking up an English composition paper are a little bit different. But the thing to remember is, that in either case, we are just providing additional meaning about the content. If you can wrap your head around this concept, you will be armed with the knowledge you need to build rock solid websites. Let’s take a look at a few really simple examples…

<h1>This is a heading tag, used to mark up headings.</h1>
<p>This is a paragraph tag, used to mark up paragraphs.</p>
<section>
    <h1>I am a heading tag wrapped in a section.</h1>
    <p>I am a paragraph tag wrapped in a section.</p>
</section>

As you can see, all I have done is take the content and wrap each little piece in the most appropriate tag (also referred to as an HTML element). This process creates what we call “semantically correct” web documents. So, everytime I build a website, I start by examining the content and asking myself, “how should I mark this up?”

Building semantically correct web documents, then, should be our goal and for very good reason. The web is all about content. When we, as web authors, create semantically correct documents, it aids in its consumption. For instance, search engines are able to make better decisions about how to rank and display our content, assistive technologies like screen readers can more easily parse our content for users with disabilities, and overall, it makes our content distributable.

Working with HTML? Then start by thinking about the content and how it should be marked up. In almost all cases, there is an element available to describe the piece of content in question. Hopefully this little lesson on markup has helped you understand how to think when it comes to using HTML.


Addition Resources

Marking up the web looks like this
Understanding HTML Semantics and Structure