loading...

HTML5 – HTML5 Organization: Document Content Hierarchy

Let’s discuss tags which allow developers to implement content hierarchy into their HTML5 designs, such as different levels of document content, called headings, which use six different levels of “h” tags, and DTP (desktop publishing) tools such as address areas and horizontal rules, to divide the content visually. These allow you to organize your document content into logical topical sections. They’re also utilized by search engines for indexing text-based content and for SEO ranking text-based content.

In this chapter, I go over the primary tags for implementing document content hierarchies, using headings with <h1> through <h6> tags that give developers six levels of content refinement. I also cover the <address> and <hr> tags (horizontal rule). The <hr> tag allows you to define sections for your documents. The <address> tag defines addresses for the physical and virtual (website and e-mail) address for your HTML document content. Even though these tags are legacy tags not new to HTML5, they need to be covered in this chapter.

HTML5 Content Organization Tags

This chapter covers text content organization capabilities for all versions of HTML spanning back to version 2. You look at the legacy text content hierarchy tags and see how developers define importance—to users and search engines—of text-based content with these tags.

Table 9-1 shows the text content heading or organization tags supported prior to HTML5 (the first seven tags) as well as two desktop publishing–related tags that are also supported in HTML5. These allow you to define a horizontal rule and the address area

in HTML documents.

Table 9-1. Eight HTML Content Organization Tags and Their Usage

Organization Tags

Content Organization Tag Usage

h1

Top-level heading (most SEO important keywords)

h2

2nd-level heading (2nd SEO important keywords)

h3

3rd-level heading (most SEO important keywords)

h4

4th-level heading (most SEO important keywords)

h5

5th-level heading (most SEO important keywords)

h6

6th-level heading (most SEO important keywords)

hr

Horizontal rule content divider line

address

Address information for article/document

Let’s take a look at these in logical sections, as delineated in this table, starting with the HTML “h” tags.

Heading Level Tags

: Segmenting Content Logically

The heading level 1 <h1> through heading level 6 <h6> tags allow six levels of document headings, which can be used like section (paragraph or a collection of paragraphs) titles, or more accurately, cascading topical section headings. The search engine algorithms use headings to ascertain keywords and organize text content. This ranges from the most important keywords (broad stroke content) for the document defined using <h1> and <h2>, and the least important keywords (specific, or well-defined, content) defined in <h6>.

These should be used to logically stratify the content in a way that drills down into the organization of your text content so that the user can follow and assimilate its meaning effortlessly. The organization of the text content uses heading levels as a guide to how your content is refined. For instance, you might have a document that drills down to a discussion of the Ferrari models currently available in North America from a more general discussion of exotic cars.

An example looks like the following HTML markup, which is compatible with all versions of HTML. It contains a significant amount of textual content within each paragraph tag or contains a collection of paragraph <p> tags between each of the six HTML heading levels. It defines what is in the paragraph tags by using summary terms (which are keywords, as far as the search engine robots are concerned).

<!DOCTYPE html>
<html>
 <head>
  <title>Exotic Cars Example</title>
 </head>
 <body>
  <h1>Exotic Car Document</h1>
    <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
  <h2>Exotic European Cars</h2>
    <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
  <h3>Exotic European Sports Cars</h3>
    <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
  <h4>Popular Exotic Italian Sports Cars (Ferrari and Lamborghini)</h4>
    <p>Next Level Keywords Relating to Exotic Italian Sports Cars</p>
  <h5>Currently Popular Ferrari Sports Cars</h5>
    <p>Next Level Keywords for Currently Popular Ferrari Sports Cars</p>
  <h6>Ferrari Sports Cars Available in North America (USA and Canada)</h6>
    <p>Next Level Keywords for Ferrari Sports Cars Available in America</p>
 </body>
</html>                                                                      

For this markup example, I simply used some SEO keywords suggestions as the content for the <p> tag, which is covered in Chapter 11. Normally, this is the text-based content in a long paragraph format, but it would make the example too long!

Next, let’s look at the horizontal rule <hr> tag and see how it allows you to draw a visual divider line between logical sections of a document in versions prior to HTML5, and to separate areas of the document semantically in HTML5 and later. Semantic HTML5 is discussed in Chapter 10.

Horizontal Rule Tag

: Dividing Text Content Visually

Prior to HTML5, the horizontal rule or <hr> tag was used to insert a line between logical areas in a document. In HTML5, it is no longer used for visual demarkation, but instead as a logical or semantic demarkation of logical document sections. For this reason, the parameters seen in Table 9-2 are no longer supported in HTML5. HTML5 browsers may still draw this line for presentation purposes, which the <hr> tag was used for before HTML5, but the browser or operating system looks at it as a semantic document sectional division.

Table 9-2. Parameters for the <hr> Tag, Used Prior to HTML5

Organization Tags

Content Organization Tag Usage

align

Determine alignment (left, right, center values)

size

Specify line height using pixels (integer value)

width

Specify line width in pixels or as a percentage

noshade

Forces one solid color value to be used for line

This is a logical progression for document organization, as far as content/search (HTML5), styling (CSS3), and animation and interactivity (JavaScript) are concerned. It is also quite logical where the move toward the “semantic web” is concerned.

To create the horizontal rule and semantic break between your logical sections, use an <hr> tag after the last paragraph tag. This can be done for each of the six sections, using the following HTML5 markup and building on the previous example:

<!DOCTYPE html><html>
<head><title>Exotic Cars</title></head>
<body>
 <h1>Exotic Car Document</h1>
   <p>Top Level Keywords Relating to Exotic Cars from Every Nation</p>
     <hr>
 <h2>Exotic European Cars</h2>
   <p>Next Level Keywords Relating to Exotic Cars from European Union</p>
     <hr>
 <h3>Exotic European Sports Cars</h3>
   <p>Next Level Keywords Relating to Exotic European Sports Cars</p>
     <hr>
 <h4>Popular Exotic Italian Sports Cars (Ferrari and Lamborghini)</h4>
   <p>Next Level Keywords Relating to Exotic Italian Sports Cars</p>
     <hr>
 <h5>Currently Popular Ferrari Sports Cars</h5>
   <p>Next Level Keywords for Currently Popular Ferrari Sports Cars</p>
     <hr>
 <h6>Ferrari Sports Cars Available in North America (USA and Canada)</h6>
   <p>Next Level Keywords for Ferrari Sports Cars Available in America</p>
     <hr>
</body>
</html>                                                                      

If you are developing legacy code for HTML4 and earlier, you should use the parameters shown in Table 9-2 to control the horizontal rule alignment, width, and height. Next, let’s take a look at how to specify an address for your document or article.

The Address Tag

: Specifying Address Information

The <address> tag defines the types of addresses in a document to provide contact information for the user. In versions prior to HTML5, the <address> tag was a child of the <body> tag and provided address information for the entire document. If you are using the <address> tag as a child tag in the new HTML5 <article> tag, which is covered in Chapter 10, the <address> tag defines the address (contact) information for semantically defined articles.

To create an address information section for a document, use the <address> tag with your address, e-mail, websites, and similar address-related information inside of it by using child tags. The following is an example of address HTML markup structure:

<body>
  <address>
   Document Created By: <a href="mailto:info@wallacejackson.com>Walls</a>
    <br><hr>
   Address: 12345 Streetname Road, Cityname, Statename, Zip Code, Country
    <br><hr>
   Website: <a href="http://www.wallacejackson.com>WallaceJackson.com</a>
  </address>
</body>                                                                      

Notice that I used a break <br> tag and a horizontal rule <hr> tag to define the different areas of the address with a semantic break (HTML5) and a horizontal line (rule) for HTML 4 and earlier. The break tag is covered in Chapter 11.

I saved the rest of the document organization tag topics for Chapter 10, which discusses semantic document definition, since HTML5 and later use special tags to define the content areas for the document (HTML5 browser) or the application (HTML5 operating system). This <address> tag is a great example of a semantic tag, and a good way to segue into the new HTML5 semantic tags.

Summary

This chapter discussed document headings and desktop publishing legacy support in HTML5 and all previous versions using the <h1> through <h6>, <hr>, and <address> tags and their related parameter options. The next chapter continues the document organization journey by using the new semantic tags added to HTML5 to support the organization of content in logical areas within a document. Defining text-based content through paragraphs, lists, forms, tables, and the like, is also covered.

Comments are closed.

loading...