Try out some tags in your own HTML document by cutting, pasting and modifying some of the examples below.
| Tag | Description | Example code | Example |
|---|
| <html> | Identifies an HTML document | | |
|---|
| <head> | Indentifies the head part of the document - the stuff which is not part of the web page itself | | |
|---|
| <body> | Identifies the displayed part of the web page | | |
|---|
| <title> | Defines the page title which is usually displayed in the browser window's title bar | | |
|---|
| <p>...</p> | Defines a paragraph of text | | |
|---|
| <br></br> (or <br />) | Forces a line break | One line<br />Next line | One line
Next line |
|---|
| <h1>...</h1> | Defines a heading. Less important headings can be specified with <h2> to <h6> | <h1>Important Heading</h1> | Important Heading |
|---|
| <em>...</em> | Emphasises a passage of text - usually gets displayed in italics. | The next word is <em>emphasised</em> | The next word is emphasised |
|---|
| <strong>...</strong> | Increases the strength of the text - usually by displying in a bold font. | The next word is <strong>strengthened</strong> | The next word is strengthened |
|---|
| <a href="some_address"> ... </a> | Defines a link to another URL. The target="_blank" bit makes the web page open in a new browser window. | <a href="http://www.bbc.co.uk" target="_blank"> The BBC website </a> | The BBC website |
|---|
| <img src="graphicfile" alt="a picture" width="67" height="38" /> | Inserts a graphical image into the document. The filename given can be relative to the current webpage or an absolute URL. The alt text is a description of the picture, and is compulsory. It is used, for example, by non-visual browsers. The width and height are optional, but help the browser to preformat the page before the image has actually arrived. This can speed up the browser on slow connections. | <img src="logo.jpg" alt="logo" /> |  |
|---|
| <hr /> | Inserts a horizontal rule across the page. | Some text<hr />Some more text. | Some text
Some more text. |
|---|
| <ol>...</ol> | Defines an ordered (or numbered) list. | <ol>
<li>First item</li>
<li>Second item</li>
</ol> |
- First item
- Second item
|
|---|
| <ul>...</ul> | Defines an unordered (or unnumbered) list. | <ul>
<li>First item</li>
<li>Second item</li>
</ul> | |
|---|
| <dl>...</dl> | Defines a definition list. | <dl>
<dt>First item</dt>
<dd>Definition of first item</dd>
<dt>Second item</dt>
<dd>Definition of second item</dd>
</dl>
|
- First item
- Definition of first item
- Second item
- Definition of second item
|
|---|
Note that this course was written in 2003, and things have moved on since then! You might like to check out this site for a more up to date html overview.
