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.
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.
<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.
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.
<p>Here is a first paragraph.</p> <p>Here is a second paragraph.</p>
To make the text bold we frame it with the <b> tag:
<b>This text will appear in bold.</b>
To italicize the text we frame it with the <i> tag:
<i>This text will display in italics.</i>
To underline the text we frame it with the <u> tag:
<u>This text will be underlined.</u>
To strike the text we frame it with the <s> tag:
<s>This text will be struck through.</s>
To place the text in superscript we frame it with the <sup> tag:
<sup>This text will be in superscript.</sup>
To place the text in index we frame it with the <sub> tag:
<sub>This text will be in subscript.</sub>
1. Change the text color
To change the text color we use the color attribute of the <font> tag:
<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:
<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.
<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:
<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.