15 Little Things to Know About HTML

OK. You can't really expect to "know" HTML with only 15 pieces of information. But these are 15 good ones!

It will take a little while before you really understand these things. And that's just fine! Relax. It will come in time.

Open, Close, Nest

In XHTML, you open an element with an opening tag, then, at the end of the element, you signal the end by using a closing tag. (ie. Open a paragraph with <p> and close it with </p>). Closing tags always have a forward slash just after the less-than sign. Exceptions are so rare that you can learn them in time. All tags must be properly nested. (ie. If you put a link in a paragraph, you must close the link element BEFORE closing the paragraph element - <p>blah, blah, blah text <a href="linktosomewhere">blah</a></p>. The link element is nested within the paragraph here, as it should be.) Remember, open-close-nest, and you're on your way!

Lowercase tags

Write your tags in lowercase. It isn't required in HTML, and we used to write markup in caps, but World Wide Web Consortium (W3C) standards for XHTML call for lowercase markup and HTML doesn't care. Learn this right from the get go and you won't have to unlearn things the way some of us had to!

<html>

All HTML documents open with <html> and close with </html>. Everything else gets nested within these two tags. See Open, Close, Nest above.(The one exception is the document type declaration, but you don't need to think about that to get started.)

Head or <head>

Right after we open the HTML document with <html>, we add the HEAD element. The HEAD provides your user's browser with some information about your website. For example, if we put the webpage's TITLE in the HEAD, our user finds that title reproduced at the very top of his or her browser. There is a lot of other good stuff in the HEAD, but we don't need to sweat it to get started. We must close our HEAD before we move to the BODY, or we won't be following good practice.

Body or <body>

The stuff we want our users to see is contained in the BODY element. Our text, images, navigation, etc. are either physically contained in the BODY, or are pulled into the BODY from elsewhere via links. The relationship between the HEAD and BODY is one philosophers and theologians can ponder - is the head, our mind, spirit, consciousness connected to our body? With HTML, the relationship is quite clear. We don't want our HEAD in our BODY (as in, "Get your head out of your..."), or vice versa. We do not nest the BODY in the HEAD. We open with <html>, then open our <head>. We always close the HEAD (</head>) before opening the BODY (<body>). That's five.

Headings (<h1>, <h2>, <h3>, <h4>, etc.)

HEADINGS are quite useful because they help us style our text by breaking it up into different pieces. A single webpage might have a main heading (<h1>) in a large font, and subheadings (<h2>, <h3>, or more) breaking the text into different pieces. The higher the number, the smaller the type (<h1> is big, and <h4> is much smaller). We use <h1> only once on a specific page, and should reserve it for the main heading or title for the page. Others can be used over and over. While we can (and should) customize the look of our HEADINGS, we should preserve the general practice of keeping <h1> as our largest heading.

Paragraph or <p>

The PARAGRAPH is a good friend to the writer, and you need to know it! This element groups stuff together. You can put images, links, text, and more between the <p> and </p> tags. See some tutorials for more on this element.

Break or <br />

The BREAK is another good friend to the writer, and you'll probably stumble across it when you need it. Here's the difference between Break and Paragraph:

BREAK <br /> gives you a single-space, or line break in your text. Notice also that <br /> is a "self closing" element. We self-close the break with a forward slash that signals a closing tag right after the "br" and before the greater-than sign, like so: <br />. (Do notice that there's a space between the "r" and "/" in that tag.)
PARAGRAPH <p> gives you a double-space, or paragraph break in your text.

Anchor or <a>

The ANCHOR element is very, very important. Without it, a webpage or hypertext isn't doing much hyper anything. The A is our link element. We use it to insert images into webpages, to turn text or images into links that take the user to another page, to create links that help the user jump around on a single page, to create an email button for users, and more. To make a basic text link to another webpage, we write the A as follows: <a href="http://gohereonclick.com">go here</a>. The opening (<a>) and closing (</a>) anchor tags turn the text between them (in this example, "go here"), into a link. The "http://gohereonclick.com" tells the computer where to go when the user clicks the link.

FYI: in our example here, "href" is known as an ATTRIBUTE of our A tag, and we call "gohereonclick" the VALUE of that attribute. Values always appear in quotation marks! Basically, we're saying, turn "go here" into a link that will take the user to "gohereonclick.com". There are some important variations here when we want to build links to different parts of a single page (we need the "name" ATTRIBUTE), or when we make an email link (our VALUE has to be "mailto:emailaddresshere"). But that's enough for now.

Comments

This one won't be on everyone's top 15 list, but it's important.

It is often helpful to make little notes in the source code to remind ourselves of things we're doing in the code, to acknowledge the authors of bits of code we're using, or simply to insert a date of creation stamp in the code. But we don't always want that information popping up in the user's browser window. So, we want it, but we want it hidden in the source code. We do this with a comment.

A comment always opens with "" (dash, dash, greater-than sign), as in "". Comments can be very helpful when we want to remember where we got something, or how/why we did something with our design. That's ten.

Image or <img />

The IMAGE element enables you to insert an image (picture or graphic) into your webpage. Like the BREAK above, it is an empty or self-closing element and has only one part to it; it needs that front slash at the end if we're coding for XHTML.

If you want to insert an image called "myimage.jpg" into your page, the basic code looks like this: <img src="myimage.jpg" />. Notice our IMAGE element has an ATTRIBUTE called "src" and a VALUE (myimage.jpg). If this element looks a little like A to you, give yourself a sticker for paying attention! "A" says, "insert a link here," while IMG says, "insert an image here."

Unordered Lists (<ul>) and Ordered Lists (<ol>)

Lists are a super powerful tool, particularly now that browsers actually support CSS layouts and the good coders have moved beyond table-based layouts. You need to use lists. There are two main kinds of lists, ORDERED LISTS and UNORDERED LISTS. (The following is an unordered list that identified the difference between an ORDERED and an UNORDERED list.)

Ordered lists put the list items in order - think of an outline where you have point 1, point 2 , etc. These points are in a clear order, and the browser will add numbers to your items for this kind of list. ORDERED LISTS are opened with an <ol> tag and closed with, you know this, </ol>.
Unordered lists aren't in any numerical order, and the browser adds bullet points, or something to mark the different items. For some strange reason UNORDERED LISTS are opened with a <ul> and closed with </ul>.

Each list item (in the ORDERED or UNORDERED list) is marked by <li> and </li>. Easy. Remember: Open, Close, Nest. All LIST ITEMS go between the opening tag (<ol> or <ul>) and the closing tag (</ol> or </ul>). Practice a couple lists and you'll get it.

ATTRIBUTES & VALUES

Ok. You've already seen these words and their function in a couple different places, notably in <a> and <img /> above. Now that we've seen them in practice, we ought to explore their power a bit.

Think of ATTRIBUTES as the features of an element. With ANCHOR (<a>), we added a hyperlink feature. The VALUE simply specifies the characteristics of that feature. Again, with <a>, we wrote that the hyperlink will take the user to "gohereonclick.com". We always insert attributes and values into elements as follows: <tag attribute="value">. Once we generalize beyond the specifics of the ANCHOR example, we open ourselves up to a whole world of fun with attributes and values! Perhaps most importantly, we can do a ton of design customization to our websites by using the "class" and "id" attributes.

Colors

This is weird at first, but it's easy to put into practice. The colors you use on your website will be a combination of six numbers and letters that follow the number (#) sign. This combination, known as a "hexadecimal value," is a way of translating RGB (red-green-blue) values into another system.

The first two characters after the # stand for the RED value, the next two for the GREEN value, and the last two for the BLUE value. The code for black is #000000, the code for white is #FFFFFF, and pure red, green, and blue are #FF0000, #00FF00, and #0000FF, respectively. (The letters run from A-F, and the numbers are 0-9. If you see an 0 in a hexadecimal value, know that it is a zero and not the letter O.)

There are lots of color wheels and lists of the entire rainbow of hexadecimal colors available on the web. And any decent image editing software program will have a color picker that enables you to use your eyes to pick a color you like while giving you the right hexadecimal value, or hex code. Don't memorize, or sweat the details. Just know that you need a # and a combination of six numbers/letters. See our Resources for some color help.

DIV (<div>) and SPAN (<span>)

When I was cutting my web development teeth we learned to bend table rows and columns into strange shapes to pull off visually engaging designs. But you think of "tables" as spreadsheet-like thingies that contain tabular information. Keep right on thinking that because it will serve you well as you build webpages! (Check out Molly Holschlag's article, Thinking Outside the Grid. Be the person who never used a table for webpage layout.)

As the browser wars abated and browser support for Cascading Style Sheets has emerged, the heavy lifting of webpage layout has rightly been assumed by the unassuming DIV element and it's smaller cousin SPAN. TABLE once belonged on any top 15 list. No more!

DIV is a generic "block level" HTML element that we can style however we want. Basically, web developers use it to group sections of a webpage together, to position those sections on the page, and to style them. Typically, one finds the site branding in a DIV, the navigation in a DIV, the main content in a DIV, and the site information in a DIV.
SPAN is a generic inline HTML element. We usually use SPAN for micro-level design adjustments.

You won't have to worry too much about writing these babies yourself since I'm giving you some layout templates. But you will see them in the source code and in the stylesheets you use. It's highly probable that you'll be digging in and making some mods to some of the styling I have given to the various DIVs. Also, you may find yourself using SPAN elements to effect the Fahrner Image Replacement (see Coding in Resources).

English 384:PQ - Writing for Electronic Media (Spring 2008)

Michael J. Cripps, Ph.D.