The primary purpose of HTML tags is to specify the structure of a web page.
Elements are either block-level or inline. A block-level element is like a paragraph; it is a container that can be filled with other elements. Most block-level elements can contain any other sort of element. An inline element is like a word within a paragraph; it is a small component that is arranged with other components inside a container. An inline element usually only contains text.
The content of an element may be other elements or plain text. There is a limit on which elements may be nested within other elements (see Section 3.2.1).
This section briefly describes the important behavior, attributes, and rules for each of the common HTML elements.
An example of a link element is shown below.
<link rel="stylesheet" href="csscode.css" type="text/css">
Other sorts of links are also possible, but are beyond the scope of this book.
The value of an href attribute can be: a URL, which specifies a separate web page to navigate to; something of the form #target, which specifies an anchor within the same document that has an attribute name="target"; or a combination, which specifies an anchor within a separate document. For example, the following URL specifies the top of the W3C page for HTML 4.01.
The URL below specifies the table of contents further down that web page.
These elements should be used to indicate the section structure of a document, not for their default display properties. CSS should be used to achieve the desired weight and size of the text in general.
The table element has a summary attribute to describe the table for non-graphical browsers. There are also attributes to control borders, background colors, and widths of columns, but CSS is the preferred way to control these features.
The tr element has attributes for the alignment of the contents of columns, including aligning numeric values on decimal points. The latter is important because it has no corresponding CSS property.
The td element also has alignment attributes for the contents of a column for one specific row, but these can be handled via CSS instead. However, there are several attributes specific to td elements, in particular, rowspan and colspan, which allow a single cell to spread across more than one row or column.
Unless explicit dimensions are given, the table rows and columns are automatically sized to fit their contents.
It is tempting to use tables to arrange content on a web page, but it is recommended to use CSS for this purpose instead. Unfortunately, the support for CSS in web browsers tends to be worse than the support for table elements, so it may not always be possible to use CSS for arranging content. This warning also applies to controlling borders and background colors via CSS.
The code below shows an example of a table with three rows and three columns and the image below the code shows what the result looks like in a web browser.
<table border="1"> <tr> <td></td> <td>pacific</td> <td>eurasian</td> </tr> <tr> <td>min</td> <td>276</td> <td>258</td> </tr> <tr> <td>max</td> <td>283</td> <td>293</td> </tr> </table>
It is also possible to construct more complex tables with separate thead, tbody, and tfoot elements to group rows within the table (i.e., these three elements can go inside a table element, with tr elements inside them).
This entire element can be replaced by CSS control of borders.
This element should be used sparingly. In general, text should be broken into lines by the browser to fit the available space.
Anything can go inside an li element (i.e., you can make a list of text descriptions, a list of tables, or even a list of lists).
These elements have no attributes of interest. CSS can be used to control the style of the bullets or numbering and the spacing between items in the list.
The code below shows an ordered list with two items and the image below the code shows what the result looks like in a web browser.
<ol> <li> <p> Large bodies of water tend to absorb and release heat more slowly compared to large land masses. </p> </li> <li> <p> Temperatures vary differently over time depending on which hemisphere the pole is located in. </p> </li> </ol>
It is also possible to produce “definition” lists, where each item has a heading. Use a dl element for the overall list with a dt element to give the heading and a dd element to give the definition for each item.
It is possible to have other elements within a pre element. Like the hr element, this element can usually be replaced by CSS styling.
These can be used as “blank” elements with no predefined appearance properties. Their appearance can then be fully specified via CSS. In theory, any other HTML element can be emulated using one of these elements and appropriate CSS properties. In practice, the standard HTML elements are more convenient for their default behavior and these elements are used for more exotic situations.
Almost all elements may have a class attribute, so that a CSS style specified in the head element can be associated with that element. Similarly, all elements may have an id attribute, which can be used to associate a CSS style. The value of all id attributes within a piece of HTML code must be unique.
All elements may also have a style attribute, which allows “inline” CSS rules to be specified within the element's start tag.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.