HTML Elements

An HTML element (also known as HTML tags) are the fundamental building blocks of all Web pages — think of them as labels that tell the Web browser information about a document's structure and layout. For example, an HTML element might say: "This is a title", or "this is a heading", or "This is a paragraph", etc. This section covers the basic rules for constructing and using HTML elements.

HTML Element Syntax

In order to be understood by a Web browser, HTML elements must adhere to some basic syntax rules. All elements start with an opening tag (or start tag) and end with a closing tag (or end tag), for example, the <title> element, a common HTML element is shown here:

<title>My First HTML Page</title>

• An HTML element starts with an "<" angle bracket
• Next is the element name (i.e: "title")
• Followed by a ">" angle bracket, which closes the opening tag
• Next is the element body content (i.e.: "My First HTML Page"), which is the text that is being affected by the markup.
• The closing tag starts with an "<" angle bracket, immediately followed by a "/" forward slash
• Next comes the name of the element being closed (i.e. "title"
• Finally a ">" angle bracket terminates the closing tag

Note that the only difference between an element's opening tag and its' closing tag is the leading slash character (i.e. the "/"). An HTML element may contain text and/or other nested elements, or they can be empty. An empty element looks like an abbreviated combination of both an opening and closing tag, for example, the HTML <img> tag, used to display images on a Web page, as shown here:

<img src="/images/myphoto.gif" />

• An empty HTML element starts with an "<" angle bracket
• Next comes the element's name (i.e. "img")
• This is followed by any attributes that the element may contain (more about this in the next section.)
• The closing tag starts with a "/" slash,  immediately followed by a ">" angle bracket which terminates the empty element

Empty elements like the <img> tag for displaying images do not surround any body content. Rather, they consist of a single tag which acts as both an opening and closing html element. Think of an empty HTML element as a placeholder for something atomic, like an image, a line break, etc.

Parent and Child Elements

If an element contains other elements, it is considered to be the parent of the enclosed child element(s). Any elements contained in the child element are considered to be the descendants of the outer, parent element, as shown here:

<div> <h1>My Vacation Photos</h1> <p>Here are photos from my summer vacation ... <em>the best</em> vacation ever! </p> <img src="myphoto.jpg"/> </div>

• The <div> tag is parent to the <h1>, <p>, and <img> elements
• Conversely, the <h1>, <p>, and <img> elements are children of the <div> element
• The <p> element is parent to the <em;> tag
• The <em> tag is child to the <p> element, and a descendant of the <div> element

A Webpage can therefore be thought of as structured hierarchical relationships of elements flowing throughout a document. When elements contain child elements, each element must be properly nested, i.e., they must be fully enclosed by its parent. Whenever you use a closing tag, it should correspond to the last unclosed, opening tag. In other words, first open A then open B, then close B, and then close A.

HTML Elements: Summary

In this HTML element tutorial, you learned:

• Understanding the purpose of HTML elements and the basic rules for constructing them.
• Adding markup to a document so that it can be properly rendered by a Web browser.
• Understanding basic HTML syntax for paragaphs, titles and headings, etc.
• Differentiating between empty and non-empty HTML elements.
• Understanding the difference between parent and child elements and proper nesting.