Elements
In (X)HTML, angular brackets are used to designate the opening and closing tags of elements, or objects on the page. A common element is <p> (paragraph). Anything betwee the element's opening and closing tags is called the content. Hence the content of the paragraph element <p>Hello</p> is "Hello". The element <br /> (line break) technically does not have any content. Both are examples of semantic elements since their names describe what they are: a paragraph and a line break. Some elements are non-semantic. For instance, <b>Hello</b> does not describe what "Hello" but how it looks (bold). Increasingly, non-semantic elements like this are becoming deprecated, and CSS is being used wherever possible to determine the presentation.
Unless modified by CSS, every element will appear on the screen with the default styling programmed in the browser. A good example is the paragraph element. Consider the following code:
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.</p>
This will appear in the web page as
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.
Notice that there is a space between the two paragraph elements. Most (visual) browsers display this space between paragraph elements as an equivalent to the indentation we normally associate with paragraphs in print. CSS can be used to emulate the printed convention:
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.
Note that we should think carefully before doing this. The very fact that the two paragraphs are contained in <p> elements identifies them as paragraphs. Hence, if we have access to the code, we do not necessarily need the visual cues of space or indentation to identify them as such. This is important for accessibility. When we wish to present the paragraphs on screen, we can choose whatever visual cue is appropriate. The convention in web pages tends to be to render paragraphs with space between them, but no indentation.
Block or Block-Level Elements
Block (or Block-Level) Elements can be thought of as boxes or rectangles. Each block element starts on a new line. Block elements can contain other block elements (like boxes inside of boxes). The Wikipedia article on HTML elements contains a useful list of block elements and their functions, including which ones are deprecated. The most common block elements are headings and paragraphs.
Headings are elements that mark the beginnings of sections of a web page and normally contain the titles of the sections. There are various levels of headings which are used for sections and subsections. The level of the heading is indicated by a number in the heading element. The various levels are <h1>, <h2>, <h3>, <h4> (it is possible to have further levels, but some browsers may not recognise them).
Paragraphs are blocks of text. If used in a strictly semantic way, their content should be a distinct block of text unified by a single topic (a rough definition of a paragraph), but (X)HTML paragraph elements are often used for other uses (such as line breaks), not always with good reason. In some cases, text would be better placed in <div> or <span> elements, discussed below.
A typical web page might be structured as follows:
<h1>Page Title</h2>
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<h2>Subtitle</h2>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.</p>
Most browser automatically display headings in a larger and bolder font, with <h1> being the most prominent. Hence the display of the code above might look like this:
Page Title
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Subtitle
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.
The browser's default styling for both headings and paragraphs can be modified using CSS.
Other block elements, such as tables and lists, will be discussed later in this tutorial.
Web pages frequently contain sections which do not fit semantic descriptions of designated block elements like headings and paragraphs. For these sections a semantically empty element called <div> exists. The <div> element can be used for a variety of purposes. Since <div> elements can have their size and position adjusted through CSS, one of the most common uses is for page layout.
Inline Elements
Inline Elements occur within the flow of the text, just as inline styling does. Perhaps the most important is the <a> (anchor) element, which is used to create links. Compare the following lines of code:
<p>Some text</p>
<p>Some text containing <a href="#">a link</a></p>
This will display the following text:
Some text
Some text containing a link
The attribute href indicates where the link goes. In the example above, it has been left blank.
Notice that the anchor element does not start a new line. For this reason, inline elements are often used to style text. For example, the code <p><strong>Some text</strong></p> will display the text in bold. However, since "Some text" is really the content of the <p> element, not the <strong> element, authors wishing to separate their content from their style may not wish to take this approach and may prefer to use CSS to render their text in bold. One method is to use inline styling, such as <p style="font-weight:bold;">Some text</p>, though this is not the only solution.
A problem arises when you wish to change the styling in the middle of an element. For instance, what if you wanted to display the following text:
Some text in different colours
Here the <p> element contains texts in two colours. A special inline element called <span> can be used to style a portion of the text separately:
<p style="color:blue">Some text in <span style="color:red">different colours</span></p>
The Wikipedia article on HTML elements contains a useful list of inline elements and their functions, including which ones are deprecated. Note: Because this type of presentational markup is useful only for visual browsers, the W3C recommends that CSS be used instead. Several common inline element such as <font> (to change the font) and <u> (underline) are now officially listed as deprecated.
Empty Elements
The content of most elements is contained between the element's opening tag and its closing tag. However, in a few cases, elements have no content. To common cases are <br /> (forced line break) and <hr /> (horizontal rule, which produces the horizontal lines you see on this page). These elements have no content. Recall that in XHTML, they are required to have closing slashes (<br> and <hr> are acceptable in HTML).
Other common empty elements are references to external source files. For example, <img src="image.jpg" /> indicates that an image should be inserted, and src="image.jpg" directs the browser to the file that contains the image.
Some empty elements are block elements (e.g. <hr />) and others (e.g. <br />) are inline elements.