What Is the HTML 5 title Tag?

Posted on January 20, 2011 by Matt Gagnon

The HTML 5 title tag defines the page title.

When Do You Use the title Tag in HTML 5?

The title tag must be used once, and only once per HTML page. It is in my opinion the most important HTML tag to learn. The reasons are many.

First, without a page title, you can’t have a subject for your page. Would you write a novel and not title your work? How would people refer to it? How would they know what in the world it was about? When you write a clear, concise title, then you can truly know what topic the page will discuss.

Second, when people use search engines to find information, what usually shows in the search results is the title tags of pages. The titles are usually linked in search results. It gives the searcher a clear, concise way to scan for the most relevant search result. Without this, a searcher skips by your information, or worse, it never shows up in any results because search engines don’t know what to do with it.

Third, it gives you a chance to display your “brand” in front of searchers, so they become familiar with you. The reason is because many people put their site name in the title tags as well — either at the beginning of the tag or at the end. This gives you great exposure to a wide variety of people, even if they never click your search result.

Web browsers like Internet Explorer, Mozilla Firefox, and Google Chrome also display the title tag in the very top section of the currently open page or tab. So now you can see how important this tag is.

Some cautions: title tags should not be very long, because they will get chopped off, or truncated, by search engines in the search results, so make your titles be meaningful phrases or sentences. And while it’s a good idea to put the main ideas and key words in your title, don’t go overboard by stuffing them full and making no sense to the reader. Your readers are smart and so are the search engines — they will quickly pass you by as they realize what you’re trying to do.

In my opinion, your title tag should match your h1 tag on the page. That is, your topic, the h1, should be what you’re displaying in the title tag. If it’s not close, both your readers and search engines will quickly become either confused or feel tricked by what you’ve done.

How Is the title Tag Used in HTML 5 Documents?

Here is an example:


<html>
<head>
<title>What Is the HTML 5 title Tag? — Website Insites</title>
</head>
<body>
<h1>What Is the HTML 5 title Tag?</h1>
<p>The HTML 5 title tag defines the page title.</p>
</body>
</html>

Posted in HTML 5 | Comments Off

What Is the HTML 5 table Tag?

Posted on January 19, 2011 by Matt Gagnon

The HTML 5 table tag defines a table in a page.

When Do You Use the table Tag in HTML 5?

The table tag creates a table with columns and rows of data. Within it, there can be many other tags. The ones most commonly used are the caption tag to define a descriptive caption for the table, the thead tag to define a table header section, and within it the th tags to define column headings. More important tags include the tr tags which define table rows, td tags within the rows to define table data, and tbody tag to enclose the main content of the table. There may also be a tfoot tag to enclose a footer for the table. See the example below.

How Is the table Tag Used in HTML 5 Documents?

Here is an example table with the most important related tags.


<table>
<caption>
Boot Size Chart
</caption>
<thead>
<tr>
<th>Size</th>
<th>Boot Size</th>
</tr>
</thead>
<tfoot>
<tr colspan="2">
<td>All boot sizes are shown in inches</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>SM</td>
<td>8</td>
<td>MD</td>
<td>10</td>
<td>LG</td>
<td>12</td>
</tr>
</tbody>
</table>

Posted in HTML 5 | Comments Off

What Is the HTML 5 span Tag?

Posted on January 18, 2011 by Matt Gagnon

The HTML 5 span tag defines a group of inline items in a page.

When Do You Use the span Tag in HTML 5?

The span tag, used by itself, doesn’t change anything at all. However, it can be useful to change some items (text, images, etc) within a larger group, and then apply CSS to the span. All will be made clear in the example below. You could also use JavaScript to make changes to that span.

How Is the span Tag Used in HTML 5 Documents?

Here is an example that you might use to apply a special “Drop Cap” effect to the beginning of a paragraph using CSS.


<p><span class="dropcap">In the beginning</span> was the Word, and the Word was with God, and the Word was God.</p>
<cite>John 1:1, NKJV</cite>

Posted in HTML 5 | Comments Off

What Is the HTML 5 section Tag?

Posted on January 17, 2011 by Matt Gagnon

The HTML 5 section tag defines sections in an HTML page, oddly enough.

When Do You Use the section Tag in HTML 5?

The section tag is new in HTML 5, and can be used for chapters, footers, headers, sidebars, etc. In fact, where you might normally use a div tag to group blocks of HTML on a page, you could instead use the section tag. You probably should not use it for page layout, though, as that’s not the use for which it’s intended.

If you grab text or images from elsewhere on the internet, please do the right thing and make sure you use the cite attribute to cite the url where you grabbed the content.

How Is the section Tag Used in HTML 5 Documents?

Here is an example:


<section cite="http://www.youversion.com/reading-plans/blended">
<h1>Blended Plan Length: 1 Year</h1>
<p>This plan is designed to add variety to your reading of the Bible.</p>
</section>

Posted in HTML 5 | Comments Off

What Is the HTML 5 p Tag?

Posted on January 16, 2011 by Matt Gagnon

In HTML 5, the p tag defines a paragraph of text.

When Do You Use the p Tag in HTML 5?

In HTML 5, you may use the p tag to set a section of text apart as a paragraph, just as you would in a story, or an essay. Each paragraph should have a separate thought, just like in any other writing.

The paragraph tag is usually set apart with white space before and after it in most browsers. This can be controlled with CSS. Make sure you use this tag for paragraphs of text, and not just to add white space.

How Is the p Tag Used in HTML 5 Documents?

Here is an example:


<p>This a paragraph of text.</p>
<p>This is another paragraph of text.</p>

Posted in HTML 5 | Comments Off

What Is the HTML 5 nav Tag?

Posted on January 15, 2011 by Matt Gagnon

In HTML 5, the nav tag defines a section of a page used for navigation.

When Do You Use the nav Tag in HTML 5?

In HTML 5, the nav tag is new, and the specification is not entirely clear about it, so I take it to mean either that there is some developer flexibility in how to use it, or that the spec is not yet fully developed.

Either way, right now it’s possible to use the nav tag in a grouping of links, an ordered, or an unordered list of links. Anything that can be considered navigation on the page can now be semantically marked up as navigation. See the examples below. Note that I’ve added class attributes to each so I can easily specify how I want to style them.

How Is the nav Tag Used in HTML 5 Documents?

Here are some examples:


<nav class="pages">
<h2>Page Navigation</h2>
<a href="/index">Home</a>
<a href="/about">About Us</a>
<a href="/contact">Contact Us</a>
</nav>
<nav class="categories">
<h2>Category Navigation</h2>
<ul>
<li><a href="/jackets">Jackets</a></li>
<li><a href="/gloves">Gloves</a></li>
<li><a href="/hats">Hats</a></li>
</ul>
</nav>

Posted in HTML 5 | Comments Off

What is the HTML 5 li Tag?

Posted on January 14, 2011 by Matt Gagnon

In HTML 5, the li tag defines an item in a list.

When Do You Use the li Tag in HTML 5?

In HTML 5, you use the li tag with other tags to create either an ordered list ol, an unordered list ul, or a menu list. If the order of the listed items is important, then you would choose an ordered list. If the order of the items is not important, use an unordered list. We’ll talk more about the menu type list in a later post.

How Is the li Tag Used in HTML 5 Documents?

Here is a simple example:


<h2>A list where order is important</h2>
<ol>
<li>Get in the car</li>
<li>Buckle up</li>
<li>Put the key in the ignition</li>
<li>Start the car by turning the key</li>
</ol>
<h2>A list where order is not important</h2>
<ul>
<li>Milk</li>
<li>Orange Juice</li>
<li>Bread</li>
</ul>

Posted in HTML 5 | Comments Off

What Is the HTML 5 img Tag?

Posted on January 13, 2011 by Matt Gagnon

In HTML 5, the img tag defines an image.

When Do You Use the img Tag in HTML 5?

In HTML 5, you may use the img tag to display images in a web page. These images are then called by the browser when the web page is loaded. The image is not “embedded” in the page, but is linked to it. Note that the more images you have on your page, the longer it will take to load the page, as more requests have to be made by the browser.

The following describes the allowable img tag attributes:

alt
This defines a short description of the image – very useful if the image does not display, and useful for screen readers and also search engines
height
This defines how tall the image is. This can either be a number or percent.
ismap
This defines the image as a “server side image map” – many links over certain parts of the image
src
This is the url path to the image
usemap
This defines the image as a client-side image map – use this with map and area tags to define the clickable areas.
width
This defines how wide the image is. This can be either a number or percent.

How Is the img Tag Used in HTML 5 Documents?

Here is a simple example:


<img alt="Clown with a red nose" class="interior" height="150" src="/images/clown.jpg" width="120">

Posted in HTML 5 | Comments Off

What Is the HTML 5 hr Tag?

Posted on January 12, 2011 by Matt Gagnon

In HTML 5, the hr tag displays a horizontal rule, which defines a break in the theme of your content, or to separate two ideas.

When Do You Use the hr Tag in HTML 5?

In HTML 5, you may use the hr tag to create a horizontal rule, which is useful for marking a new section of the page. It may be a change in thought, theme, or maybe just serves as a visual divider to the reader. Most browsers will add space before and after, so it adds visual whitespace also, giving the eye a break as it scans down the page.

Note that it can be difficult to style a hr tag with CSS, since browsers tend to do their own thing with it. Note also that in HTML 5, all the inline ways of styling it are not supported, so you may be left with few options to style this. That’s ok, though, as it’s just a grey horizontal rule.

How Is the hr Tag Used in HTML 5 Documents?

Here is a simple example:


<h2>This title starts one theme in this article</h2>
<p>Here is the content that defines this theme</p>
<hr>
<h2>This title starts another theme in this article</h2>
<p>Here is the content that defines this second theme.</p>

Posted in HTML 5 | 2 Comments

What Is the HTML 5 header Tag?

Posted on January 11, 2011 by Matt Gagnon

In HTML 5, the header tag defines a header section or sections on the page.

When Do You Use the header Tag in HTML 5?

In HTML 5, you may use the header tag to create heading sections on the page, including one for the logo, site title, and other “top of the page” stuff, another header tag for the article title section, and yet another for an aside section (see previous post)

The header tag is new to HTML 5, and can also replace the need for a lot of extraneous div tags, thus making our pages download faster and making them more meaningful to boot.

How Is the header Tag Used in HTML 5 Documents?

Here is a simple example:


<header>
<h1>Here is the name of my website, or the main topic of this page.</h1>
<p>Here is a tagline, or short description, of my site</p>
</header>
<h2>Here is a secondary topic on this page</h2>
<p>Here is some text for the secondary topic.</p>
<aside>
<header>
<h2>Here is the title for the aside.</h2>
</header>
<p>Here is the content of the aside.</p>
</aside>

Posted in HTML 5 | Comments Off