HTML is a mark up language. The idea is to use HTML tags to mark up the content of a page. When choosing a tag for an element the best approach is to choose the tag that best describes the element. Tags should add to or confirm the context of an element.
The wrong approach is to choose tags by they way they will make an element look. Ideally the look of any page is handled by the styles in your stylesheet. The overall goal is a separation of content and presentation. Choosing tag based on how presents content thwarts this goal.
When choosing tags you should look at the content and ask your self which tag best describes that contents function on the page. Not only does this method make better web pages it also makes the job of marking up a page much easier. Rather than trying to think about how the end result will look and guessing which tag would get you closest, your content will basically tell what tag to use. Is the content a heading or a paragraph or is it a list? With little thought and practice you will see that most of the content on a page will have tags that should obviously be applied.
Using the list of HTML5 tags, found here. Consider the tags, there are tags for most every type of content that you might present on a page.
Consider the div tag. This tag creates sections. Think of the div as a tag that allows you to group related content. Often related content is displayed together. By considering content in this way you get better and more logical use of the div tag.
Headings h1-h6. These tags mark headings on a page. They are categorized or weighted with a number 1 to 6, 1 being the most important heading on a page and 6 being least important. Headings name or label the content and or sections on a page. The content of the h1 tag should be the name of the site, name of the page, or describe the subject of the page.
Never use the img tag for a heading. Instead use Image Replacement to replace the heading with an image via CSS.
The img tag should only be used for images that are page content, photos for example. Images that are part of the design and presentation of a page should be included via CSS.
HTML5 provides a new set of sectional tags. These tags have names like:
- section
- article
- aside
- details
- figure
- figurecaption
- footer
- nav
- time
These new tags all describe the context of the content that might appear on a page. Think about the header, article, nav and footer. These tags tags can be used to describe the main sections of a page. You may have used the div tag in the past for this.
Note: At this time (2010) HTML5 is far from complete. So the tags above may not be fully recognized by current browses. That said there is no reason why can’t use them keeping in mind, when not recognized by a browser these tags will act as inline. Most of tags above suggest use as block elements. To use them as block elements you’ll need to set the display property to block manually.