Brief HTML 5 Reference

Basic Tags and Document Structure

Here's a complete sample html page...

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page!</title>
    <link href="groovy_styles.css" rel="stylesheet" type="text/css" media="screen" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0;" />
</head>

<body>
	<h1>Howdy</h1>
	<p>Welcome to my page</p>

</body>
</html>

Explanation...

<!DOCTYPE html> <html lang="en">

Starts an HTML document.

<head>

Sets off the title and other information that isn't displayed on the Web page itself.

<title>groovy page! </title>

Puts the name of the document in the title bar.

<link rel="stylesheet" href="groovy_style.css" type="text/css" media="screen" />

Connects this page to a separate stylesheet (to control color and font).

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

For iphone and other devices:
“initial-scale=1.0;”
tells the browser to show text
full-size (like picture 1, below)
rather than shrinking the
whole page into a postage
stamp (see picture 2).

Would you rather see full-size
writing on your smart phone
(might have to scroll down)...
[picture 1]

[picture 2]
...or microscopic print with
the site showing the way it
looks on a larger monitor?
(Will have to zoom & then
scroll up & down and left
& right because words and
links are too small.)

</head>

End of the headings.

<body>…</body>

Surrounds the visible portion of the document.

</html>

Ends an HTML document.

Blocks of text (and/or images)

html5_blocks
(Picture of Sample html5 page).

<header>Welcome to my site</header>: Surrounds a header, which is an optional bit of info at the top of a page or the top of an article.
<article>Blah blah blah</article>: Surrounds an article (a story or other bunch of stuff). Note: articles can have their own internal headers and footers if they want.
<footer>© 1974</footer>: Surrounds a footer (optional final info at bottom of page or at bottom of article)
<section>bunch of articles</section>: Pages can have a bunch of sections (which might float), and sections can have articles.
<p>Blah blah blah</p>: Surrounds a paragraph
<div>…</div>: A generic tag used to surround large blocks of HTML (multiple paragraphs, etc), for organization and formatting.
<span>word</span>: A generic tag used to surround small blocks of HTML (a few words, for example), usually for words that want special formatting.
<p style="text-align:right;">…</p>: Aligns a paragraph to the left, right, or center
<br />: Inserts a line break
<blockquote>…</blockquote>: Surrounds a block quote
<dl>…</dl>: Creates a definition list. This page is a big example of definition lists!
<dt>Example</dt>: Surrounds each “Definition Term”
<dd>Here's some info</dd>: Surrounds each “Definition”
<ol>…</ol>: Creates a numbered list
<li>more info</li>: Surrounds each list item, and adds a number
<ul>…</ul>: Creates a bulleted list
<li>even more info</lt>: surrounds each list item, and adds the bullet

Text tags

Note: use CSS styles for most text decoration!

<h1>News Flash!</h1>

Creates the largest headline:

News Flash!

<h3>News Blip!</h3>

Creates a medium headline:

News Blip!

<h6>psst!</h6>

Creates the smallest headline:

psst!

<b>wow</b>

Creates bold text: wow

<i>hey hey</i>

Creates italic text: hey hey

<pre>System.out.println;</pre>

Creates

preformatted text
in which
return and   space   characters matter for a change

and all letters are same width:

System.out.println;

<cite>according to Bob</cite>

Creates a citation, usually italic: according to Bob

<em>Big Deal</em>

Words get emphasized (browser decides whether to use bold or italic): Big Deal

<strong>Coo Coo</strong>

Words get emphasized (with italic or bold): Coo Coo

<span style="font-size:2em">Big</span>

Sets size of words (2em in this example means 2 times normal): Big

<span style="color:green">wahoo</span>

Sets font color, using name or hex value from color chart: wahoo

Graphical Elements

<img src="horse.png" alt="house horse" width="182" height="143" />: Adds an image
<hr />: Inserts a “H”orizontal “R”ule (a line like this:
<br />: “Break” (makes new line,
like hitting
the
return key)

Tables

(Here's a Tutorial)

<table>…</table>: Creates a table
<tr>…</tr>: Surrounds each Table Row
<td> </td>: Surrounds each cell (“Table Data”) in a row
<th> </th>: Sets off the table header (a normal cell with bold, centered text)

Forms

To actually make the forms do anything (besides look good), you'll have to run a script. (Working Sample.) The HTML just creates the appearance of a form.

Note: this section hasn’t been updated for html5 yet.

<form>…</form>: Surrounds the form
<select multiple name="NAME" size=?>…</select>: Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option>Huey</option>: Surrounds each menu item
<select name="NAME">…</select>: Creates a pulldown menu
<option>: Sets off each menu item
<textarea name="NAME" cols="40" rows="8">…</textarea>: Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME" />Press me: Creates a checkbox with descriptive text following.
<input type="radio" name="NAME" value="x" />: Creates a radio button. Text follows tag
<input type="text" name="foo" size="20" value="I'm a text" / >: Creates a one-line text area with the “value” words inside. Size sets length, in characters.
<input type="submit" value="NAME">: Creates a Submit button
<input type="image" name="NAME" src="name.gif">: Creates a Submit button using an image
<input type="reset">: Creates a Reset button