Introduction

Hypertext Markup Language (HTML) is the predominant language for creating web pages. HTML consists of a rich set of elements for representing text, images and more. These elements act as the building blocks for creating web pages. Each HTML element is represented as a text enclosed in angle brackets ex. <img>. A HTML element can contain other HTML elements. There are restrictions for a HTML element to wrap other elements for ex. a <p> element should not contain other block elements like <div>.

Most developers use only a handful set of HTML elements for building web pages. Although HTML not implies restrictions on using a particular element for representing a particular piece of text, most of the cases developers end up using elements like <p>, <div> or <span> to represent variety of text information unknowing the richness of semantics HTML supports. HTML dedicates a separate element to represent quotes, not only that it contains different elements to represent different kind of text information. In this article we are going to dig little deeper into the land of HTML and explore the rare elements that most of us are not much aware of. This article not covers all the rare elements and some of them have been eliminated or missed out. Also, this article not covers the new elements that has been created in HTML5.

Using the right element to represent the right piece of information make your web pages look well designed and more efficient. Applying styles and adding behaviors to the web pages would be lot easier. It also helps a lot for non-visual browsers, speech synthesizers, translation systems and search engines.

Let start digging.. hopefully we will find some new angle bracket friends <☺>

<abbr>

We extensively use abbreviations in documents but mostly we ignore to specially represent them. HTML has a separate element <abbr> to represent abbreviations.

<abbr title="Professor">Prof.</abbr>

In the above example the author has used Prof. as the shorthand abbreviation for Professor. We can nicely wrap it with the <abbr> element to represent it as an abbreviation providing the complete expansion in the title attribute, this helps HTML document processing devices to know what the abbreviation stands for.

<acronym>

As the name this element is used to represent acronyms in HTML documents. The usage of this element is very similar like the <abbr> element. Whenever you are writing an acronym in a HTML document think about using <acronym> element.

<acronym title="Hypertext Markup Language">HTML</acronym>

<del>

Sometimes we need to track the text edits in documents. The <del> element is used to represent a deleted text. It can be employed to represent both inline and block text. The enclosed text is displayed as striked out in the browser.

The latest version of .NET framework is <del>3.5</del> 4.0.

The price of book "Killing Lincoln: The Shocking Assassination that 
Changed America Forever" is <del>$28.00</del> $15.23.

This element has two important attributes.

cite="URL"

Refer to a source document that says why the document was changed.

datetime="YYYY-MM-DDThh:mm:ssTZD"

Specifies the date and time the change was made.

<dfn>

Normally to give additional definition for the enclosed text we wrap it with <a> or <span> element and set it’s title attribute with the definition. Though it’s not wrong it is better to use <def> element for that. Browsers like IE, Chrome display the wrapped text as italic by default.

<def title="JavaScript library created by John Resig">jQuery</def> is used for 
client-side scripting.

<dl>

We meet situations where we want to represent information as a list ex. to list out the top ten movies in hollywood or to display the famous scientists and their inventions. HTML comes with <ol>, <ul>, <menu>(depreceated) and <dl> elements to represent lists. People are much aware of the <ol> and <ul> elements not with the <dl> element. This <dl> element is used to represent a collection as key-value pairs for ex. famous scientists and their inventions. Normally people use <table> element to achieve that but I recommend to go with <dl>.

The <dl> element has two child elements <dt> and <dd>. <dt> element is used to represent title or term and the <dd> is used to represent the definition.

<dl>
	<dt>Archimedes</dt>
	<dd>Archimedean principle, famous theory of buoyancy and many 
	mathematical and mechanical discoveries. You can read more in detail 
	on Archimedes inventions</dd>

	<dt>Galileo Galilei</dt>
	<dd>Laws of motion</dd>

	<dt>Sir Isaac Newton</dt>
	<dd>Theory of Gravity, Differential Calculus and more</dd>

	<dt>Albert Einstein</dt>
	<dd>Theory of Relativity, photoelectric effect and lots more</dd>
</dl>

<ins>

This element is used same as <del> element to keep track of the edits but for the reverse purpose, to represent text that has been inserted into the document. The <ins> element can either represent inline or block text. It has both cite and datetime attributes. The text inside the <ins> element is underlined by browsers.

David stole mobile, laptop <ins>and a watch</ins> from Goliath.

<noscript>

JavaScript is not always enabled in browsers. Sometimes users manually disable scripts in browsers for security and other reasons. It is good to display an alternate text for those browsers and <noscript> element is just for that.

<noscript>
	Hey, script is disabled in your browser, trust me! I don’t do any harm.
</noscript>

<optgroup>

This is one of the nice element I like and it is a child element of <select> element used to group related options.

<select>
	<optgroup label="Jaguar">
		<option>XJ</option>
		<option>XK</option>
		<option>XF</option>
	</optgroup>
	<optgroup label="Mercedez Benz">
		<option>CL</option>
		<option>GL</option>
		<option>SL</option>
	</optgroup>
</select>

This element has a label attribute used to give a title for the group and that is displayed in the browser.

<pre>

HTML doesn’t cares much about the entered lines and typed spaces. The <pre> element is used to display the text exactly they are typed in. Text within a <pre> element is usually displayed in a monospace font like Courier.

<pre>
	Dear Clara,
		
		I don't know how to say this. I've been waiting for a 
		long time.. but not any more!
			            
		When you are going to return that 10 dollars?
												 
										- Vijay
</pre>

<q>

The <q> element is used to specially represent quotes in HTML documents. This element has cite attribute that is used to point the source document from which the quotation is taken. This element is used to enclose inline quotes. There is one more element called <blockquote> it’s purpose is same as <q> element but used to represent block quotes. Some browsers automatically insert quotation marks around the text wrapped with <q> element.

<p>It was a <q>do or die</q> action.</p>

Row Group and Column Group elements of <table>

<table> element is a well known element and used for tabular display of data. The <table> is a complex element and it contains many child elements. Most developers only use two child elements <tr> for creating rows and <td> for creating cells. But it also contains some other important elements like <caption>, <colgroup>, <thead>, <tbody> and <tfoot>. The elements <thead>, <tfoot> and <tbody> are called as Row Group elements and <colgroup> is called as Column Group element. The presence of Row Group and Column Group elements speeds up the table display. The Row Group elements also helps in printing long tables for which the head information should be printed on each page.

The below diagram shows the important child elements of <table> int the order they should appear.

Here is an example of using <table> to display the coming books from amazon.

<table>
	<caption>Coming Soon in Books</caption>

	
	<colgroup span="1" style="background-color:#aaa;"></colgroup>
	<colgroup span="3" style="background-color:#eee;"></colgroup>

	
	
	<thead>
		<tr>
			<th>Sl. No.</th>
			<th>Book</th>
			<th>Author</th>
			<th>Price</th>
		</tr>
	</thead>

	
	<tfoot>	
		<tr>
			<td colspan="4">www.amazon.com</td>
		</tr>
	</tfoot>

	
	<tbody>
		<tr>
			<td>1.</td>
			<td>Steve Jobs</td>
			<td>Walter Isaacson</td>
			<td>$17.88</td>
		</tr>
		
		<tr>
			<td>2.</td>
			<td>Diary of a Wimpy Kid: Cabin Fever</td>
			<td>Jeff Kinney</td>
			<td>$7.67</td>
		</tr>
		
		<tr>
			<td>3.</td>
			<td>Inheritance (The Inheritance Cycle)</td>
			<td>Christopher Paolini</td>
			<td>$13.98</td>
		</tr>
		
		<tr>
			<td>4.</td>
			<td>The Litigators</td>
			<td>John Grisham</td>
			<td>John Grisham</td>
		</tr>	
	
	</tbody>
</table>

Here is the brief summary of the <table>'s child elements.

<caption>

This element is used to give a brief summary for the table and it should appear immediately following the table start tag. The caption’s position as displayed in the browser can be controlled using the CSS caption-side property.

<colgroup>

This element is used to group a set of columns in a table. This element should appear before any <tr> element. The number of columns in a group is specified either by the value of span attribute or by a tally of columns within the group.

<thead>

As the name it is used to represent the row that display the column headings. It is one of the row group elements. <thead> element should contain atleast one <tr> element.

<tbody>

Contains a group of rows that represent the body of the table. The <tbody> element also helps for scrolling the body of the table independently of its head and foot. It should contain alteast one <tr> element.

<tfoot>

Defines the footer part of the table. As per HTML standard the <tfoot> should appear before the <tbody> element.

<var>

Used to represent a program variable. Browsers displays the wrapped text usually in italics.

<var>myString</var> = "Hello World!";

Summary

In this article we have seen some of the beautiful elements in HTML that are not so frequently used. HTML is not only about structure but it is also about how we represent information by using the right element. This article is just a starting point and recommends you to explore more HTML elements and create documents that are not only rich in semantics but also very effective.