The Three Parts of HTML

HTML can be divided into three parts. There is the HTML that appears in all of your web pages that is a part of the overall template used by your site. There is the HTML that is specific to the particular content present in a specific web page. Finally there is the HTML that should not ever appear anywhere on your site.

Let's first consider the HTML that is specific to each web page. Here the semantic meaning of the content should be the main if not the only consideration in determining what HTML tags to use. Most of your content will consist of headings, paragraphs, possibly lists and a few images. These need to be marked up using those specific HTML tags.

Where your content includes tabular data then mark up that content using a table with a thead for the column headings and a tbody for the content, ideally you should also include a caption that identifies what the tabular data is about.

If your page is to contain embedded video or audio then you can use the video or audio tag to mark it up if you want to make use of the new HTML 5 tags. If not or as a fallback for browsers that don't understand the new tags you should use an object tag to attach the video or audio.

If your page need to contain other content from an external source (such as other HTML or a PDF that you don't want to treat as an image then these too should be marked up using an object tag.

In your content is also the place where you are most likely to need to use some of the inline tags such as em, strong, sub and sup. You might even have a situation where you need to use an i tag where using italics has a specific meaning and does not imply emphasis (eg. the name of a ship).

The important thing with the markup for your actual content is that the tags you use be those that most semantically define the meaning of the content or in the case of the img, video, audio and object tags are the most correct tags to use for attaching content that isn't text within the current page. The tags mentioned above should cover most if not all of what you need for this part of your web page although you may need to add a few span tags at a later stage in order to get the page to look the way you want.

The common part of the HTML that is used across all of your web pages used to involve using divs to specify all of the divisions that you want to break your page up into. HTML 5 has introduced a number of additional tags such as section, aside, nav, article, header and footer that provide more specific semantic tags that you can (or at least in the future will be able to) use as part of your page template to semantically identify the different parts of the page.

If you are not going to use the HTML 5 tags yet then using a div for each of these with an appropriate id or class to identify the usage is the best alternative.

Note that when defining all of the pieces of your template with the HTML you are still working on the basis of what each piece is rather than where it will go in the final page. It is not the job of HTML to define how a web page should look. How your web page will need to look will be dependent on the device being used to display it and you will need to use CSS and media queries to define that.

In defining both your content and the template that it is to sit in there are a number of HTML tags that you will never need to use. For example the embed tag was only needed for the now long dead Netscape 4 browser as all more modern browsers support the object tag. The iframe tag was only needed for the now long dead IE4 and IE5 browsers with all more modern browsers supporting the object tag. Also any tag or attribute that had the purpose of defining how something should look or where it should be placed in the page should not be used.

Perhaps the two main things to avoid doing (because they are the two most common mistakes that people make in applying HTML to their site) are using tables with content that is not tabular data (that's what the CSS display:table, display:table-row and display:table-cell options are for) or using div tags where a more semantically correct tag exists.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow