HTML5 Tutorial

Special Tags: DIV and SPAN

The <div> tag is a block, meaning it puts a line break before and after it. It divides a document into smaller discrete blocks of content, grouping other tag elements like a headline (<h1>), paragraphs (<p>) and even other <div> elements. The <div> can be turned into an HTML editor by setting the contenteditable attribute to true. For example:

This DIV has editable text. Ctrl+U Ctrl+B Ctrl+I

The <span> tag is inline to a block of text.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Hello, World</title>
	</head>
	<body>
		<div id="header">
			<img alt="company logo" width=110 height=50 src="companylogo.gif" />
		</div>
		<div id="main">
			<h1>Document Heading</h1>
			<p><cite>Hello, World!!!</cite></p>
			<p>This is inline <code>programming code</code>.
				This is a <a href="http://www.google.com/">link to Google</a>.
			</p>
			<pre>
	//this is a block of programming code
	int x = 3 + 2 * 4; // comment</pre>
			<ol>
				<li>bullet 1</li>
				<li>bullet 2</li>
				<li>bullet 3</li>
			</ol>
			<blockquote>
				this is a block quote
			</blockquote>
		</div>
		<div id="footer">
			<small>Copyright 2007 (this is small text)</small>
		</div>
	</body>
</html>
company logo

Document Heading

Hello, World!!!

This is inline programming code. This is a link to Google.

//this is a block of programming code
int x = 3 + 2 * 4; // comment
  1. bullet 1
  2. bullet 2
  3. bullet 3
this is a block quote
Copyright 2007 (this is small text)

New HTML5 Tags

There are several new HTML5 specific tags.

The <header>, <footer> and <summary> tags are self-explanatory.

The <section> tag is a grouping of related content.

The <article> tag contains a complete composition, or an "article", so it, too, is self-explanatory.

The <main> tag is for the main content of the document and my contain several articles or none at all. There would typically be only one of these tags in a document.

The <aside> tag is to or toward the side of the main article.

The <nav> tag is used to contain navigation links.

The <figure> tag is used for an illustrative figure. An <img> tag can be used inside it and a <figcaption> is also used inside it which explains the photo or illustration.

The <time> tag flags a valid date or time in the document's text. It has two attributes: datetime and pubdate. For example: <time datetime="2014-01-01 17:00" pubdate>Jan 1st at 5:00 p.m.</time>. pubdate refers to the publication date of the article or document, if applicable.

The <mark> tag is used to highlight text.

<< < [Page 4 of 8] > >>