An Overview of Empty Elements in HTML

An Overview of Empty Elements in HTML

In HTML the term “empty element” refers to elements defined by self-closing tags which are tags that do not require a closing tag. “This is generally because rather than defining an area of the page as one structural element or another, these tags define objects that should be displayed at that point on the page.” (Virtual Workshop – A Brief Guide to HTML). Some types of self-closing tags, such as ones that define imaging or line break elements, are used frequently in HTML so it is important to know the types, proper use and structure of these tags when creating web pages. The following text will give some examples of self-closing tags and how HTML employs these tags in the structure of a web page.

The self-closing tag hr is a horizontal rule element for positioning and formatting a horizontal line on a web page (hr – Horizontal Rule). The hr element uses the align, noshade, size and width attributes to specify the physical properties of the line on the web page.

The tag br is a line break element that is used to force a break in a line of text. The CLEAR attribute can be used with the br element to move text to the top left of a floating object such as an image (br – Line Break). In the following example:

The second paragraph would be placed below the floating image.

The tag img is an element that embeds an image in the current document at the location of the element’s definition (Objects, Images, and Applets in HTML documents). The img element has numerous attributes that can be used with it but a common one is the src (source) attribute which contains the directory path of the image file, in the event that the image file is not in the same directory as the web page document. An example of a image element with a source attribute would be:

The frame tag enables the display of more than one HTML document in the same browser window (HTML Frames). It is used within the frameset tag and specifies the name of the document to be displayed in the web browser. In this example the HTML document ABC will be displayed in the first column designated by the frameset tag and the document DEF in the second column:

The meta tag is inserted within the head tag of a web document to provide information about the page to a web browser (SearchEngineWatch: How To Use HTML Meta Tags). The description of a web page can be placed within a meta tag and a search engine would then display that description on the web browser. For example,

would enable the text declared in the content attribute to display if the web page was to be listed in the results of a search.

The link tag may only appear within the head tag of a web document to define the relationship between two linked documents (HTML Link Tag). There are numerous attributes that can be used with the link tag; some of the more common are the href attribute, which identifies the target URL of a resource, and the rel attribute which defines the relationship between the current document and the targeted resource. The following example defines a link to an external style sheet:

When using self-closing tags within HTML no mechanism to close the tag is required. However this is not the case when employing self-closing tags in other types of web page development languages. For example, in XHTML a mechanism to close a tag defining an empty element is required (tutorial). Therefore it is good practice to always place a space, then a forward slash ( / ) at the end of a self-closing tag, immediately before the closing angular bracket ( > ). Also, always remember to enclose all values of element attributes in quotes. An understanding of the protocols for the use of self-closing tags when defining empty elements is essential when working with HTML. Familiarity with the employment of these tags within the structure of a web page will significantly contribute to the functionality and appearance of the page.


References

Virtual Workshop – A Brief Guide to HTML
Retrieved August 01, 2007 from http://www.keithjbrown.co.uk/vworks/design/design_4.php

HR – Horizontal Rule
Retrieved August 01, 2007 from
http://www.htmlhelp.org/reference/html40/block/hr.html

BR – Line Break
Retrieved August 01, 2007 from
http://www.htmlhelp.org/reference/html40/special/br.html

tutorial
Retrieved August 02, 2007 from
http://www.easytutorials.eu/tutorial.html

Objects, Images, and Applets in HTML documents
Retrieved August 02, 2007 from
http://www.w3.org/TR/html4/struct/objects.html#h-13.2

HTML Frames
Retrieved August 01, 2007 from
http://www.w3schools.com/html/html_frames.asp

SearchEngineWatch: How To Use HTML Meta Tags
Retrieved August 01, 2007 from
http://searchenginewatch.com/showPage.html?page=2167931

HTML Link Tag
Retrieved August 03, 2007 from http://www.w3schools.com/tags/tag_link.asp