Using HTML - Page 2 - Elements - Learning to build your own website from scratch
Please note that this is part of a series:
« Previous (Page 1) - Next (Page 3) »
In page 2 of this series, I’ll start using XHTML 1.0 rather than HTML 4.01. The differences are small, but here’s why I prefer XHTML over HTML:
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be lowercase
- XHTML documents must have one root element
Agreed, the differences are minor, but not insignificant. In short, it improves compatability with browsers currently less used. Here’s the long “Why”. The first three all add to the legibility of your code, and helps to standardise it. If you must always properly nest, close, and type lowercase all of your elements, you’ll be able to edit your pages far more easily. These rules are highly suggested for those using HTML4 as well, they’re just not enforced. As for one root element, I’ve never heard of any situation where you might want multiple root elements. Why is this important? The W3Schools phrase it perfectly:
Today’s market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a “bad” markup language.
Indeed, most browsers on computers don’t have a problem with “bad” HTML under the HTML standard. However smaller browsers, and browsers on other devices (webTV, PDA, mobile phones, …) most likely will, but they won’t with proper HTML. If you’re going to write proper HTML anyway, you might as well declare it to the browser as XHTML, ensuring to it that it will be able to interpret your page.
So, let’s start with our basic page from Page 1, being sure to add the DocType:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html> <head> <title>Your title goes here</title> </head> <body>Your text goes here.</body> </html>
As you can see, I opted for the Transitional DocType. As I mentioned before, the Strict DTD means your code is more valid, but prevents you from using certain elements and attributes. It can be quite useful in helping figure out mistakes (even ones you can’t see): set it to strict in a temporary copy (never do your work on a public page), then have it validated. If the only errors are those you expected (such as use of the target attribute in the a element), great! At that point you can rest assured your page was well-built. Before I show you how to validate your XHTML, let me explain some elements.
It’s always good to have a reference sheet, especially at first when you might forget which tags you want, and what they do. The W3Schools have one such HTML 4.01 / XHTML 1.0 Reference sheet. If you don’t like it, just google for another. Do note that W3Schools is run by the W3 organization (W3 = WWW, get it? World Wide Web?), and as such their reference sheet can be considered complete and even official. I also, however, includes some browser specific elements (an element that may only work in IE (Internet Explorer), or only in NN (Netscape Navigator - predecessor to FireFox), as well as deprecated elements. Don’t worry, I’ll list the most important ones for you now.
- <!– Comments go here –>
This tag is used for comments. This could be used when you’re building a page and you want to add something later, or to explain a complicated piece of code. Do note that while comments aren’t normally visible, if a visitor decides to inspect your code (View Source) he can see the comment as clearly as you can when you’re editing your code - <!DOCTYPE>
Used to define your DTD, see Page 1 for a comprehensive explanation - <a>Link Name</a>
Defines an anchor. An anchor can be used as a link to another page, or a different part of the current page. To link to the current page, use one anchor as an ID, and another as a link - <b>Bold Text</a>
Bolds any text within it. This can be done with CSS as well, but if it’s a small piece of text that only needs to be bolded, this element is usually easier to read - <body> body </body>
Defines the body element. Everything within these tags is typically for the user to see - <br />
Break Row. Inserts a line break. When interpreting your HTML, the browser ignores any new lines you type (in other words, they’re just so you can read your code better). If you want a new line to appear in the browser, you’ll need to use <br />. Please note that some elements (like <h#> and <p>) include their own line breaks before and/or after - <code> code </code>
Similar to <pre>. All existing line breaks are displayed as such (no need for <br />), and the font is Courier New or another unicode font (where all the letters are as wide as each other) - <div> text, other elements </div>
Defines a section in a document. In other words, it’s used to group several things together. Very useful in addition to CSS - <h1> Big Header </h1> to <h6> Little Header </h6>
Tags to easily format headers. You could just as easily do the same with <div> or <span> tags, but headers can also be formatted using CSS so there’s no harm either way you decide. Using header tags do make it easier for you to see if it’s a header though… - <head> header data </head>
Defines information about the document. As mentioned in Page 1, this is where you typically have a lot of system information, nothing you want the user to see - <hr />
Defines a horizontal rule. Similar to <br />, this also types a new line, but prints a divider (a line) as well - <html> </html>
Defines an HTML document. <html> should be the second thing on your page (after your DTD), and </htML> should be the last - <i> Italic text </i>
You know… Italic text - <img />
Used to display images - <li> List Item </li>
Used to define a list item. Should always be used within either <ul> </ul> or <ol> </ol> - <link />
Used for external links, such as an external CSS file - <ol> Ordered List </ol>
Contains one or several list items (<li> </li>). Each list item is - by default - preceded by a number - <p> Paragraph </p>
Defines a paragraph. Extremely useful for grouping text or other content - <pre> text </pre>
See <code> - <span> text, other elements </span>
Exactly the same as <div> except for one difference: where <div> is used for entire line(s), <span> can be used for a portion of a line(s) - <style> CSS definition </style>
For defining internal CSS, goes within the <head> </head> tags - <table> table </table>
Defines a table. This tag may be deprecated a few years from now (at least that’s what I’ve been told), but it’s still a very easy way to group data. Recommended if you don’t know CSS - or don’t quite understand positioning with CSS. A table tag would contain one or multiple <tr> </tr> tags - <td> table cell </td>
Defines a table cell. This is where text and such would go - <title> </title>
Defines the document title, goes within the <head> </head> tags - <tr> table row </tr>
Defines a table row. Contains one or multiple <td> </td> tags - <ul> Unordered List </ul>
Contains one or several list items (<li> </li>). Each list item is - by default - preceded by bullets (balls, circles, squares).
In all likelihood, these are the elements you’ll use on a daily basis whenever you’re building an HTML page. Let’s recap what we’ve learnt here:
- XHTML is very similar to HTML, but stricter and therefor more compatible with browsers that are currently less popular
- A reference sheet is extremely useful when coding, as it holds everything you might use
- A reference sheet holds everything you might use, so it’s usually hard to find just what you want
- Some elements have a single tag, and don’t directly affect any particular text or items (such as <br />, <img />, <hr />)
- Other elements have an opening and closing tag. The closing tag is required, not optional. These elements typically contain text, such as <b>Bold</b>
- Some elements are useless without attributes, such as <img /> and <a> link </a>
- Proper nesting is crucial. <b><i>text</i></b> is as valid as <i><b>text</b></i> or <b><i>bold italic</i> - just bold</b>; but <b><i>text</b></i> is invalid
- Always use lowercase to define elements. <body> </body>, not <BODY> </BodY>
Please note that this is part of a series:
« Previous (Page 1) - Next (Page 3) »
