1. Block-Level HTML Elements

Block-level elements format blocks of text. They take up 100% of the available width, with line breaks before and after each element, so that they stand out. Block-level elements can be introduced into other block-level elements, but they cannot be introduced into inline elements without causing a disturbance.

Block-level elements are most commonly used to create headings, paragraphs, page divisions, lists and tables, but are not limited to these choices.

Headings

HTML headings are a set of six tags that are used to make titles and subtitles stand out from the rest of the page by increasing the size of the text and making it bold. The heading tags can also help search engines determine the structure and content of a page.

<h1> </h1> is the largest (most important) heading and <h6> </h6> is the smallest (least important) heading. In fact, the <h4>, <h5>, and <h6> tags are very rarely used.

Paragraph

I'm going to assume two things: One, you know what a paragraph is, and two, you don't know how to make paragraphs on your webpage. If both of my assumptions are true, I am happy to say that I can help.

Browsers place blank lines before and after the <p> and </p> tags, causing a paragraph effect. A good example is this very page, which uses paragraph tags. Their usage is simple:

Horizontal Rule

A horizontal rule is a long grey horizontal line that extends across the page. It is a useful way of separating sections of a webpage.

The horizontal rule tag is an empty element without a separate closing tag.

You can customize the width and thickness of horizontal rules. "Width" controls how far it extends across the page, and "size" controls the thickness.

DIV Tags

The <div> tag, while it stands for "division", has no actual meaning, or function, in HTML, but the fact that all other HTML elements can be contained within the DIV element makes this element an ideal tool for CSS. The <div> element can act as a container for whole sections of HTML, making CSS layouts, navigation, styling, and other presentational effects possible.

Script & Noscript Elements

The script tag can be used in the body of the HTML document as well as the head. The noscript tag is used as an alternate in case the browser cannot run the script. In that case the text or message inside of the noscript tag will be displayed instead. Both tags should be used together, but only one tag will be used by the browser.

Other Block-Level Elements

Several rarely-used block-line elements are:

This "Pre-Formatted Text" Element
Causes Whitespace to Show Up In Browser
Exactly Like It Is Entered         Between Tags

2. Inline HTML Elements

Inline HTML elements format text without interrupting the flow of the text. They fit right in, taking up only as much room as they need and not forcing new lines before or after. They can format a single character, or a infinite number of characters at a time. Inline elements can be used inside of block-level elements, but inline elements cannot contain block-level elements. They can only contain text and other inline elements. The link element, <a> </a>, and the image element, <img>, are both inline HTML elements.

HTML New Lines & Line Breaks

What is the difference between a new line and a line break? Only the spelling! The use of the HTML <br /> tag forces the line to be broken (line break) and to continue on the next line (new line). An example of the code is:

Using a line break is the HTML equivalent of pressing the "enter" key on your keyboard.

The Span Element

The <span> element is the inline equivalent to the <div> element. The span element has no actual meaning of its own, but is an invaluable tool when used for the purpose of CSS styling. It can act as a container for small sections of text, or even a single character that CSS can then be applied to without affecting the surrounding text.

Presentational Elements

HTML was originally created as a structural language, to which presentational, or visual elements were later added. CSS came along even later, and is now the preferred method of formatting/styling webpage content. HTML still supports several presentational elements which can be used, although their use is discouraged, and CSS styling is encouraged.

The valid presentational elements, along with the result of each element, are:

There are several presentation elements that have been deprecated, or become obsolete in current versions of HTML, and should not be used. They are easily replaced by their CSS equivalents.

Phrase Elements

Phrase elements are new additions to the HTML family, added in the current version (HTML 4.0). They normally appear similar to links on the webpage, but are not linked to anything. Instead, when the mouse pointer hovers over one of these elements the definition will show up in a little box.

Computer Phrase Elements

These elements will probably only be useful if your webpage is, like this webpage, involved in the discussion of various computer codes/languages and their results, or terminal output. So if you did not completely understand that last sentence, you probably won't need to study the following elements.

3. HTML Attributes & Styles

HTML attributes are characteristics of an element that provide additional information or formatting. Some attributes are unique to the HTML elements that they are used with, and other attributes can be used on nearly any HTML element. Attributes are placed in opening HTML tags in the following manner:

The style attribute is (or should be) the most commonly used attribute, also known as inline CSS. Although there are other attributes that can be used, some will not be supported by future versions of HTML, instead their functions will be a part of the CSS styling.

Below is a list of the attributes that are currently available. The attributes in red are those losing support by HTML.

4. HTML Images

Images are an important visual aspect of most webpages, but how do they get there? Since I'm not a great photographer, I'll skip over the part about take the pictures and transferring them to your computer, but I will discuss the HTML necessary to display the image on your webpage.

The image tag <img /> is an empty element, or an element without a closing tag. It uses the source attribute "src" to identify an image, and the path to the image.

And hey, look, it works!

Keep an eye on the file extension of the image, because there are several types of images that can be used, such as .jpg, .gif and .png but confusing them will keep the image from loading properly.

But isn't there an easier way to do it, without typing all of that in every time? I'm glad you asked, because in fact, there is! Our example used a full URL, which was not necessary, because the image was located on the same server as the webpage accessing the image. The following are alternatives to using the full URL:

HTML Image Attributes

Using the "alt" attribute, you can add a line of text to be displayed in case the browser cannot find or display the image properly. This is useful if, for example, the visitor is using a text-only browser, or has images disabled.

The height and width attributes are useful for similar reasons. You can add these attributes to tell the browser what size of a block to reserve for the image so that the browser does not have to move everything else on the page around when the image finally loads.

HTML attributes can vertically align an image to the left, right, or center so that text can wrap around the image, although it is better to use CSS for the job.

An example of this is the image to the left, which uses the "align" attribute with a value of "left" to produce this result.

5. HTML Text Links

How did you get here? Well, chances are you didn't drive, so you probably clicked on something called a hyperlink, or link, that brought you to this page. Links are HTML elements that, when clicked, will redirect you to another file, usually another webpage.

Links are very simple. They have an opening anchor tag, <a>, and a closing anchor tag, </a>, between which you place the text that will be seen on the webpage as a link. The hypertext reference, or "href" attribute defines the address of the link, or where you will go if you click on the link. The code looks like this:

HTML Image Links

Images can be linked as well, simply by placing the image tag in between the link tags, without additional spaces. In order to prevent a big blue border from appearing around your linked image, the border attribute can be used in the image tag. The code is:

HTML Email Links

Email links are formatted the same as text links, but the hypertext reference, or "href" attribute does not lead to another file. Using "mailto:", you can specify the email address to send to, as well as the subject and body of the email to be sent.

Be warned; using this method, anyone on the web can find your email, and you will eventually get a lot of spam. My suggestion? Learn PHP and make a form that sends the email to you without anyone seeing your email address!

HTML Download Links

Download links are normal text or image links that lead to a file that does not have a normal webpage file extension, usually prompting an immediate download of the file, depending on the visitor's browser settings.

6. HTML Lists

It is time to create order out of the chaos. Let's make a list of what we have learned so far.

HTML gives us three types of lists to choose from. Unordered lists are marked with bullets, ordered lists are marked with numbers, letters, or roman numerals, and definition lists include a description of each item or term.

Unordered Lists

Unordered, or bulleted lists begin with <ul> and end with </ul>. They have a series of <li> and </li> tags in between to identify each item on the list.

Bulleted lists have three bullet types available. The options are circle, square or disc. The default is disc.

Ordered List

Ordered, or numbered lists begin with <ol> and end with </ol>. They have a series of <li> and </li> tags in between to identify each item on the list.

Numbered lists have five options, or types available. The options are numbers, lower-case roman numerals, upper-case roman numerals, lower-case letters or upper-case letters. The preferred type is indicated in the opening <ol> tag.

Definition Lists

Definition lists begin with <dl> and end with </dl>. They have a series of <dt> </dt> "definition term" and <dd> </dd> "definition description" tags in between to identify and define each item on the list.

7. HTML Tables

HTML tables are not what your mother has you set before each meal. They are used as a method of arranging information on a webpage. Tables can be used to create an entire webpage's layout, which is no longer recommended now that CSS is widely supported and can do the job with less code.

Tables are made up of an unlimited number of rows, with each row broken down into the same number of cells to produce a column effect. Text, images, and all other HTML elements can be placed inside of each cell, but cannot be placed directly in the rows themselves.

The basic opening and closing table tags are <table> and </table>. <tr> and </tr> tags begin and end each row of the table. Inside each row, <td> and </td> tags, standing for "table data" begin and end each cell.

When we put these three tags together we get our first table.

Sooo... what's the point of a table again? More data! Once we add more data, we get to add more rows and cells to organize that data. Also, we can use the <th> and </th> tags to create "table header" cells in a table.

Rowspan & Colspan

Now we get to the confusing part. Do you remember how that earlier we mentioned that each row must be broken down into the same number of cells? What if you want one row to have two cells and the next row to only have one cell? Colspan can be used to span multiple columns and produce this effect, rowspan can combine two rows, or part of two rows, into one big cell.

Make any sense yet? I didn't think so. Let's take a look at the HTML:

If one of your table cells is blank, and you do not have data to put in it, your browser might make the cell look funny. You can fix that by putting an HTML "space" in that cell. The HTML space is " ".

You can increase or decrease the size of the border surrounding your table, even to the point of making it disappear. The "border" attribute is used inside the opening table tag. A value of 0, for example, <table border="0">, will make the border disappear, while a value of 5, <table border="5">, will make the border very thick.

Cell padding can create more elbow room inside of each cell. It is set in the opening table tag: &l7;table cellpadding="5">

Cell spacing adds space to the inside of the border around the table and between each cell. It, too, is set in the opening table tag: <table cellspacing="5">