Text and Images TAG

The Paragraph and Break Tags

Text in HTML documents is usually enclosed in paragraph tags, and new lines break using the break tag. For example, it you type in the following:

<p>This is my first line.
<br>
This is my second line.</p>
<p>This is a new paragraph</p>

...and open the document in a browser, you will see the two lines like this:

This is my first line.
This is my second line.

This is a new paragraph

<br /> or <br>?

In XHTML, "empty" tags, meaning tags lacking a closing tag, should have an " /" before the closing "bigger than" symbol. Examples are <b />,<<hr />, <img src="some_image.gif" />.

Bold, Italics, Underline

The three most common text decorations are bold text, italic text, and underlined text.

Bold text is created using the <strong> or the <b> tags.

Italic text is created with the <em> or the <i> tags.

Underlining is done with <u> tag.

Aligning Text

Text can be aligned by using the align attribute. Text can aligned to the right, left, or center. For example, if you need you text to appear at the right-hand side of the browser window, you need to format it like this. <p align="right">This text is aligned to the right.</p>

The above is an example of a situation that has more than one solutions. The same result can be accomplished using a simple CSS rule. The Primer will attempt to promote good practices, and as such, we recommend separation of content from presention via the use of CSS for formatting.

Headlines

There are six types of headline tags, or headings. Aside from providing a shortcut for creating larger text, they provide a logical hierarchy for ordering content.

While you can simulate the "headline effect" by playing with the text's weight and size, keep in mind that correct HTML is not about looks only: by using the headline tags you can semantically order your text.

The following code:
<h1>This is H1 Headline</h1>
<h2>This is H2 Headline</h2>
<h3>This is H3 Headline</h3>
<h4>This is H4 Headline</h4>
<h5>This is H5 Headline</h5>
<h6>This is H6 Headline</h6>

...renders like this:

The following code:

This is H1 Headline

This is H2 Headline

This is H3 Headline

This is H4 Headline

This is H5 Headline

This is H6 Headline

If you take a closer look, you will notice that the heading rendering is an image. Often, various publications platforms will have their own specifications for heading tags. The above image displays the default rendering in a mainstream browser.

Lists

Often, a page has to include bulleted or numbered lists of various things; in HTML, you don't have to format those manually. Using one of the several list types available, you can easily construct ordered lists of items.

Ordered Lists

The above code renders as:

Item 1
Item 2

An other exemple

The above code renders as:

Item 1

Item 2

Item 3

Unordered Lists

The above code renders as:

Item 1
Item 2

Images

This tag places graphic image in a document at the location of the element tag (an "inline image").

Src="URL" identifies the source file of the image.

Alt="string" a string of characters can be defined that will be displayed in non-graphical browsers. Non-graphical browsers otherwise ignore the IMG element.

Align="top|middle|bottom|left|right" sets the positioning relationship between the graphic and the text that follows it; values include:

top: the text following the graphic should be aligned with the top of the graphic.
middle: the text following the graphic should be aligned with the middle of the graphic.
bottom: the text following the graphic should be aligned with the bottom of the graphic.
left: the image is pushed to the left margin of the page.
right: the image is pushed to the right margin of the page.
Width="n" defines the width of the image.
Height="n" defines the height of the image.
Border="n" defines the border above and below the image.
Vspace="n" defines the vertical space around the image.
Hspace="n" defines the horizontal space to the left and right of the image.

Ismap :this attribute identifies the image as an image map, where regions of the graphic are mapped to defined URLs. Hooking up these relationships requires knowledge of setting an image map file on the server to define these connections.

Usemap="string" identifies which MAP element, as defined in the Name attribute, that you are using for a client-side image map.