The purpose of HTML is to structure your document. Resist the urge to use it for layout. Layout is device-specific, but structure is universal. A well-structured document is easier for new, unanticipated technologies to read, easier for you to maintain, and easier for you to vary the layout on.
When it comes time to vary the visual layout, you have style sheets (CSS). We’re not going to cover style sheets in this tutorial, but we will cover how to work with them.
Classes and IDs
Each tag can have a class and it can have an ID. An ID uniquely identifies that tag among all other tags on the page. An ID can only appear once throughout the web page.
<dl id="ratings”>
IDs can be used in CSS and in JavaScript to reference that specific tag.
A class can appear as many times as it is needed. It is usually used only in CSS.
<a class="hot">
Style Sheets: Styles
You can also add the style attribute to any display tag. This allows you to put CSS directly into the HTML.
<h1 style="background-color: green;">
Normally, you’ll want to avoid this: it’s easier to change layouts later if the style information is in a separate file.
DIVs and SPANs
Sometimes you need to section off a portion of a web page or paragraph for special styling, but there is no appropriate tag to use. When this happens, you can use a <div> tag or a <span> tag. The <div> tag is a block-level tag that can contain any other block-level or paragraph level tag (including other div tags). The <span> tag is a character-level tag that can contain text and other character-level tags, but not paragraph-level or block tags.
You’ll almost always give div and span tags either a class or an ID (or both), because there isn’t any other reason to have them in a document.
Put a div around the main part of the review. Give it the ID of “review”. It should begin after the “There are places” paragraph but before the “I had never seen” paragraph. It should end between the “It was a one-shot” and “Recommendation: Purchase”.
<div id="review">
<p>I had never seen this, but on the strength of the Criterion label, the description, and a half-off sale at Amazon, I took a chance. It was well worth it. It's filled with wonderful extras and a great movie.</p>
…
<p>It was a one-shot effort. Part of the reason it was their only effort were the problems they had once they had to enter it in the system, to get played in theaters. But part of it is that they had an idea for a film, had the resources to make the film their way, and they made the film they wanted. There was no reason to make another one. If you can enjoy a movie that doesn't conform and that unfolds with a graceful eerieness, I recommend Carnival of Souls. I enjoy it more each time I watch it.</p>
</div>
Reload the web page, and the recommendation to purchase that appears after this div tag closes will now become italicized and align itself to the right. The style sheet specifies that any paragraph that comes immediately after the review must be styled in that manner.
