Introduction

This page recalls the following basic elements and their attributes: b, big, br, code, hr, img, pre, ol, and ul. Though some of these attributes are or seem to be obsolete, they can save one quite a bit of typing and improve readability of the document significantly.

Bold face text

b - the bold face text tag. Browsers display the content of the associated element content in bold letters. The following line makes the browser display an example of a bold text

<b> This is a bold text example. </b>
		

This is how your browser renders it:

Enlarged text

big - the browser sets the content of the corresponding element in bigger letters.

<big> This text is big. </big>
		

produces:

This element is deemed by HTML 5 as non-standard and its use is discouraged. Yet, it can be handy so long as it works.

Forcing a line breaking

br - the line break tag. It determines a self closing element , which tells the browser to terminate the line and start a new one. It is adviced to leave a space before the closing slash.

Presenting code

code - the tag of the computer code element. Browsers interpret content of the code element as monospaced text. That is a fixed-width text with typewriter or teletypewriter fonts. In combination with the pre tag it is well suited for presentation of computer code. For example, the next snippet makes the browser display a basic Hello World C program.

<pre><code>
#include <stdio.h>
int main()
{   
   printf("%s", "Hello World!");
}
</code></pre>
		

Preserving word spacing and line breaks

pre - forces the browser to preserve the spacing of the document text. Without using it, by default, extra spaces in text are skipped. For its use see the example above.

Italicized text

em - tag of the emphasizing element. Browsers display its content as italicized text.

<em>This text is italicized.</em>
		

displays:

Text separation

hr - horizontal rule determines a self-closing element that draws a horizontal line. Its use is demonstrates this snippet:

<hr style="width:200px; margin-left:20px; float:left;"/>
		

The result is a nice straight line.

The hr element can often be replaced by utilizing the CSS border style property.

Including images

img - tag determines the image self-closing element. It allows us to place images in HTML documents. The image formats supported by most browsers are GIF, JPEG and PNG. Important attributes are src, alt, width, height, border and align. src is the name of the source file, alt is the alternative text and width and height set the sizes of the picture. The border attribute draws a line around the image. align has values top, middle, bottom, left and right and they determine how the text flows around the image. Typical usages of the img element are:

<img src="logo.gif" alt="company logo." 
			width="150" align="left"/>
<a href="bigpic.jpg">< img src="thumbpic.jpg" 
			alt="Art Photo"/></a>
		

Ordered list of items

ol - tag of the ordered list element. It helps us display ordered lists. The central attribute is type, which takes values 1, a, A, i, and I , respectively. The meaning is listed next:

The ol element encloses the list items kept in li elements. A typical example of a code displaying an ordered list is

<ol>
   <li> first item </li>
   <li> second item </li>
</ol>
		

The result is:

1. first item
2. second item

Unordered list of items

ul - tag is used to create unordered lists of items, such where no numbers or letters precede the items. Only bullets are displayed in front of the item. The type of the bullets can be disc, square, or circle. Its application is very similar to that of ol. See the frame set example for usage.

Definition list

A definition list is useful, say, for presentation of several item lists. Compared to the itemized list it has no bullets or numbering, but has a place that can be used as a list header. A definition list is enclosed in a dl tag. The dl element contains a dt (definition term) element, which can enclose text and formatting elements only, followed by a dd (definition description) element, which can consist of further formatting blocks. Here is a simple code example.

<dl>
   <dt>Ingrediences:</dt>
   <dd>
      <ol>
         <li> A pack of pudding.</li>
         <li> Milk. </li>
      </ol>
   </dd>
   <dt>Preparation and Use:</dt>
   <dd>
      <ol>
         <li> Cook the pudding.</li>
         <li> Eat the pudding. </li>
      </ol>
   </dd>
</dl>
		

Ingrediences:

1. A pack of pudding.
2. Milk.

Preparation and Use:

1. Cook the pudding.
2. Eat the pudding.

References

W3C HTML 5, Text-level semantics , Retrieved 2013

W3C HTML 5, Grouping content , Retrieved 2013