The rules used to place content on a page depend on the type of element that contains the content. The placement also depends on the writing rules for the language (e.g., left-to-right, top-to-bottom). The element types are:
All html documents should contain a head and body sections. The title element is use by the browser to title the browser window.
Heading in the document are found in the header tags, the tags are: h1, h2, h3, h4, h5, and h6. The h1 headers are the most important, the h6 headers are the least important.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>
Hello World
</h1>
<p>
The first sentence.
</p>
</body>
</html>
Paragraphs are render as distinct blocks of text. In english, the blocks are stacked vertically. A block is separated from other blocks by a margin. The content is separate from the borders by the padding.
Text is rendered as a sequence of lines. A sequence of text can be highlighted with the following tags: b, em, u, code, s, strong, q, tt, and small. These tags only affect what decoration or fonts are used to display the characters. These tags are part of the inline formatting.
A p tag should not nest inside of another p tag.
<html>
<head>
<title>Paragraphs</title>
</head>
<body>
<p style="border:thin blue solid;" >
The <b>quick</b> brown fox jumps over the
lazy dog's back.
The <em>quick</em> brown fox jumps over the
lazy dog's back.
The <u>quick</u> brown fox jumps over the
lazy dog's back.
The <code>quick</code> brown fox jumps over the
lazy dog's back.
</p>
<p>
The <s>quick</s> brown fox jumps over the
lazy dog's back.
The <strong>quick</strong> brown fox jumps over the
lazy dog's back.
The <q>quick</q> brown fox jumps over the
lazy dog's back.
The <small>quick</small> brown fox jumps over the
lazy dog's back.
The <tt>quick</tt> brown fox jumps over the
lazy dog's back.
</p>
</body>
</html>
Unorder lists are specified with the ul and li tags, where ul stand for unordered list, and li stands for list item.
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<!-- a comment -->
<p>Common, but bad</p>
<ul>
some indented text
</ul>
</body>
</html>
The ol tag introduces an ordered list. List can contain block formatted items like other lists or paragraphs.
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
<li>
<p>
A paragraph can nest
inside a list item.
</p>
</li>
<li>
<ol>
<li>red</li>
<li>green</li>
<li>blue</li>
</ol>
</li>
<li> the end. </li>
</ol>
</body>
</html>
A definition list, dl. contains terms, dt, and definitions, dd. The terms and definitions can contain block items.
<html>
<head>
<title>Definition List</title>
</head>
<body>
<dl>
<dt> red </dt>
<dd> the colour of strawberries </dd>
<dt> green </dt>
<dd> the colour of leaves </dd>
<dt> blue </dt>
<dd> the colour of the sea </dd>
<dt> rainbow </dt>
<dd>
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</dd>
</dl>
</body>
</html>
Arbitrary nesting of lists is allowed. Different markers are used for nested unordered lists.
<html>
<head>
<title>Lists in Lists in Lists</title>
</head>
<body>
<ul>
<li>first</li>
<p> not a good idea, or is it </p>
<li>second</li>
<li>third</li>
<li>
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>
<ul>
<li>dog</li>
<li>cat</li>
</ul>
</li>
</ul>
</li>
<li> the end. </li>
</ul>
</body>
</html>
What markup is used to produce this page?
Which tags are block tags and which are inline tags:
Long quotes can be done with the blockquote tag. In XHTML, this tag cannot nest inside of a p tag.
<html>
<head>
<title>blockquote</title>
</head>
<body>
<p>
A <em>Shakespare</em> quote:
<blockquote>
To be or not to be, that is the question,
whether ...
</blockquote>
</p>
<p>
Since a block quote is a block, it should not
appear inside of a paragraph.
To quote again:
</p>
<blockquote>
To be or not to be, that is the question,
whether ...
</blockquote>
</body>
</html>
A table is composed of rows. Each row has cells. A cell contains the content. A table can have headings.
<html>
<head>
<title>tables</title>
</head>
<body>
<table>
<tr>
<th>tag</th>
<th>type</th>
</tr>
<tr>
<td>s</td>
<td>inline</td>
</tr>
<tr>
<td>p</td>
<td>block</td>
</tr>
<tr>
<td>b</td>
<td>inline</td>
</tr>
</table>
</body>
</html>
Tables are commonly misused to control page layout.
A single row can span multiple rows. A caption tag specifies the tables caption.
<html>
<head>
<title>tables</title>
</head>
<body>
<table>
<tr>
<th>tag</th>
<td rowspan="4">
space in middle
</td>
<th>type</th>
</tr>
<tr>
<td>s</td>
<td>inline</td>
</tr>
<tr>
<td>p</td>
<td>block</td>
</tr>
<tr>
<td>b</td>
<td>inline</td>
</tr>
<caption>
row span example
</caption>
</table>
</body>
</html>
A single column can span multiple columns.
<html>
<head>
<title>tables</title>
</head>
<body>
<table>
<caption align="bottom"> column span </caption>
<tr>
<td colspan="2"> tag types </td>
</tr>
<tr>
<th>tag</th>
<th>type</th>
</tr>
<tr>
<td>s</td>
<td>inline</td>
</tr>
<tr>
<td>p</td>
<td>block</td>
</tr>
<tr>
<td>b</td>
<td>inline</td>
</tr>
</table>
</body>
</html>
A table tag has the following attributes:
CSS is normally used to achieve the affects of these attributes.
What markup produces the following table:
| the top row | |||
|---|---|---|---|
| left | cols1 | cols2 | cols3 |
| colsa | colsb | right | |
| bottom | |||
| 1 | 2 | 3 | 4 |
The rows of a tables can be grouped into a table head, thead, a foot, tfoot, and the body, tbody.
<html>
<head>
<title>row groups</title>
</head>
<body>
<table rules="rows" width="70%">
<caption align="top"> row groups </caption>
<thead>
<tr>
<th>tag</th>
<th>type</th>
</tr>
</thead>
<tfoot>
<tr>
<th>tag</th>
<th>type</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>s</td>
<td>inline</td>
</tr>
<tr>
<td>p</td>
<td>block</td>
</tr>
<tr>
<td>b</td>
<td>inline</td>
</tr>
</tbody>
</table>
</body>
</html>
If present, the header and footer must come before the body.
The alignment of the contents of the table cells, td and th, are controlled by the attributes:
The default horizontal alignment for th is center.
An example for the different alignments.
<html>
<head>
<title>cell alignment</title>
</head>
<body>
<table align=center border=1>
<tr>
<th> </th>
<th align=left>left</th>
<th align=center>center</th>
<th align=right>right</th>
<th align=justify>justify</th>
</tr>
<tr>
<td>top </td>
<td valign=top align=left>left</td>
<td valign=top align=center>center</td>
<td valign=top align=right>right</td>
<td valign=top align=justify>justify</td>
</tr>
<tr>
<td>middle </td>
<td valign=middle align=left>left</td>
<td valign=middle align=center>center</td>
<td valign=middle align=right>right</td>
<td valign=middle align=justify>justify</td>
</tr>
<tr>
<td>bottom </td>
<td valign=bottom align=left>left</td>
<td valign=bottom align=center>center</td>
<td valign=bottom align=right>right</td>
<td valign=bottom align=justify>justify</td>
</tr>
<tr>
<td>baseline </td>
<td valign=baseline align=left>left</td>
<td valign=baseline align=center>center</td>
<td valign=baseline align=right>right</td>
<td valign=baseline align=justify>justify</td>
</tr>
</table>
</body>
</html>
A table can be nested inside of another table. This was/is the favourite page layout trick.
<html>
<head>
<title>nested tables</title>
</head>
<body>
<table width="80%" border="1">
<tr>
<th>1</th> <th>2</th> <th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>
<table width="80%" border="1">
<tr><td>A</td> <td>B</td> </tr>
<tr><td>C</td> <td>D</td> </tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td>red</td> <td>green</td> </tr>
<tr><td>blue</td> <td>white</td> </tr>
</table>
</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Floating tables allow for side bars. The width of the table must be specified.
<html>
<head>
<title>floating tables</title>
</head>
<body>
<table align="right" width=100 bgcolor="white">
<tr> <td> right </td> </tr>
</table>
<table align="left" width=70 bgcolor="blue">
<tr> <td> left </td> </tr>
</table>
<table align="right" width=110 height=100 bgcolor="yellow">
<tr> <td> next right </td> </tr>
</table>
<p>
A table can float right or left.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
</p>
</body>
</html>
Images play an important role in presentation. They were introduced by Netscape (i.e., they were not part of the orginal HTML specification). The src attribute give the URL for the image. The alt attribute is the alternate if the image cannot be rendered of the link is broken.
<html>
<head>
<title>Image Tag</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/images/">
</head>
<body>
<p>
The image tag is the most used and abused tag.
</p>
<img alt="broken" src="circles.png">
</body>
</html>
The img tag supports the following attributes:
There is also the usemap and ismap attributes.
In the early days, images were used to provide spacing and borders. For example:
<html>
<head>
<title>Images for space and borders</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3175/notes/images/">
</head>
<body>
<img width="100%" height="4" src="1x1-red.png">
<img width="100%" height="8" src="1x1-blank.png">
<p>
A paragraph surrounded by space and borders.
</p>
<img vspace="40" width="100%" height="10" src="1x1-red.png">
</body>
</html>
Now days, CSS provides much better and cleaner control, this use is discouraged.
Borders between segments of the page can be done with horizontal rules, the HR tag. This tag supports: width, size, align, and noshade attributes. The colour of the HR could not be controlled.
<html>
<head>
<title>Horizontal Rules</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/images/">
</head>
<body>
<!-- no endding tag required for html -->
<hr width="100%" size="4">
<!-- transparent still required for space -->
<img width="100%" height="8" src="1x1-blank.png">
<p>
A paragraph surrounded by space and horizontal rules.
</p>
<!-- attributes do not require values -->
<hr noshade align="left" width="50%" size="8">
</body>
</html>
Unless placed outside of a paragraph, an image is treated like a character/word and placed inline with the rest of the text.
<html>
<head>
<title>inline images</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/images/">
</head>
<body>
<p>
An image is really a big character, it will take
the place of a period in this sentence
<img
width="35" src="circles.png">
Notice that it is placed in the a line with the text.
Images, like this one,
<img
height="20" width="60" align="middle" src="circles.png">
are inserted in a line, with the surrounding text.
And now some more filler text.
</p>
</body>
</html>
Images are no different then a glyph that makes up a rendering for a character. Each character glyph has a width, height, and baseline alignment.
An img can be floated left or right with the alignment attribute (this use is also discouraged, the CSS properties should be used).
<html>
<head>
<title>Image Tag</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/images/">
</head>
<body>
<img
align="left" width="150" src="circles.png">
<p>
Some text to fill the space.
The is really really really filling, not!
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
</p>
<img
align="right" width="150" src="circles.png">
<p>
Some text to fill the space.
The is really really really filling, not!
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
The quick brown fox jumps over the lazy dogs back.
</p>
</body>
</html>
A long sentence to take up some room, so that the paragraph bumps into the image. Images are used for:
inside of an item
An illustration of transparent images and floats to create varying margins.
<html>
<head>
<title>Varying Margins</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/images/">
<style type="text/css">
img.left { float: left; clear: left; height:32;}
img.right { float: right; clear: right; height:32; }
</style>
</head>
<body style="background: rgb(170,180,255)">
<img class="left" width="80" src="1x1-blank.png">
<img class="right" width="80" src="1x1-blank.png">
<img class="left" width="60" src="1x1-blank.png">
<img class="right" width="60" src="1x1-blank.png">
<img class="left" width="40" src="1x1-blank.png">
<img class="right" width="40" src="1x1-blank.png">
<img class="left" width="20" src="1x1-blank.png">
<img class="right" width="20" src="1x1-blank.png">
<img class="left" width="40" src="1x1-blank.png">
<img class="right" width="40" src="1x1-blank.png">
<img class="left" width="60" src="1x1-blank.png">
<img class="right" width="60" src="1x1-blank.png">
<img class="left" width="80" src="1x1-blank.png">
<img class="right" width="80" src="1x1-blank.png">
<p>
There are very many small words, its, ifs, buts, thens.
There are very many small words, its, ifs, buts, thens.
There are very many small words, its, ifs, buts, thens.
There are very many small words, its, ifs, buts, thens.
There are very many small words, its, ifs, buts, thens.
There are very many small words, its, ifs, buts, thens.
</p>
</body>
</html>
The anchor tag, a allows a spot in the document to be referenced or link to an document (any document). The first form's syntax is:
<a name="name">
The second form is :
<a href="URL">
The anchor tag supports the following attributes:
Other attributes are: type, rel, coords, shape, ...
Linking and linked anchors are demonstrated with:
<html>
<head>
<title>anchors</title>
</head>
<body>
<ul>
<li><a name="first">first</a></li>
<li><a name="second">second</a></li>
<li><a name="third">third</a></li>
<li>skipping 1</li>
<li>skipping 2</li>
<li>skipping 3</li>
<li>skipping 4</li>
<li>skipping 5</li>
<li>skipping 5</li>
<li>skipping 6</li>
<li>skipping 7</li>
<li>skipping 8</li>
<li>skipping 9</li>
<li>skipping 10</li>
<li>skipping 11</li>
<li>skipping 12</li>
<li>skipping 13</li>
<li><a href="#first">back to first</a></li>
</ul>
<p>
The <a href="helloworld-h1.html">hello world</a> document
is a complete but simple HTML page.
</p>
<p>
The <a href="http://www.w3.org/TR/html4/struct/links.html"> anchor tag</a>
provides the hyper in HTML.
</body>
</html>
The general URL form is:
protocol://host/path#name?query
An image tag can also appear inside of an anchor tag. This allowing linking of images. An example is:
<html>
<head>
<title>Linking with Images</title>
<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/images/">
</head>
<body>
<a name="target">
<img alt="broken" height="300" src="circles.png">
</a>
<br>
<a href="../html-body/examples/img_anchors.html#target">
<img alt="broken" src="circles.png">
</a>
<br>
<a href="../html-body/examples/img_anchors.html#target">
<img border="0" alt="broken" src="circles.png">
</a>
</body>
</html>
Notice that the last image has no border, thus it is not a obvious link.
The span element groups text or other inline content. The div element groups block content. These tags are used with CSS to apply style to a group. This allows the logical structure of the document to be marked.
<html>
<head>
<title>Div and Span</title>
</head>
<body>
<div id="first">
<p>
<span class="foo">The first sentence.</span>
Just a <span class="bar">word</span> in the span.
</p>
<p>
Another paragraph.
</p>
</div>
<div id="second">
<ul>
<li>red </li>
<li>green</li>
<li>blue</li>
</ul>
</div>
</body>
</html>
Every HTML element can use the following common attributes:
The event handling attributes will be discussed later.