WRITING HTML MARKUP pt. 1

HTML stands for Hypertext Markup Language. It is a language that allows content to be marked up in a manner that makes it more understandable to technology, and then in turn to humans. When writing HTML, you will typically be “marking up” or writing content inside a series of tags or elements. The majority of elements in HTML have an opening and closing tag. A few, like the preceding meta example, are void and hence “self-closing.” To exemplify the opening and closing nature of HTML tags, a paragraph of text would be most suitably marked up with an opening <p> at the beginning and a closing </p> at the end.

New semantic elements in HTML5

My dictionary defines semantics as “the branch of linguistics and logic concerned with meaning.” For our purposes, semantics is the process of giving our markup meaning.

In terms of the HTML specification, the elements we will be looking at fall into one of three groups:

Sectioning elements, for the broadest strokes in a HTML page. These are the kind of elements to use for header, footer, and sidebar areas.

Grouping elements, which are used to wrap associated elements. Think of paragraphs, blockquotes, and content of that nature.

Text-level semantics, which are the elements we use to designate particulars, like a section of bold or italic text or code.

We will now look at the most useful from each of these sections in turn.

The <main> element

Whether you’re wrapping the main content of a page or the main section of a web-based application, the main element is what you should be grouping it all with.

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form).

It’s also worth noting that there shouldn’t be more than one main on each page (after all, you can’t have two main pieces of content) and it shouldn’t be used as a descendent child element of some of the other semantic HTML5 elements, such as article, aside, header, footer, nav, or header.

The <section> element

The <section> element is used to define a generic section of a document or application. For example, you may choose to create sections around your content: one section for contact information, another section for news feeds, and so on. It’s important to understand that it isn’t intended for styling purposes

If you need to wrap an element merely to style it, you should continue to use a div as you would have before.

When working on web-based applications, I tend to use section as the wrapping element for visual components. It provides a simple way to see the beginning and end of components in the markup.

You can also qualify for yourself whether you should be using a section based upon whether the content you are sectioning has a natural heading within it (for example, an h1-h6). If it doesn’t, it’s likely you’d be better off opting for a div.

The <nav> element

The <nav> element is used to wrap major navigational links to other pages or parts within the same page. As it is for use in major navigational blocks it isn’t strictly intended for use in footers (although it can be) and the like, where groups of links to other pages are common. If you usually mark up your navigational elements with an unordered list (<ul>) and a bunch of list tags (<li>), you may be better served with a nav and a number of nested <a> tags instead.

The <article> element

The <article> element, alongside <section>, can easily lead to confusion. I certainly had to read and re-read the specifications of each before it sank in. Here’s my reiteration of the specification. The <article> element is used to wrap a self-contained piece of content. When structuring a page, ask whether the content you’re intending to use within an <article> tag could be taken as a whole lump and pasted onto a different site and still make complete sense. Another way to think about it is, would the content that you are considering wrapping in an <article> actually constitute a separate article in an RSS feed? Obvious examples of content that should be wrapped with an <article> element would be blog posts or news stories. Be aware that if you are nesting <article> elements, it is presumed that the nested <article> elements are principally related to the outer article.

The <aside> element

The <aside> element is used for content that is tangentially related to the content around it. In practical terms, I often use it for sidebars, or content as a little tip about a related subject in a blog post. It’s also considered suitable for pull quotes, advertising, and groups of navigation elements; basically, anything not directly related to the main content would work well in an aside. If it was an e-commerce site, I’d consider areas like “Customers who bought this also bought” as prime candidates for an <aside>.

The <header> element

Practically, the <header> can be used for the “masthead” area of a site’s header but also as an introduction to other content, such as an introduction section within an <article> element. You can use it as many times on the same page as needed. You could have a <header> inside every <section> on your page for example.

The <footer> element

Like the <header>, the <footer> element doesn’t take part in the outline algorithm (more on that in the following section) so doesn’t section content. Instead it should be used to contain information about the section it sits within. It might contain links to other documents or copyright information, for example. Like the <header>, it can be used multiple times within a page if needed. For example, it could be used for the footer of a blog but also a footer within a blog post <article>.

However, the specification notes that contact information for the author of a blog post should instead be wrapped by an <address> element which we would further discuss.