Learn Whole HTML in 5 Minutes

HTML for Beginners - Ultimate Guide

From the small business owner to the student creating a class project, or even casual individuals working on a blog or personal project online, HTML knowledge is incredibly useful. Although the prospect of having to learn a programming language certainly does seem daunting, the good news is that HTML uses common words so that it is fairly simple to pick up.

In this guide we cover the basics in a (hopefully) easy-to-understand manner, perfect for the absolute beginner. However, we don't stop at the basics -- even seasoned webmasters will find useful tips to expand your working knowledge of HTML.

Start reading below, or use the navigation on the right to jump to a specific topic.

1. HTML Basics

This chapter introduces HTML, the language used to author web pages, and provides a little background regarding its history and the reason it is used.

What is HTML?

HTML is Hypertext Markup Language, a format for creating documents and web pages. It was originally invented in the early 1990s by Tim Berners-Lee, and was based on an earlier markup language called SGML (Standard Generalized Markup Language), which was was based on an earlier format simply called GML (Generalized Markup Language) developed at IBM in the 1960s.

HTML consists primarily of matching pairs of angle-bracketed tags surrounding human-meaningful text (<span>like this</span>). The tags provide meaning, context, and display information to the text they surround.

What is a Markup Language?

Imagine any text-based document you have ever read: a website, a book, a PDF, a Word doc, a church bulletin. There is the text, of course — but there’s something else: how the text is displayed. Some of the words are larger or smaller, some are italicized or in bold, some are a different color or a different font.

The file that one of these documents is saved into has to contain both the human-readable text and also the information about the display. A number of different ways to accomplish this have been tried, and the most convenient way to do it is to store the information in line with the text itself.

So, for example, if you want to make some text bold or italic, you might do something like this:

I want to make [start bold]these words bold[end bold] and [start italic]these other words italic[end italic].

Which, in theory, should produce something like:

I want to make these words bold and these other words italic.

These inline matching pairs of style declarations are called tags, and something like this is the basis of almost every markup language. But this format shown above isn’t HTML, its just a little made-up example.

The example above has many problems with it, and the inventors of HTML (and SGML and GML) came up with something similar, but much better:

• Square brackets are often used in text, so reserving them for use in tags could cause problems. Instead HTML uses angle brackets: < and >.
• Writing start and end over and over is very tedious. HTML simplifies this by using the tag name itself as “start” declaration. The tag name with a slash in front of it ( / ) is used as the ending tag.
• Rather than the whole words “bold” and “italic,” HTML uses abbreviations to make it faster to type and less obtrusive to read.

So, taking these things into account, the above example would look like:

I want to make <b>these words bold</b> and <i>these other words italic</i>.

I want to make these words bold and these other words italic.

Recently, there has been a move away from explicitly declaring typographical details (like bold anditalic) and instead using the markup to convey the meaning, not just the look. Therefore, the <b>and <i> tags are no longer recommended for use. Instead, the preferred tags are <strong> and<em> (emphasis). So in contemporary documents the sentence above would be:

I want to make <strong>these words stand out</strong> and to <em>emphasize these words</em>.

I want to make these words stand out and to emphasize these words.

HTML is, at its core, nothing more complicated than a set of defined markup tags.

What is hypertext?

Hypertext is a word that was invented in the 1960s to describe documents that contain links that allow the reader to jump to other places in the document or to another document altogether. These links, which we now take for granted in the modern web, were a big deal when computers were first coming into maturity.

The “hyper” concept of internal and external linking was so revolutionary to the way content is organized on the internet that the word shows up in a number of places:

• HTML is the “HyperText markup language”
• http:// stands for “HyperText Transfer Protocol
• A link from one page to another is called a “hyperlink,” and the data attribute that specifies where a link is pointing to is called a “hyper reference.”

Where and How is HTML used?

HTML is used for almost all web pages. The web page you are reading right now uses HTML. It is the default language of websites.

It can also be used for other types of documents, like ebooks.

HTML documents are rendered by a a web browser (the application you are using to read this page). HTML rendering hides all the tags, and changes the display of the rest of the content based on what those tags say it should look like.

Do I need to learn HTML to run my website?

Unless you plan to become a web developer, and build pages from scratch, you don’t need to know all the intricate details of HTML.

If you are just using a blogging platform, a site builder, or a Content Management System (CMS) set up by someone else, you may be able to get by without knowing any HTML — there are “graphic” editors available that make adding content to a blog similar to writing in Microsoft Word or email.

However, sometimes those graphical editors don’t work exactly the right way, and sometimes you will want to do something and not understand why you can’t. Therefore, it is highly recommended that if you are going to be writing for the web, even just regular blog posts and announcements, that you get a good understanding of basic HTML concepts.

Additionally, there are details of how HTML documents are structured that have an effect on things like SEO and data aggregation. If you are interested in staying informed about how your website appears to non-human visitors, understanding HTML is an important skill.

Similarly, website accessibility — the ability for a website to be navigated successfully by people with visual or other handicaps — is an increasingly important consideration. The blind rely on computerized screen readers to translate web sites into sound, and the quality and structure of the underlying HTML document has a big impact on the ability of the screen reader to work properly.

Mostly, HTML is the common underlying language of the contemporary internet. If you want to understand how the world works, it is a good idea to at least have some familiarity with HTML.

Summary

HTML — Hypertext Markup Language — is the language used for creating web pages and other web-based documents. It consists mainly of matching pairs of angle-bracketed tags, enclosing sections of human-meaningful text. The tags, which are not displayed by web browsers, are used to provide information about how the text and page should be displayed.

2. HTML Elements and Tags

This chapter takes a close look at tags, the fundamental building blocks of HTML. It covers how they work, some exceptions to the normal way they work, and a brief discussion on tag attributes.

Structure of Tags

Generally, matching pairs of tags surround the section of text which they affect. Two matching pairs of tags, along with the content they enclose, are called an “element.”

<strong>This element begins and ends with the "strong" tag.</strong>

The opening tag can contain additional attributes which provide more information about the contents of the tag and how to display them. These attributes are written as name–value pairs, separated by an equals ( = ) sign, with the value placed in quotes.

<a href="http://example.com">This is a link. The tag is an "a" for "anchor," and the href (hyper reference) attribute specifies where the link is pointing.</a>

A few tags do not occur in matching pairs, because they are used to insert something, rather than describe text. These are called “empty” or “void” tags, and the most common one is the one used for inserting an image. The src attribute is used to specify the URL of the image.

<img src="http://media.whoishostingthis.com/2/v60/images/wiht-logo.png" />

Notice there is no closing tag, and therefore no enclosed text. The slash right before the final angle bracket ( /> )is used to “self-close” the tag. This is not absolutely required, but it is a good reminder that whatever follows will not be enclosed.

There are several other empty tags. Two are fairly straight forward and common.

• <br/> inserts a line-break.
• <hr/> inserts a horizontal rule (line) separator.

Others do not insert something visual, but are used to provide information about the page itself.

<link rel="stylesheet" type="text/css" href="theme.css" />

<meta name="description" content="Title of this page." />

Additionally, the <script> tag (which is used to add Javascript to a page) can be empty, but it doesn’t have to be.

(More information on <link>, <meta>, and <script> tags will be provided later in this guide.)

Block-level vs. inline

With the exception of tags that provide information about the document itself, HTML tags fall into two categories, block and inline.

Block elements

Block elements represent rectangular blocks of content. They have an implied line break before and after. Block elements include sectional content like paragraphs ( <p> ), divisions ( <div> ), and headlines ( <h1>, <h2>).

It is standard practice to type most block-level tags on individual lines above and below their content:

<div>

This is a div.
</div>

However, this is not always done, especially with headlines:

<h1>This is the title of a page</h1>

<h2>This is a major section</h2>

<p>
Some content in a paragraph.
</p>

Block-level elements can be nested, but some block-level elements can not contain other block-level elements:

<div>
  <h2> Title of an article</h2>
  <p>
    First paragraph of article.
  </p>
</div>

Paragraphs and headlines cannot contain other block-level elements.

Inline elements

Inline elements are elements used within text. Bold ( <strong> ), italic ( <em> ), and links ( <a> ) are all inline elements.

Inline elements are sometimes called “span-level” elements. There is also a generic span-level elements, simply called a span ( <span> ). This doesn’t do a whole lot by itself, but can be used to create customized types of text-display, through the use of elements.

<span class="special-text">This text is special.</span>

(See the chapter on CSS for information on how to make class="special-text" display in a special format.)

Sometime it doesn’t make sense

Images ( <img> ) feel like block-level elements — they are rectangular, have definite dimensions, and are usually displayed outside of the flow of text.

However they are actually inline elements. The reason for this is mostly a hold-over from a less-sophisticated period of web design, but we’re stuck with it now. The weird implications of this can be avoided easily, but its good to know. (See the chapter on images and also the one on CSS.)

There are other weird issues like this, and they will be covered later in this guide when they come up.

More about attributes

Almost every element tag can include attributes. Many elements have a specific set of attributes they support (like <img> and the src= attribute), but there are several elements which are globally supported by all element types.

Two important attribute types are class and id.

<a href="http://example.com" class="example-link" id="link27">This anchor tag has three attributes.</a>

Class attributes

Class attributes are used to mark one or more elements as belonging to a specific “class” or group — this can be used for displaying them all the same way.

For example, it is common to use an unordered list ( <ul>) as a menu, and to make the list item (<li> ) which points to the current page look different than all the other links in the same list.

<ul class="menu">
 <li class="menu-item">
   <a href="/home">Home</a>
 </li>
 <li class="current-item">
   <a href="/about">About</a>
 </li>
 <li class="menu-item">
   <a href="/contact">Contact</a>
 </li>
</ul>

An element can have more than one class. Multiple classes are separated by spaces inside the class element.

<p class="first drop-cap">
  This is the first paragraph, and it is also part of the drop-cap class.
</p>

Because classes are separated by a space, classes may not include spaces in their names.

In CSS, JavaScript, and other languages, the class of an element is notated with a dot before the name.

/*CSS*/

.first {
    color: green;
}

The above CSS code means that within any element that has a class of first, the text color should display as green.

ID attribute

The ID attribute works similarly to the Class attribute, but is conceptually different. Rather than signifying the element’s membership in a group, it uniquely identifies that element. For this reason, there can be only one element with any specific ID on any given page.

<h1 id="page-title">This is the title of the page</h1>

IDs are less often used for affecting display, and more often used for functional purposes.

IDs can be used for internal linking of a document, such as the Table of Contents on a wikipedia article.

<ol>
 <li>
  <a href="#intro">Intro</a>
 </li>
 <li>
  <a href="#history_of_topic">History of Topic</a>
 </li>
</ol>

<h2 id="intro" class="section-header">Introduction</h2>

<p>
Text of introductory section.
</p>

<h2 id="history_of_topic" class="section-header">

<p>
Some history on this topic.
</p>

Notice that the links to the sections include the name of the tag, prefixed with the hash or pound sign ( # ). This is the standard way to reference the id of an element:

/*CSS*/

#intro {
    font-size: 14px;
}

// Jquery

$("#intro").click(
  // do something when the intro area is clicked
);

Other attributes

Each HTML tag has its own set of available attributes relating to their specific purpose. For example, the <a> tag, which defines a hyperlink, includes the href (hyper-reference) attribute, which specifies a URL being linked to.

These attributes will be covered in more detail as we look at each tag individually in later chapters.

There are also a number of “global” attributes — attributes any element can have. These will also be covered in more detail later on, as their uses become more relevant.

Comment Tags

The last point to cover in basic HTML tags is the comment. Comments begin with an angle bracket, followed by an exclamation point and two dashes. They end with two dashes and a closing angle-bracket.

<!-- This is a comment. -->

Comments may be multi-line.

<!--
This is a comment.
It has two lines.
-->

Comments may not be nested:

<!-- 
If I try to nest a comment inside another comment.
  <!-- Like this -->
Then this the part after the first closing tag will fall outside the comment.
-->

You need to watch our for nesting of comments if you ever try to comment-out a large section of existing HTML — inline comments in the original section will mess up your commenting.

Anything inside the comments will not be displayed to the user inside the browser. However, HTML comments can be viewed by the site visitors if they choose to view the page source. Therefore, do not use comments for anything you wish to hide from the public.

Summary

HTML is essentially text content with tags that are used to specify the meaning of that content within the document and the relationship of each piece of content to the others.

Tags are short snippets of letters inside angle-brackets. They typically consist of a matching pair — an opening and a closing tag. The opening tag is just the tag name, while the closing tag is prefixed with a slash.

Attributes may be added to any element. Attributes are specified inside the opening tag, as name–value pairs joined by an equal sign. The value must be inside single or double quotes (double quptes is standard).

The two most common attributes are the class and id attribute, which are used both for styling and functional purposes.

3. Textual HTML

This chapter covers all the most common elements that are used for typographical styling and semantic meaning within the text of a typical HTML document. Elements covered include headlines, paragraphs, lists, and links — and several others.

Headlines

HTML provides six levels of headline elements, <h1> through <h6>.

<h1>The most important title on a page</h1>

<h2>Title of a major section</h2>

<h3>Sub-section heading.</h3>

<!-- etc. -->

When to use <h1> and <h2>

The <h1> tag is considered by Search Engines to be the most important headline on a page, and look to it for a clue as to what the page is about. It should therefore match the content of the<title> tag inside the <head> if at all possible, and their should be only one <h1> element on any page.

On your home page and blog index page, it is best to put your site title in the <h1> tag, and the titles of articles in a blog index inside <h2> tags.

However, on a single-article page, the title of the post or article itself should be inside the <h1>tag, with the title of the website in an <h2> or even <h3> tag.

Similarly on a category-based or tag-based archive page, it is usually best to put the category or tag name inside an <h1> tag.

Hierarchical organization

It is (mildly) good for SEO, and very good for readers, to break articles into logical sections and use appropriate heading tags within the content of an article. Heading tags should be used in a hierarchical fashion — if an <h4> follows an <h3> tag, it should be the header for a subordinate section.

Subtitles

A title with a subtitle should not used two different header tags:

<!-- Do NOT do this: -->

 <h1>The Main Title of this Article:</h1>
 <h2>The Subtitle of that same article</h2>

<!-- Really. Please don't. -->

Instead, put the entire title and subtitle into a single headline tag and use another tag to define the relationship:

<h1>The Main Title of this Article:<br/>
<small>The Subtitle of that same article</small></h1>

<!-- OR -->

<h1>The Main Title of this Article:
<span class="subtitle">The Subtitle of that same article</span></h1>
<!-- This option requires some additional CSS to display in a sensible manner. -->

Headlines on Widgets

Sidebar sections, or widgets, need titles, but these are not generally relevant from a content (SEO) standpoint. Most well-informed designers use <h4> tags for this purpose, reserving <h1>, <h2>, and <h3> for keyword-relevant content.

<aside> <!-- sidebar -->

 <h4>Recent Posts</h4>
 <ul>
  <li><a href="#">Post title</a></li>
  <li><a href="#">Post title</a></li>
  <li><a href="#">Post title</a></li>
 </ul>

 <h4>Archive</h4>
  <ul>
     <li><a href="#">June 2015</a></li>
     <li><a href="#">May 2015</a></li>
     <li><a href="#">April 2015</a></li>
  </ul>

</aside>

However, if you regularly have so many sub-sections in your page content that you need to use<h4> headlines in your main text, there’s nothing really bad about using <h5> or even <h6> in your sidebar titles.

Headlines as link targets

In a particularly long document, it might be a good idea to make it possible to link not just to the page as a whole, but to a specific section.

In the past, only anchor tags ( <a> ) could be used as the target of a link, but that is no longer the case — any element can become the target of a page-location specific link.

The natural candidate for such links are headline tags, because they are used to identify the beginning of sections.

All that is needed to make this work is to add a unique id attribute to the header element. Links to that section are simply the page URL, appended with the hash sign ( # ) and the ID.

<!-- 
Imagine the following is a headline on the page
http://example.com/page
-->

<h3 id="some-headline">Some headline halfway through the page</h3>

<!--
Then a link to that section of the page would look like:
-->

<a href="http://example.com/page#some-headline">Click here to go there.</a>
<!--
If this doesn't make sense, read the section below about hyperlinks.
-->


<!--
Links on the page itself, such as for a table of contents, do not need the full URL, and can simply begin with the # sign.
-->

<a href="#some-headline">Click here to scroll there.</a>

<!--
A great example of this usage in an on-page table of contents is Wikipedia. Every article uses this type of in-document linking.
-->

Paragraphs

The paragraph tag — <p> — should surround every paragraph of text in your main content.

Multiple line breaks in your source code (without the <br> line-break tag) will not display as line breaks on-page. In order to get proper display spacing between paragraphs of text, you should use the <p> tag.

<article>
 <h2>The importance of paragraph tags</h2>
 <p>Every paragraph of your content should be within an paragraph element. The paragraph element is defined by the p-tag</p>
 <p>Using the paragraph tag properly ensures that your line spacing between paragraphs will display properly. It also helps with assistive technologies like text-to-voice readers (it helps with proper pausing).</p>
</article>

Some people prefer to put the opening and closing tags on individual lines. This may help with reading source code, but it makes no difference to how a page ultimately looks to a user.

<article>
 <h2>Putting p-tags on individual lines</h2>
 <p>
  Some people like to put the opening and closing paragraph tags on individual lines.
 </p>
 <p>
  There is no real benefit or drawback to doing it this way.
 </p>
</article>

Many CMSes, like WordPress, insert <p> tags into your post content automatically, so you don’t have to worry about it if you are using one of these systems.

Lists

There are three types of lists available in HTML:

• <ul> — Unordered list. — Bulleted lists (like this one), called “unordered” because they are not numbered.
• <ol> — Ordered list. — Numbered lists, which can use regular numerals (1, 2, 3), roman numerals (I, II, II or i, ii, iii), or letters (A, B, C or a, b, c).
• <dl> — Definition list. — A list with individual terms and then descriptions for each term. (This list could have been a definition list, but it isn’t.)

Unordered List — <ul>

The unordered list is a way to present a list of bullet-pointed items. The list itself is wrapped in the<ul> tag, and each item in the list is wrapped in the <li> (list item) tag.

<ul>
 <li>Apples.</li>
 <li>Oranges.</li>
 <li>Typewriters.</li>
</ul>

• Apples.
• Oranges.
• Typewriters.

In the past, you could specify what kind of bullet you wanted (disc, square, circle) in the typeattribute. But as of HTML5, this is not supported. If you want to change the bullets, you’ll have to use CSS.

<ul type="square"> <!-- DON'T DO THIS -->
 <li>It's bad.</li>
 <li>It's wrong.</li>
 <li>It's unsupported.</li>
</ul>

Ordered List

Ordered lists are lists which are numbered or lettered. The outside element is <ol>, and the <li>tag is used again for each item.

<ol>
 <li>Collect underpants.</li>
 <li>???</li>
 <li>Profit.</li>
</ol>

1. Collect underpants.
2. ???
3. Profit.

The <ol> element supports several attributes which change how the the list is numbered.

The type attribute can be used to change the default Arabic numerals (1, 2, 3) to letters or Roman numerals (capitals or lower-case).

<ol type="i">
 <li>Lowercase Roman numeral 1.</li>
 <li>Lowercase Roman numeral 2.</li>
 <li>Lowercase Roman numeral 3.</li>
</ol>

1. Lowercase Roman numeral 1.
2. Lowercase Roman numeral 2.
3. Lowercase Roman numeral 3.

Options for type are:

• 1 — Arabic numerals (1, 2, 3) — This is the default.
• A — Capital letters (A, B, C)
• a — Lower-case letters (a, b, c)
• I — Capital Roman numerals (I, II, III)
• i — Lower-case Roman numerals (i, ii, iii)

The start attribute can be used to begin the list numbering on a number other than 1. This can be used for numbers or for other types.

<ol start="10">
 <li>Chocolate</li>
 <li>Vanilla</li>
 <li>Motor Oil</li>
</ol>

<ol type="I" start="8">
 <li>Telesphorus</li>
 <li>Hyginus</li>
 <li>Pius</li>
 <li>Anicetus</li>
</ol>

10. Chocolate
11. Vanilla
12. Motor Oil

8. Telesphorus
9. Hyginus
10. Pius
11. Anicetus

Finally the reversed attribute can be used to number the list items in reverse order. This can be combined with either of the other attributes (or both).

<h3> Out of the starting gate!</h3>
<ol start="-3">
 <li>Wait for it.</li>
 <li>Wait for it.</li>
 <li>Wait for it.</li>
 <li>GO!</li>
</ol>

<h3>Top Ten Reasons</h3>
<ol start="10" reversed>
 <li>Because.</li>
 <li>And so therefore.</li>
 <li>QED</li>
 <li>etc.</li>
</ol>

Out of the starting gate!

-3. Wait for it.
-2. Wait for it.
-1. Wait for it.
0. GO!

Top Ten Reasons

10. Because.
11. And so therefore.
12. QED
13. etc.

Things to notice about these two examples:

1. The start attribute can be negative.
2. Even if the list is reversed, the start value is the first number for the list.
3. The reversed attribute doesn’t need to specify a value. This is because it has only two possible values: true (present) or false (absent).
4. A top-ten (or similar countdown) list doesn’t need to specify a start attribute if it ends with 1, which will always be the last number in a reversed list unless otherwise specified. The example above didn’t actually contain ten items, so it was necessary to specify.
5. The default behavior is to increase the number for each succeeding list item. Therefore, if you want to “countdown” from a negative number, you should not include the reverse attribute.

Description / Definition Lists

Description lists (or “Definition” lists, as they are more comonly called) are a bit different than ordered and unordered lists. They are used to provide a list of terms with descriptions, such as in a glossary.

The whole list is wrapped in the <dl> tag. Each term in the list is marked with a <dt> tag (“definition term”), and each term is followed by one or more <dd> elements (“definition description”).

<h3>Types of Lists</h3>
<dl>
 <dt>Ordered List</dt>
 <dd>A numbered list of items.</dd>
 <dt>Unordered List</dt>
 <dd>A list of bulleted items.</dd>
 <dt>Definition List</dt>
 <dd>A list of terms with associated definitions.</dd>
 <dd>Each term can have one or more definition descriptions.</dd>
</dl>

Types of Lists

Ordered List

A numbered list of items.

Unordered List

A list of bulleted items.

Definition List

A list of terms with associated definitions.

Each term can have one or more definition descriptions.

The obvious use for a description list is a glossary or dictionary, but that isn’t the only standard use.

List of names : with contact information in the description. List of audio track titles : with detailed track information in the description. List of product offerings : with information about the products in the description. List of stats : with the stat name as the term and the stat value in the description

Anytime you have a list of items which each require more detail, the description list is a good idea.

Definition lists are even more powerful than you might already realize because the <dd> tag — the description — can hold any other elements: paragraphs, images, other lists. This means that a description list can be a very content-rich markup scheme whenever you have individual items which each need additional details of any kind.

There is also one off-the-wall use for description lists, which is somewhat controversial. It was included as an example in the HTML4 specification, but removed for HTML5: script-like dialogue.

<dl>
 <dt>Reader</dt>
 <dd>What is your favorite HTML entity?</dd>
 <dt>Author</dt>
 <dd>Funny you should ask! It's the description list.</dd>
 <dt>Reader</dt>
 <dd>Really? What's so great about it?</dd>
 <dt>Author</dt>
 <dd>It's so oddly flexible.</dd>
</dl>

<!-- 
The HTML5 specification removed this type of usage as an example, and provides a different suggestion for how to mark up dialogue. 

However, some people (including this author) still think it is the best solution for this type of thing. 

Since the spec's suggestion for dialogue
 1. Is just a suggestion, and
 2. Contains no meaningful semantic information,
it really makes no difference which style you follow.
-->

<a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#conversations">The official specification's suggestion for marking up dialogue can be found <strong>here</strong>.</a>

Reader

What is your favorite HTML entity?

Author

Funny you should ask! It’s the description list.

Reader

Really? What’s so great about it?

Author

It’s so oddly flexible.

The official specification’s suggestion for marking up dialogue can be found here.

Definition lists are underused, but they are actually a really great way to present all sorts of content.

Nesting lists

All three styles of list can be nested to form an outline-style hierarchical list.

<ul>
 <li>Item One</li>
 <li>Item Two
  <ul>
   <li>Sub-item A.</li>
   <li>Sub-item B.
    <ul>
     <li>Sub-sub-item i.</li>
     <li>Sub-sub-item ij.</li>
     <li>Sub-sub-item iij.</li>
    </ul>
   </li>
   <li>Sub-item C.</li>
  </ul>
 </li>
 <li>Item Three</li>
</ul>

• Item One
• Item Two
  • Sub-item A
  • Sub-item B
    • Sub-sub-item i
    • Sub-sub-item ij
    • Sub-sub-item iij
  • Sub-item C
• Item Three

Notice that the bullets automatically change with each nesting. This is the default rendering style for most browsers.

Unfortunately the same thing does not happen with ordered lists. If you want the school-notes outline style with different types of numbering at each level, you have to do it yourself.

<h3>This is going to look bad</h3>
<ol>
 <li>Item One</li>
 <li>Item Two
  <ol>
   <li>Sub-item A.</li>
   <li>Sub-item B.
    <ol>
     <li>Sub-sub-item i.</li>
     <li>Sub-sub-item ij.</li>
     <li>Sub-sub-item iij.</li>
    </ol>
   </li>
   <li>Sub-item C.</li>
  </ol>
 </li>
 <li>Item Three</li>
</ol>

<h3>Here's how you have to do it</h3>

<ol type="I">
 <li>Item One</li>
 <li>Item Two
  <ol type="A">
   <li>Sub-item A.</li>
   <li>Sub-item B.
    <ol type="1">
     <li>Sub-sub-item i.</li>
     <li>Sub-sub-item ij.
      <ol type="a">
       <li>Way down in the hierarchy.</li>
       <li>Does anyone need this many list levels?
        <ol type="i">
         <li>This is getting ridiculous.</li>
        </ol>
       </li>
      </ol>
     </li>
     <li>Sub-sub-item iij.</li>
    </ol>
   </li>
   <li>Sub-item C.</li>
  </ol>
 </li>
 <li>Item Three</li>
</ol>


<!-- If this is the sort of thing you need to do a lot, it would be better to specify numbering type in the CSS. This is covered in the CSS chapter. -->

This is going to look bad

1. Item One
2. Item Two
   1. Sub-item A.
   2. Sub-item B.
      1. Sub-sub-item i.
      2. Sub-sub-item ij.
      3. Sub-sub-item iij.
   3. Sub-item C.
3. Item Three

Here’s how you have to do it

1. Item One
2. Item Two
   1. Sub-item A.
   2. Sub-item B.
      1. Sub-sub-item i.
      2. Sub-sub-item ij.
         1. Way down in the hierarchy.
         2. Does anyone need this many list levels?
            1. This is getting ridiculous.
      3. Sub-sub-item iij.
   3. Sub-item C.
3. Item Three

Nested lists can mix list types.

<dl>
 <dt>This is an ordered list:</dt>
 <dd>
  <ol>
   <li>Cakes.</li>
   <li>Pies.</li>
   <li>The cake is a lie.</li>
  </ol>
 </dd>
 <dt>This is an unordered list, listing types of lists:</dt>
 <dd>
  <ul>
   <li>Ordered lists</li>
   <li>Unordered lists</li>
   <li>Description lists</li>
  </ul>
 </dd>
 <dt>This is an unordered list nested inside of an ordered list, which is inside of this description list:</dt>
 <dd>
  <ol>
   <li>The first item.</li>
   <li>The second item.</li>
   <li>The third item, which is has the nested list.
    <ul>
     <li>Knife</li>
     <li>Fork</li>
     <li>Spoon</li>
     <li>Spork</li>
     <li>Chopsticks</li>
    </ul>
   </li>
   <li>gt;This fourth item is here just to frame the nested list better.</li>
  </ol>
 </dd>
</dl>

This is an ordered list:

1. Cakes.
2. Pies.
3. The cake is a lie.

This is an unordered list, listing types of lists:

• Ordered lists
• Unordered lists
• Description lists

This is an unordered list nested inside of an ordered list, which is inside of this description list:

1. The first item.
2. The second item.
3. The third item, which is has the nested list.
   • Knife
   • Fork
   • Spoon
   • Spork
   • Chopsticks
4. This fourth item is here just to frame the nested list better.

It should be noted that lists can not be nested inside of paragraph elements ( <p> ). This is because all lists are block-level elements, and paragraphs (which are blocks also) can only contain span-level elements.

This can occasionally be annoying because in normal written text there are sometimes perfectly good reasons for wanting to include a list inside of a paragraph. However it simply does not work.

Block quotes and inline quotes

If you are quoting someone or something, use one of the two HTML quote elements.

Blockquotes

The blockquote is much more common. This is because of normal typographical convention:

• blockquotes (multi-line quotes or excerpts) are displayed a special way (usually indented and sometimes italicized),
• whereas inline quotes are simple marked with puncutation.

<blockquote>
To be or not to be, that is the question.
</blockquote>

To be or not to be, that is the question.

Blockquotes can be used for large blocks of quoted material, whether that material is an excerpt from a literary work, song, another blog post, or an email that you are responding to.

If you want to cite the source of the quote, there are two ways to do that. The <blockquote>element can be given a cite attribute, or a byline can be added with a <cite> tag surrounding the source title. You can also do both.

<blockquote cite="http://www.gutenberg.org/ebooks/2265">
To be or not to be, that is the question.<br>
&mdash; <cite>Hamlet</cite>, William Shakespeare
</blockquote>

<!-- Either use of "cite" is fine by itself. -->

To be or not to be, that is the question.
— Hamlet, William Shakespeare

It should be noted that that the <cite> tag should include the title of the original work being quoted, and may optionally include the name of the author and other information (such as page number or act and scene number).

The citation at the end of the quote could be better identified if it was placed inside of a <footer>element, and if the citation itself linked to the source material. Doing this would make the citeattribute within the <blockquote> tag redundant, so we’ll remove it. Finally, we’ll add a paragraph tag and remove the em-dash (—), so that only the information — and not display details — are included.

<blockquote cite="http://www.gutenberg.org/ebooks/2265">
<p>To be or not to be, that is the question.</p>
<footer>
 <cite><a href="http://www.gutenberg.org/ebooks/2265">Hamlet</a>, William Shakespeare</cite>
</footer>
</blockquote>

A blockquote could include a <header> as well, which might be used to introduce the quote itself, or to quote original header information.

Inline Quote

The less-commonly used quoting element is the inline quote, <q>.

<p>
My favorite line in <cite>Hamlet</cite> is when he says, <q cite="http://www.gutenberg.org/ebooks/2265"> To be or not to be, that is the question</q>.
</p>

My favorite line in Hamlet is when he says, To be or not to be, that is the question.

This is not often used because there is already a perfectly good way to show that you quoted something — by using quotation marks.

However, using the <q> tag instead of simple quotation marks has a few advantages.

• The display of the quotation marks can be changed via CSS, which is helpful for internationalization, since not all countries use the same symbols for quotation marks.
• The fact that the text is a quotation from another source is semantically clear, whereas quotation marks could be used for other reasons:
  • rhetorical “scare quotes”
  • mentioning a word or phrasing
  • reporting a real conversation that has no source text
• The opportunity to include a cite attribution linking to the original source of the quote.

Hyperlinks

One of the most important tags in HTML is the anchor tag ( <a> ), which defines a hyperlink. The ability to link documents into a network of connections is the essence of the web, and the definition of “hypertext.”

The element is called an “anchor” because it is used to anchor a linked URL to some specific text on a page. (This is in contrast to the <link> tag, which connects the entire document, not a specific section of text.)

The text inside the element is called the “anchor text,” and the linked URL is specified in the hrefattribute.

<a href="http://example.com">This is a link to example.com</a>

This is a link to example.com

Along with the href, the <a> tag has several important attributes.

• target specifies what window (or browser tab) to open the link in. The default is the same window. If you want to open a new tab set target="_blank".
• title sets the tooltip or hover-text of a link. This displays in a small popup when the user mouses over the anchor text. It is useful for providing some additional information about what the user is about to click on.
• rel reports on a relationship between the linked document and the current document. It has several possible values:
  • alternate — The linked document has the same content as the current document, but in an alternate format. Used most often to link to RSS feeds.
  • author — The linked document is the homepage of profile of the author of the current document or article.
  • bookmark — A link to a specific point in the document (such as when creating an on-page table of contents).
  • help — The linked document provides help documentation to the current document.
  • license — The linked document is the license text for the current document.
  • next — The linked document is the next part in a paginated series. Some browsers will pre-fetch the contents of the linked document in order to speed up rendering when the user finally clicks on it.
  • nofollow — The linked document is not endorsed by the author of the current document. Used to prevent giving SEO benefit to the linked page. Comment systems often add this to user-entered links by default.
  • noreferrer — Used to prevent sending referer information in the HTTP request header when the user clicks on the link. Typically, the HTTP request will specify where the user is coming from (the current page). This requests that the browser client omit that information.
  • prefetch — Similar to next, but without implying an actual sequential relationship. This requests that the browser fetch the contents of the linked page before the user clicks on it, so that navigation to the next page seems instantaneous.
  • prev — The inverse of next, this value specifies that the linked document is the previous page in a paginated series. Some browsers may prefetch the contents.
  • search — The linked page provides an interface specifically for searching the current document and related documents.
  • tag — The linked document provides context as to the topic of the current page.

The rel attribute is underused by non-technical website creators, and it is a great way to bring rich, semantic information into the markup in a way that search engines, aggregators, and screen readers can understand.

For example: - Google uses the rel="author" link (if linked to a Google+ profile) to display links to other content by the same author in search results. - Google image search includes the ability to search by license, to find Creative Commons licensed content for re-use. That feature depends, in part, on the rel="license" attribute being used in links to Creative Commons and other open licenses. - Several search engines and news aggregation sites use the anchor text and referenced page of a rel="tag" link to determine the topic of a given page.

The rel tag can also be used in Microformats, which are simple ways of including additional semantic information within existing HTML attributes (usually rel and class).

For example, the XFN Microformat suggests using the rel attribute when linking to the home or profile pages of people with whom you have a relationship.

<p>Next month I'll be spending a whole weekend at a conference with <a href="http://example.com/kami-profile" rel="co-worker">Kami</a>. The conference is near my home town, so I'm hoping to be able to have lunch with <a href="http://example.com/dave-profile" rel="parent">my dad.</a></p>

There are several additional Microformats that use the rel tag, as well as other ways to include this kind of semantic information in the markup of your website. These will be covered in the chapter on Semantic HTML.

Text decoration

There are a number of simple tags which are used for basic text markup within a paragraph or other element.

Bold

There are two tags that can be used for making text bold.

• <strong> is recommended for use to mark “important” text. It causes the wrapped text to display as bold but also carries semantic meaning (that the text itself is somehow important).
• <b> simply bolds the text without suggesting any particular semantic meaning.

Italic

Like bold, there are two ways to make text display in italics.

• <em> suggests that the wrapped text is “emphasized” somehow.
• <i> is simply italicized, with no specific semantic meaning attached.

Underline

Although it has become less popular recently, the standard text display for hyperlinks ( <a>) is to underline them. Therefore, non-link underlining does not get used very often. There are, though, markup tags for it.

• <u> is the generic tag for underlining text. The use-case presented by the specifications is underlining misspelled words. The HTML5 spec also wants you to know that other elements are usually more appropriate, and don’t use this if it could be mistaken for a link.
• <ins> means text that has been inserted, and is usually used in conjuction with the <del>tag, to show the changes made to a text.

<p>The show will begin at <del>7:00pm</del> <ins>8:00pm</ins>.</p>

The show will begin at
7:00pm
8:00pm

Line-through

There are two elements which mark text to be lined through. Each has a slightly different meaning.

• <del> is for text which is to be understood as deleted or changed, and it used with the <ins>tag as noted above.
• <s> is used for text which is no longer correct or no longer relevant.

There is also a <strike> tag which was available in HTML4. It is no longer a part of the HTML specification.

While the specification’s description of <del> and <s> are slightly different in theory, experts have not come to any agreement on the practical details of the difference, or what situations would specifically call for one rather than the other.

Source code and unprocessed text

There are two elements used for displaying text or code which you do not want to be rendered by the browser, but simply displayed “raw” to the used.

• <pre> — Is used for blocks of code or unprocessed text.
• <code> — Is used when you need to include a short word or phrase of code inline with your text.

They both display in a monospace font (usually Courier) by default, preserve whitespace, and do not render any tags.

This guide makes heavy use of both the <code> and the <pre> elements for displaying source code examples and discussing elements tag names.

Text sizing

You can make text arbitrarily larger or smaller with two elements that otherwise have no specific meaning:

• <big>
• <small>

The most common use of sizing elements is placing the subtitle of a page or article into a <small>element nested inside the <h*> headline tag.

The generic <span> element

If you need to markup specific length of text for semantic or styling purposes, but none of the existing tags makes sense, you can use the generic <span> element, along with a class attribute (and some CSS) to create the desired effect.

<p>I'm not sure why there isn't a sarcasm tag. Maybe it just isn't needed because <span class="sarcasm">tone is so easy to read on the internet.</span></p>

/* CSS */

.sarcasm {
    color: purple;
    font-style: italic;
}

I’m not sure why there isn’t a sarcasm tag. Maybe it just isn’t needed because tone is so easy to read on the internet.

Separators

HTML provides two tags for adding in separation within text.

• <br> inserts a line break
• <hr> inserts a horizontal line

Neither of these elements requires a closing tag, because they do not enclose any text. If it helps you read your source code better, you may include the se;f-closing end slash: <br/> and <hr/>.

Line breaks are especially useful when you need to have hard linebreaks but other solutions — like multiple <p> tags don’t make sense. Two good examples are poetry or song lyrics and addresses.

<p>
Roses are red<br>
Violets are blue<br>
Rhyming is hard<br>
HTML5 is awesome.
</p>

<hr> 

<p>
123 Main St.<br>
Fort Worth, TX 76148
</p>

Roses are red
Violets are blue
Rhyming is hard
HTML5 is awesome.

---

123 Main St.
Fort Worth, TX 76148

Summary

All this may seem complicated, but it really isn’t. Most of the tags you need on a regular basis are easy to remember: headlines, paragraphs, unordered list. You don’t need to memorize all the different options or meanings behind each one. Just try to keep in mind that any normal typographical item (like a headline, a list, a paragraph, or a link) probably has an existing HTML tag to accomplish it. If you keep that in mind, you can just write without focusing on these things and then look up the specific items you can’t remember.

Try not to get bogged down with options, either. The important thing is that your markup is as meaningful as possible, without being overly complicated. If you can’t decide which of two or more options is the best, ask which one is more meaningful. If you can’t figure that out, ask which one is simpler. If you still can’t decide, just pick one — if they seem that similar, then there probably isn’t going to be a huge difference in how it works out.

4. Structural HTML

This chapter explains the overall structure of an HTML document, including what types of informaiton are contained in the <head> and <body>. It also explains how to organize the various sections of a typical web page.

Basic HTML Document Structure

HTML documents (web pages) need to follow a few basic structural rules in order to work properly and be read accurately by web browsers.

The document must begin by declaring a DOCTYPE. There are several different HTML (and related) standards that have been in use over the years, and so therefore it is important to specify which type of document (which HTML standard) your document is using.

Mostly, today, the correct DOCTYPE is simply html. So an HTML document should begin with:

<!DOCTYPE html>

This isn’t exactly an HTML tag in the proper sense, but rather it tells the browser how to interpret all the other tags that follow.

After the DOCTYPE declaration, the opening tag is the <html> tag. The closing of the <html> tag will be the last line of the document.

Inside the HTML tag, you can specify the language of the document (in this case, English).

<!DOCTYPE html>
<html lang="en">
.
.
.
<!-- entire contents of page -->
.
.
</html>

Nested inside the <html> tag are two sections, the <head> and the <body>. The body contains all the visible content, while the head contains information about the document itself. Nothing is outside of these two sections.

<!DOCTYPE html>
<html lang="en">
 <head>
  .
  <!-- Info about document here. -->
  .
 </head>
 <body>
  .
  .
  <!-- Contents of document here. -->
  .
  .
 </body>
</html>

This is the basic structure of every HTML document. Everything is basically extra.

Contents of <head>

The <head> element of an html document usually contains all the information needed by a browser to properly render the document, plus additional information describing the contents (for the benefit of aggregators and bots).

Metadata

The <meta> tag is used several times in the <head> to specify various metadata (data about the document).

Metatags are empty tags, requiring no closing tag. You may end them with the self-closing slash (/>), but this is not required (and some people even specifically discourage it).

Character Encoding

There are several different common ways to encode characters (letters, numbers, and punctuation) in computer memory. If you don’t specify which one you are using, the web browser may mess up and display some of the wrong characters.

Most of the the time, these days, you want to specify the UTF-8 character set.

(The other common encoding — ASCII — doesn’t have all the extended characters like em-dashes and curly-quotes. If you’ve ever seen weird type glitches where quotation marks or apostrophes have been replaced with seemingly random characters, it’s because the document was written in UTF-8 but displayed using ASCII — which means someone didn’t specify the correct character set in the document.)

<meta charset="utf-8">

Description, Author, and Keywords

Basic information about the document — who wrote it and what it is about — are also conveyed through <meta> tags. These each have two attributes: the name of the tag, and the content of the tag.

<meta name="description" content="A page about HTML.">
<meta name="keywords" content="HTML, tags, metadata">
<meta name="author" content="Adam Michael Wood">

This kind of information used to be especially important for SEO purposes. It is no longer the case that this plays a huge role in SEO, however it does affect it. More importantly, having correct and detailed information in these elements contributes to a semantic web, where content all is easily findable and parsable by machines.

(If you use a Content Management System, the tags and post descriptions you write in the editor screen will usually be displayed in these meta tags.)

Title

The <title> tag appears in the head, and usually does not have any attributes. It encloses the title.

<title>
 This is the title of the page.
</title>

The title should be accurate and, if possible, match the on-page visible title (usually in an <h1> or<h2> headline tag) in the body. The contents of the title are typically displayed in the tab at the top of the browser window.

It is not a good idea to nest any other tags in the title (like <b> or <i>) because they will usually not display properly.

An HTML document can only specify one title.

CSS Links

Style Sheets, written in the CSS (Cascading Style Sheet) language, are separate documents which provide information about how to display a page in a browser. Information about sizes, colors, placement, and fonts are all contained in the style sheet. Keeping these details separate from the main HTML document makes it easier to change them without affecting the content of the document itself.

CSS style sheets are linked to within the <head> of the HTML document, using the <link> tag. Thehref attribute specifies the URL of the style sheet file, and the rel attribute specifies that the link is a stylesheet link (there are other types of links).

<link href="/css/style.css" rel="stylesheet">

RSS Information

RSS — Rich Site Summary, or Really Simple Syndication — is a way of providing a feed of site updates (like new blog posts) to subscribers, so that they are informed of new content as it is posted and can read that content from an RSS reader without having to visit your site.

If you are using a Content Management System, it will generally create an RSS feed for you, which is an XML document available at its own URL. That URL should be linked to from the <head> of your blog’s main index page, so that RSS readers and web browsers can find it easily.

<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />

The rel="alternate" attribute means that the linked URL contains the same content (a list of blog posts), but in an alternative format. The type attribute specifies the type of format (RSS).

Other info

A lot of additional details about a document frequently appear in the <head>. These will be covered in more detail later, in the relevant chapters.

Javascript Links

It is possible to link to JS files from within the head, and this is a common practice. However, it is generally better to place these at the end of the document if possible.

---

Example of HTML document with <head> element completed

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="description" content="A page about HTML.">
  <meta name="keywords" content="HTML, tags, metadata">
  <meta name="author" content="Adam Michael Wood">
  <link href="/css/style.css" rel="stylesheet">

  <title>Guide to HTML</title>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />

  
 </head>
 <body>
  .
  .
  <!-- Contents of document here. -->
  .
  .
 </body>
</html>

Contents of <body>

The <body> tag is the main portion of the HML document, and may contain all sorts of things.

Typically, the structure of an HTML body can be divided into several sections, each possibly having one or more subsections:

• header
  • logo / branding / site title
  • main navigation
  • search bar
• main content
  • one or more articles
  • article title
  • article content
  • article metadata (author, tags, date posted)
• sidebar(s)
  • widgets
  • secondary navigation (archives by date, category, or tag)
• footer
  • copyright / license info
  • tertiary navigation
  • contact info
  • address / phone
  • social links

Not all of these sections will be included in every page, or appear the same way. However this provides a good starting point for an example of how these different pieces would be put together into the <body> of a document.

The <div> element

The most generic block-level element for structuring a webpage is the <div> element. This was once used for every section and subsection of the page contents.

This resulted in a lot of nested <div> tags.

<body>
 <div class="header">
  <div class="logo">
    <!-- logo here -->
  </div>
  <div class="main-nav">
    <!-- main navigation menu here -->
  </div>
  <div class="search-bar">
    <!-- Search bar form here -->
  </div>
 </div>
 <div class="page-content">
  <div class="main">
   <div class="article">
    <div class="article-header">
     <h1>Title of Article</h1>
     <div class="article-meta">
      <!-- Date, Author -->
     </div>
    </div>
    <div class="article-content">
     <p>Article.</p>
     <p>Content.</p>
    </div>
    <div class="article-footer">
     <!-- Tags, Categories, etc. -->
    </div>
    <div class="comments">
     <!-- Article comments and commenting form. -->
    </div>
   </div>
  </div>
  <div class="sidebar">
   <!-- Sidebar content, widgets, etc. -->
  </div>
 </div>
 <div class="footer">
  <div class="license">
   <!-- Copyright info -->
  </div>
  <div class="contact-info">
   <!-- Contact information -->
  </div>
 </div>
</body>

Thanks to an extended set of structural tags in the latest HTML standard (HTML5), this can be made easier to read more meaningful to search engines and other systems that extract information from your page (like screen readers for the blind).

Semantic structural tags

Many (but not all) of the <div> elements above can be replaced by newer semantic elements introduced in HTML5.

“Semantic” means, basically, “linguistically meaningful.” Rather than just a generic <div>, semantic tags have specific meanings related to how they are used on the page.

The most important semantic tags for page structure are:

• <header> — Used for both document header information (page title, logo, navigation) and also article header (post title, meta data). — Don’t confuse with <head>, which contains metadata for the entire document.
• <nav> — A container for navigation menus.
• <main> — The primary, unique content of a page. — There can only be one <main> element in a document.
• <article> — A single piece of content. A blog index page might have several <article>elements, but the permanent page of a post would have just the one.
• <section> — A section of a document.
• <aside> — Can be used for secondary content, like a sidebar. Can also be used within an<article>, for example to display pull-quotes or for comments (which are, by nature, tangential to the article).
• <footer> — The footer for an entire document or a section of a document (like an<article>).
• <address> — Used to contain the primary contact information related to the author or publisher of a page. Should not be used for arbitrary postal addresses contained in page content, but only for the contact information (including postal address, if relevant) of the author or publisher of a page or article.

Using these tags, lets recreate the example document above with elements that actually specify their semantic meaning.

<body>
 <header>
  <div class="logo">
    <!-- logo here -->
  </div>
  <nav>
    <!-- main navigation menu here -->
  </nav>
  <div class="search-bar">
    <!-- Search bar form here -->
  </div>
 </header>
 <div class="page-content">
  <main>
   <article>
    <header>
     <h1>Title of Article</h1>
     <div class="article-meta">
      <!-- Date, Author -->
     </div>
    </header>
    <section class="article-content">
     <p>Article.</p>
     <p>Content.</p>
    </section>
    <footer>
     <!-- Tags, Categories, etc. -->
    </footer>
    <aside class="comments">
     <!-- Article comments and commenting form. -->
    </aside>
   </article>
  </main>
  <aside>
   <!-- Sidebar content, widgets, etc. -->
  </aside>
 </div>
 <footer>
  <div class="copyright">
   <!-- Copyright info -->
  </div>
  <address>
   <!-- Contact information -->
  </address>
 </footer>
</body>

Using semantic tags — tags that actually mean something specific — makes the markup easier to read, because there are fewer repeated <div> tags. There’s also less need to make sure everything has a meaningful class attribute related to its use in the document.

Of course, some <div> tags are still needed, but far fewer.

But making markup easier to read only provides a benefit when developing or working with the code (debugging, updating your template). The bigger benefit to semantic markup is that it provides more detailed information to screen readers and bots about how your page is structured. This makes it more accessible to the blind, which is important. It also provides SEO benefit.

(More information about semantic markup, and related benefits, is covered in another chapter.)

A note about <main>

As of this writing, Internet Explorer does not support the <main> tag — it simply doesn’t understand what it means.

You can correct this by telling IE what the element is being used for with the role attribute.

<main role="main">
 <!-- main content here -->
</main>

A note about <article>

The <article> element is intended to be used for a piece of “stand-alone” content, with the most obvious example being a blog post. However, it does not need to be thought of in the “newspaper article” sense of the word “article.”

Each comment on a post can be an <article>, nested inside the larger <article>. Also, each widget in a sidebar could be considered an individual <article>.

It seems likely, however, that having a multitude of <article> elements on each page of a site could tend toward confusion about what content is actually central, and which content is not.

There is no definitive answer about whether this may be the case, but there also seems no real benefit to an abundant use of the <article> tag. For this reason, the most sensible option is likely to restrict its use to the “primary” content of a page. Comments can then be included as an aside to the article text, or (if you prefer) outside the <article> element, in a separate<section> within <main>.

Make <div> tags easier to read

If you still find it difficult to keep track of which closing </div> tags relate to which <div>elements, you can use comments as a helpful reminder. This strategy is used by many Content Management Systems and theme developers, especially when pieces of their HTML document are actually broken up across several different PHP template files.

The easiest way to do this is to put the class (or ID) name into a comment on the same line as the closing </div> tag. Following CSS and JQuery convention, class names are prefixed with a period ( . ) and ids with a hash sign ( # ).

<div class="wrapper">
 <div class="container">
  <div id="center-div">
  </div> <!-- / #center-div -->
 </div> <!-- / .container -->
</div> <!-- / .wrapper -->

This has no actual impact on anything, but can make future debugging and ongoing development easier, especially in a particularly complicated or long HTML document.

5. HTML Tables

This chapter covers HTML tables, including everything you need to know about how to markup various use cases. All the major table elements and attributes are covered, including table headers, footer, body, and columns. This chapter provides concrete suggestions for dealing with some of the difficulties built in to the table markup and touches on real world practices.

What are tables?

A table in HTML is a way to present “tabular data” — information that can be represented in a spread-sheet. Tables in HTML are two dimensional tables with rows and columns.

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41

Tabular data comes in many forms. The easiest way to tell if something should be in a table, as opposed to a different syntax like definition list, is to ask yourself, “Would this make sense as a spreadsheet?”

If data would make sense as a spreadsheet, it is a good candidate for a table.

Table Syntax

Basic Syntax

All tables use the <table> element, the table row ( <tr> ) element, and the table cell ( <td> ) element.

These three elements alone are enough for a simple table. A table is built one row ( <tr> ) at a time.

<table>
<tr>
 <td>John</td>
 <td>Smith</td>
 <td>31</td>
</tr>
<tr>
 <td>Jane</td>
 <td>White</td>
 <td>32</td>
</tr>
<tr>
 <td>Terry</td>
 <td>Jones</td>
 <td>41</td>
</tr>
</table>

John	Smith	31
Jane	White	32
Terry	Jones	41

Table Headers: Option 1

It is often desirable to put headers at the top of a table. One way of doing this is to replace normal table cells ( <td> ) with table header cells ( <th> ).

<table>
<tr>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Age</th>
</tr>
<tr>
 <td>John</td>
 <td>Smith</td>
 <td>31</td>
</tr>
<tr>
 <td>Jane</td>
 <td>White</td>
 <td>32</td>
</tr>
<tr>
 <td>Terry</td>
 <td>Jones</td>
 <td>41</td>
</tr>
</table>

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41

The benefit of this approach is that you it doesn’t affect the entire row, only those cells which are designated as headers. That is — it’s a benefit if that’s what you want to happen.

Table Headers (and Body): Option 2

The other way to make table headers is to wrap the entire first row (or several rows, even) in a table-head ( <thead> ) element.

When this is done, the rest of the content is usually wrapped in a table-body ( <tbody> ) element.

<table>
<thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>John</td>
  <td>Smith</td>
  <td>31</td>
 </tr>
 <tr>
  <td>Jane</td>
  <td>White</td>
  <td>32</td>
 </tr>
 <tr>
  <td>Terry</td>
  <td>Jones</td>
  <td>41</td>
 </tr>
</tbody>
</table>

Doing this allows the entire header row to be styled.

thead {
 background-color: black;
 color: white;
 font-weight: bold;
}

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41

Perhaps more interestingly, this also allows the body of the table to be styled without affecting the head.

tbody tr:nth-child(odd) {
    background-color: #eee;
}
tbody tr:nth-child(even) {
   background-color:#fff;
}

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41

Table Footer

Along with a table head and a table body, you can also define one or more rows as belonging to a table footer ( <tfoot> ). This is useful if you need to style the last row differently than the other rows. Most commonly, this might be used if the last row is a summation or calculation based on the rows above it.

<style>
thead {
 background-color: black;
 color: white;
 font-weight: bold;
}
tbody tr:nth-child(odd) {
 background-color: #eee;
}
tbody tr:nth-child(even) {
 background-color:#fff;
}

tfoot {
 background-color: #222222;
 color: white;
 font-style: italic;
}

</style>
<table>
<thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>John</td>
  <td>Smith</td>
  <td>31</td>
 </tr>
 <tr>
  <td>Jane</td>
  <td>White</td>
  <td>32</td>
 </tr>
 <tr>
  <td>Terry</td>
  <td>Jones</td>
  <td>41</td>
 </tr>
</tbody>
<tfoot>
 <tr>
  <td></td>
  <td>Average Age</td>
  <td>34.67</td>
 </tr>
</tfoot>
</table>

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41
	Average Age	34.67

Table Columns

Sometimes you need to style a table column. This can be achieved (to some extent) by using column markup.

Columns work a little strangely in HTML. Since tables are written as a series of rows, columns are define as a secondary overlay on the table.

At the top of the table, the <colgroup> element defines how columns will be laid over the table. Inside the <colgroup> are individual column definitions, using the <col> element. Each <col>spans one or more columns and defines a stylable entity.

<colgroup>
 <col style="background-color: cyan;">
 <col style="background-color:yellow;">
 <col style="background-color:red;">
</colgroup>
<table>
<thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>John</td>
  <td>Smith</td>
  <td>31</td>
 </tr>
 <tr>
  <td>Jane</td>
  <td>White</td>
  <td>32</td>
 </tr>
 <tr>
  <td>Terry</td>
  <td>Jones</td>
  <td>41</td>
 </tr>
</tbody>
<tfoot>
 <tr>
  <td></td>
  <td>Average Age</td>
  <td>34.67</td>
 </tr>
</tfoot>
</table>

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41
	Average Age	34.67

Each <col> in the example above spans one column of table cells. If we wanted to apply styles to the two name columns as a single unit, we could make the <col> span two cell columns.

<colgroup>
 <col span="2" style="background-color: cyan;">
 <col style="background-color:yellow;">
</colgroup>
<table>
<thead>
 <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>John</td>
  <td>Smith</td>
  <td>31</td>
 </tr>
 <tr>
  <td>Jane</td>

  <td>White</td>
  <td>32</td>
 </tr>
 <tr>
  <td>Terry</td>
  <td>Jones</td>
  <td>41</td>
 </tr>
</tbody>
<tfoot>
 <tr>
  <td></td>
  <td>Average Age</td>
  <td>34.67</td>
 </tr>
</tfoot>
</table>

First Name	Last Name	Age
John	Smith	31
Jane	White	32
Terry	Jones	41
	Average Age	34.67

There are problems with using the <colgroup> markup, unfortunately:

• <col> only supports styles related to background, width, border, and visibility. This means you cannot, for example, style the first column of a table in bold.
• Because <col> is neither a parent nor a child element of any table sections (head, body, footer), you cannot target a specific column within a section.
• Moreover, the table sections and table rows are more specific than the <col> element, so styles applied to the sections will override any style applied to the

Because of these issues, <col> has limited usefulness for table styling.

There are two common solutions to this: class attributes and nth-child selectors.

To use class attributes, simply apply the column-specific class to each <td> (and/or <th>) element.

<table>
<thead>
 <tr>
  <th class="col1">First Name</th>
  <th class="col2">Last Name</th>
  <th class="col3">Age</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td class="col1">John</td>
  <td class="col2">Smith</td>
  <td class="col3">31</td>
 </tr>
 <tr>
  <td class="col1">Jane</td>
  <td class="col2">White</td>
  <td class="col3">32</td>
 </tr>
 <tr>
  <td class="col1">Terry</td>
  <td class="col2">Jones</td>
  <td class="col3">41</td>
 </tr>
</tbody>
<tfoot>
 <tr>
  <td class="col1"></td>
  <td class="col2">Average Age</td>
  <td class="col3">34.67</td>
 </tr>
</tfoot>
</table>

Of course, this adds a lot of markup which isn’t strictly required. A better way would be to use the:first-child, :nth-child, and :last-child CSS selectors.

For example, what if we wanted the First Name column to be bold, and the ages to display in a red,monospace font — along with the other header and footer styles defined earlier?

<style>
thead {
 background-color: black;
 color: white;
 font-weight: bold;
}
tbody tr:nth-child(odd) {
 background-color: #eee;
}
tbody tr:nth-child(even) {
 background-color:#fff;
}

tfoot {
 background-color: #222222;
 color: white;
 font-style: italic;
}

td:first-child {
 

• Tweet
• Share
• Share
• Share
• Share