HTML Basic Tags

It's inside the <body> tag where we will put all the text and images that will appear when a visitor comes to our page.

Headings Tags

There are different heading levels, they range from <h1> to <h6> and each of them have its own importance. The tag representing these heading levels is <hX> where X represents the level.

Example:

<h1>This is Heading level 1.</h1>
<h2>This is Heading level 2.</h2>
<h3>This is Heading level 3.</h3>
<h4>This is Heading level 4.</h4>
<h5>This is Heading level 5.</h5>
<h6>This is Heading level 6.</h6>

It is important to respect the hierarchy of the different heading levels, knowing that the highest element is the <h1>. Indeed, a <h2> tag will never be found above an <h1> in a document.

Since the <h1> title is the most important, it should also only appear once in a document.

You should not choose a title for the way it looks in the browser (which differs between browsers and can be changed using CSS), but for the hierarchical level it represents.

Paragraph Tag

As you type text in a word processor, you segment your text into paragraphs. In HTML it's the same thing, except we have to specify ourselves where a paragraph starts and where it ends. That's what the <p> tag is for.

Example:

<p>Here is a first paragraph.</p>
<p>Here is a second paragraph.</p>

Bold Tag

To make the text bold we frame it with the <b> tag:

Example:

<b>This text will appear in bold.</b>

Italic Tag

To italicize the text we frame it with the <i> tag:

Example:

<i>This text will display in italics.</i>

Underline Tag

To underline the text we frame it with the <u> tag:

Example:

<u>This text will be underlined.</u>

Strikethrough Tag

To strike the text we frame it with the <s> tag:

Example:

<s>This text will be struck through.</s>

Superscript Tag

To place the text in superscript we frame it with the <sup> tag:

Example:

<sup>This text will be in superscript.</sup>

Subscript Tag

To place the text in index we frame it with the <sub> tag:

Example:

<sub>This text will be in subscript.</sub>

Font Tags

1. Change the text color

To change the text color we use the color attribute of the <font> tag:

Example:

<font color="#ff0000">This text will be in red.</font>

Colors can be written in two ways:

  • In hexadecimal and preceded by a hash sign (#); Examples: #ff0000 => red, #00ff00 => green, #0000ff => blue.
  • Textual in US English; Examples: red, yellow, pink.

2. Change the text font

To change the text font we use the face attribute of the <font> tag:

Example:

<font face="verdana">This text will be in verdana.</font>

We tend to write font families rather than a single font. Indeed, it is possible that on a system different from yours the chosen font is not available and it is necessary that it can then display the text in a font close to the one you wanted to have.

The different fonts are separated by a comma in the order of selection if the previous one cannot be displayed.

Example:

<font face="verdana,sans-serif">This text will be in verdana or sans-serif if verdana is not available.</font>

3. Change the text size

To change the text size we use the size attribute of the <font> tag:

Example:

<font size="5">This text will be size 5.</font>

By default, the value of the size attribute is "3".

There are two ways to change the value of this attribute: and the possible values are integers from "1" to "7".

  • In absolute : The possible values are the integers from "1" to "7".
  • In relative : The possible values are the integers from "-2" to "+4".

And it is obviously possible to fill in all three attributes (color, face, size) at once in the same <font> tag.

HTML Basics