Website Insites

In HTML 5, the h1 tag defines a header. In fact, HTML 5, like its predecessors, has six headings, from h1 to h6.

When Do You Use the h1 Tag in HTML 5?

In HTML 5, the header tags are hierarchical. That is, h1 is a higher level tag than h2, which is higher than h3, etc. They form a nested hierarchy of importance. It’s important that with each level of heading, that the next heading further explain or break down the topic contained in the heading above it. If it does not, consider using an equal-level heading, or if the topic is different entirely, consider a higher level tag. Think of it as a High School English project where your teacher asks you to outline the main topics in a short article, and you’ll get the idea.

By the way, it’s a rare (and long) website page that will use all heading tags. It is possible, though. Short articles such as this are lucky if they get two the h2 tag.

To rank well with search engines, most experts (myself included) will tell you to choose the words for your h1 tag well, because, aside from the title tag, this is probably the second-most important tag on your page. I would also recommend you only put one h1 tag on the page, that being the main heading. If you feel the need for more than one, take that as a sign that you need to break up your topic onto multiple pages.

Any words for which you want to be found in search engines should be in your h1 tag. But please, be concise, precise, and meaningful. Don’t jam this tag full of meaningless words in a jumbled, long phrase. That’s a great way to get banned from the search engines.

How Is the h1 Tag Used in HTML 5 Documents?

Here is a simple example:


<h1>This is the main heading of this page</h1>
<p>This is a paragraph introducing the topic.</p>
<h2>Here is a second-level heading in the page hierarchy.</h2>
<p>And here is another paragraph explaining this sub-topic.</p>


In HTML 5, the footer tag defines the footer of a section or of the whole page. The section tag is new in HTML 5 and will be explained in a later post.

When Do You Use the footer Tag in HTML 5?

The footer tag is new to HTML 5, and we can be very thankful for it, since as I said in yesterday’s post on the div tag, we can finally remove one unsemantic element in our web pages.

To be used correctly, the footer must be placed at the “foot” (the bottom) of the article, section, or page. You might put some information about the post, called “meta” data, in it, such as the author, the date, and contact information (see earlier post on the address tag).

How Is the div Tag Used in HTML 5 Documents?

Here is a simple example:


<article>
<h1>A Really Short Article</h1>
<p>This is a really short article with a long footer for the sake of example .</p>
<footer>
<p class="author">by Matt Gagnon</p>
<p class="date">January 9, 2011</p>
<address>
709 Stark Road, <br>
Conway, New Hampshire 03813 <br>
USA <br>
websiteinsites.com
</address>
</footer>
</article>


In HTML 5, the div tag defines a division or section on an HTML page.

When Do You Use the div Tag in HTML 5?

In HTML 5, the div tag is one of those special tags that actually has no semantic meaning at all. Because of this, and because when you use it it adds more complexity to the page structure and also more time to download the page, I try to limit my use of it. That being said, it is very useful for laying out blocks, or sections of the web page, and that is what most people use it for.

Now with some new elements in HTML 5, which I will show in a later post, most of these divs can be removed and replaced with semantic markup that can be used for the same purposes. See the example below for a common example.

By default, most browsers will add some white space around the div tag.

How Is the div Tag Used in HTML 5 Documents?

Before HTML 5, it was very common to see page layout like this:


<div id="header">Header of the page here</div>
<div id="left">Left column here</div>
<div id="center">Main column where the content is</div>
<div id="right">Right column here</div>
<div id="footer">Footer of the page here</div>


In HTML 5, the caption tag defines a table caption.

When Do You Use the caption Tag in HTML 5?

In HTML 5, the caption tag tells the user what the table is all about — kind of like a headline. The tag has to come right after the opening table tag.

By default, most browsers will center the tag right above the table, but this can be changed. There can only be one caption per table.

How Is the body Tag Used in HTML 5 Documents?

Here is a very simple example.


<table>
<caption>Product Size Chart</caption>
<tr>
<th>Size</th>
<th>Inches</th>
</tr>
<tr>
<td>SM</td>
<td>10</td>
</tr>
<tr>
<td>MD</td>
<td>12</td>
</tr>
<tr>
<td>LG</td>
<td>14</td>
</tr>
</table>


In HTML 5, the br tag defines a single line break.

When Do You Use the br Tag in HTML 5?

In HTML 5, the br tag is used to create a line break in text. I most often use it within the address tag, which denotes the page author’s address, whether it be a physical or virtual address. It can also be used to break headings or other text that would otherwise create an orphan or a widow, which are basically words that are left on a line by themselves, and often don’t look very nice. It can also legitimately be used for poetry, song lyrics, or quoting the Bible.

The break tag has no ending tag, and so it is called an “empty” tag.

Misuse of the HTML 5 br Tag

Through ignorance of the semantics of the break tag, many people tend to misuse it. They’ll often use them to lay out forms, but to me this just adds extra markup to do something that can be done in a much cleaner way. Or worse yet, in my opinion, they’ll use them in place of <p> tags — the paragraph tag. And because the break tag usually only adds a single line space, they end up using two of them to achieve the same visual effect as one p tag, and of course with the wrong semantic meaning.

How Is the body Tag Used in HTML 5 Documents?

Here is a very simple example.


<h1>Jabberwocky</h1>
<cite>Lewis Carroll, from Through the Looking-Glass and What Alice Found There, 1872</cite>
<p>
`Twas brillig, and the slithy toves <br>
Did gyre and gimble in the wabe: <br>
All mimsy were the borogoves, <br>
And the mome raths outgrabe.
</p>


In HTML 5, the body tag defines the HTML page’s body, oddly enough.

When Do You Use the body Tag in HTML 5?

In HTML 5, the body tag is one of the more important tags, since it contains all the visible portion of the web page. Between it’s opening tag and closing tag you will put all your heading tags, paragraph tags, links, copy, images, videos, audio, and etc. The main tags that aren’t in the body tag are the html tag, the head tag, some meta tags, links to stylesheets, and JavaScript links.

How Is the body Tag Used in HTML 5 Documents?

Here is a very simple example. This happens to be the minimum amount of HTML 5 to create a valid web page:


<html>
<head>
<title>This is the title of the page; a very important tag<title>
</head>
<body class="static" id="2column">
<p>This is the visible portion of the web page, within the body tags.</p>
</body>
</html>


In the example above I’ve added a class of “static” and an id of “2column” to make it easier to style the content of the web page. For example, you might use the CSS class static for pages in a content management system that don’t change very often, like an About Us page, to set it apart from the more dynamic pages like a product category. The id is there to perhaps style the page with a 2column layout.

In HTML 5, the blockquote tag defines a longer quotation taken from a source other than the current site.

When Do You Use the blockquote Tag in HTML 5?

In HTML 5, if you have a longer quote, or one that has a citation or paragraph breaks, you should use the blockquote tag. You might, for example, put a long product review in a blockquote tag, and use the cite attribute to cite the url source, if it was not from the current site.

The blockquote tag has not changed from HTML 4 to HTML 5.

How Is the blockquote Tag Used in HTML 5 Documents?

Here is a very simple example:


<blockquote cite="http://ProductReviewSite.com">
<p>I think the new Super Slimer 2000 is a great slug repellant!</p>
<p>I've used it on my Dahlias, tomato plants, and my husband, all to great effect!</p>
</blockquote>


By default, most browsers will display blockquote tags with whitespace before and after, and most will indent them left and right as well. The site designer can change this by modifying the style sheet.

The aside tag is new to HTML 5, and it defines a passage of text as an aside, or set apart from, the main passage, but related to it.

When Do You Use the address Tag in HTML 5?

Remember your Shakespeare? Didn’t you think it odd when Hamlet turned aside and spoke his inner thoughts to the audience, with all the other characters pretending they don’t hear or seem to notice the interruption? In today’s times, if you want to further explain something but don’t want to interrupt the flow of thought, you would use an aside.

How Is the address Tag Used in HTML 5 Documents?

Here is a very simple example:


<p>There are at least two languages a designer needs to know when working on a website, HTML and CSS.</p>
<aside>
<h2>HTML</h2>
<p>Stands for Hypertext Markup Language, and is used to "mark up" text to display in a web browser on a website.</p>
</aside>


In HTML 5, the address tag defines contact information for the page’s author or owner.

By default, every browser will display address tags as italic text. The site designer can change this by modifying the style sheet however. Also, most browsers will add whitespace before and after this tag.

When Do You Use the address Tag in HTML 5?

In HTML 5, if the address tag is inside the new article tag, it defines the contact information for the author or owner of that particular article. HTML 4 does not support the article tag, so in HTML 4 it defines the contact information of the page’s author or owner.

How Is the address Tag Used in HTML 5 Documents?

Here is a very simple example:


<address id="contact">
Matt Gagnon
Website Insites
(603) 662-4235
</address>


In HTML 5, the a tag creates a hyperlink, or simply, a link, from one page to another. It is the main reason we have an internet at all, since it creates associations from any number of pages on one site to any number of pages on the same, or another website.

If you were to draw a diagram of a website’s pages and their relationships, you would most likely use the links on the pages to do this, since a link to another page shows that their is a relationship to the linked page.

The most important and most useful part of the a tag is the href attribute, which tells the browser where to send you when you click the link.

By default, every browser will display a tags as text that is underlined and blue, if you have not yet clicked on that link. If you have clicked on it, by default it will be underlined and purple the next time you see it. Lastly, by default if you place your cursor over the link, called hovering, it will be underlined and red. Usually, however, the website designer will have changed the style of links to some other format so it will look different. Hopefully the links will be obvious when in their unclicked, hovered, or visited states though. You can never make links obvious enough on any website.

When Do You Use the a Tag in HTML 5?

As described above, you use the a tag whenever you want to link to another page, either on the current site or another site. When you do so, you are in effect saying to the reader, “You may also find this page useful in the current context of what we’re talking about.”

In order to help your readers understand the context of the link, and to help search engines index your pages, you should provide descriptive text for the link. PLEASE DO NOT use only the words “click here” for a link! This provides no useful information to the reader. Rather, try to use words that briefly describe what they’ll find on the other side of the link.

How Is the a Tag Used in HTML 5 Documents?

Here is a very simple example:


Matt at <a href="http://websiteinsites.com">Website Insites</a> offered a lot of very helpful and knowledgeable advice when we were developing our new website for our customers.


Here is a more complex example:


I’ve found that <a href="http://example.com/wonder-goo.htm" rel="external" target="_blank">Example.com’s Wonder Goo</a> was very good at cleaning stubborn tub stains, although it’s not cheap.