2.4: The basics of HTML5 tags

HTML tags

HTML5 markup tags are usually called HTML tags

HTML elements

An HTML element is everything between the start tag and the end tag, including the tags:

	<p>This is a paragraph.</p>

Note that this opening paragraph tag has no attributes. You would use opening and closing paragraph tags to define the beginning and end of every paragraph.

Structure tags

HTML5 has a new set of tags that define the structure of the page. These should simplify the task of website building:

<header>
	Defines the header, the main website
	identifier at the top of the page.
</header>

<main>
	Defines the main content area of the page.
<main>

<aside>
	Use this tag to define sidebar information.
</aside>

<footer>
	The footer, at the bottom of the page, contains provenance, the
	who, what, when and where of the site, plus other useful items.
</footer>

<div>
	Division tags are generic tags that usually are used with a class 
	attribute or an id attribute, such as <div id="wrapper"> to 
	divide space on the page or set up a special block of information.
</div>

Heading tags

HTML headings provide a hierarchy for the text on your web pages. Headings are important for search engine optimization (SEO) because web crawlers look for heading tags as containing key words.

Headings come in six sizes, and each can be used as many times as you want on a page.

Here are the elements:

	
	<h1>This is an h1 heading</h1>
	<h2>This is an h2 heading</h2>
	<h3>This is an h3 heading</h3>
	<h4>This is an h4 heading</h4>
	<h5>This is an h5 heading</h5>
	<h6>This is an h6 heading</h6>
	

Here is how they look:

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading

Block tags

Heading tags and paragraph tags are in a group called block tags because they create blocks of text. Each heading or paragraph is a block of text and needs a beginning and ending tag. When you use block tags, you do two things:

  1. You start a new block of text on a new line of text.
  2. You apply the styles attached to that block tag, such as font size, font style and spacing.

The following code looks like one big block of text, but note the beginning and ending paragraph tags:

  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
  volutpat.</p><p> Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo 
  consequat. Duis te feugi facilisi. </p><p>Duis autem dolor in 
  hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
  feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
  blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla 
  facilisi.</p>

Here is how it looks in the web browser:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

The versatile list

As we will see in future chapters, lists can be used for everything from a simple numbered set of items to complex roll-over and drop-down menus. Lists require two sets of tags:

  1. A list is contained within a beginning and ending list container tag that defines the type of list.
    • Ordered lists take the tags <ol> and </ol> to produce numbered lists items.
    • Unordered lists take the tags <ul> and </ul> to produce bulleted lists items.
  2. Each list item is contained within beginning and ending list item tags: <li> and </li>

Here is how the code looks for an ordered list:


	<ol>
		<li>Put your right foot in.</li>
		<li>Put your right foot out.</li>
		<li>Put your right foot in.</li>
		<li>And shake it all about.</li>
	</ol>
	

Here is how it looks in the web browser

  1. Put your right foot in.
  2. Put your right foot out.
  3. Put your right foot in.
  4. And shake it all about.

Here is how the code looks for an unordered list:


	<ul>
		<li>Put your right foot in.</li>
		<li>Put your right foot out.</li>
		<li>Put your right foot in.</li>
		<li>And shake it all about.</li>
	</ul>
	

Here is how it looks in the web browser

  • Put your right foot in.
  • Put your right foot out.
  • Put your right foot in.
  • And shake it all about.

Inline tags and phrase tags

Inline tags flow within the lines of text. Phrase tags such as emphasis and strong emphasis apply formatting to individual words or phrases.

Here is how the code might look:


  <p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit, 
  sed diem</strong> nonummy nibh euismod tincidunt ut lacreet dolore 
  magna aliguam erat volutpat.</p><p> Ut wisis enim ad minim veniam, quis 
  nostrud exerci tution <em>ullam corper suscipit lobortis nisi</em> ut 
  aliquip ex ea commodo consequat. Duis te feugi facilisi. </p><p>Duis autem 
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
  dolore eu feugiat nulla facilisis <span class="blue">at vero eros et 
  accumsan et iusto odio</span> dignissim qui blandit praesent luptatum 
  zzril delenit au gue duis dolore te feugat nulla  facilisi.</p>
  

Here is how it would look in the web browser:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

The beginning tag <span class="blue"> includes a class attribute that specifies certain styling, in this case blue type.

HTML attributes

You can accomplish a lot using HTML tags by themselves, but HTML attributes greatly expand what tags can do.

Stand-alone tags

Some tags perform an action and do not have “content” to enclose with an ending tag. These include img tags. These “stand-alone tags” still must be closed with a forward slash within the tag. Here is an example:

<img src="img/earth.jpg" alt="The Earth" height="400" width="400" />