How to Format Text using HTML
HTML tags make elements. An element has a start and an end tag.
Consider the following Web document.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Hello World!
</body>
</html>
We can see the <title> element, which contains the text “My
First Web Page”, fits inside the <head> element. The <head> element fits inside the <html> element.
There are all kinds of useful elements, some of which can format text for us. Try adding the <h1> element to our example, like this.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The <h1> tag creates the largest size heading.
Headings come in six different sizes, <h1> through <h6>. The
largest heading is <h1> and the smallest heading is <h6>.
Other formatting elements include:
<b>Bold text</b>
<strong>Very important text, looks like bold text</strong>
<i>Italic text</i>
<em>Emphasized important text, looks like italic text</em>
<mark>Marked text, as if by a highlighter</mark>
<del>
Deleted text, has a strike through</del><ins>Inserted text, is underlined</ins>
<sub>Subscript text</sub>
<sup>Superscript text</sup>
<u>Makes text underlined</u>
Use <p> to group lines of text into a paragraph. And
don’t forget to add the end tag to each element.
Elements can be nested inside other elements, but they
should not overlap.
This is wrong.
<b>Bold. <i>Bold and italic.</b> Italic only.</i>
This is the correct way to do it.
<b>Bold. <i>Bold and italic.</i></b> <i>Italic only.</i>
When tested, browsers don’t enforce that rule. But future browsers might. So, get in the habit of doing it right. It also makes your code easier to read.
Another item of note, the <b> for bold text and the
<strong> for important text may look the same to the human eye, when
viewed through the browser window, but they have different meaning in your
code.
The <b> element is just for making text appear bold
and has no significant meaning. The <strong> element also means the text
is very important.
An example:
<b>Made you look!</b>
<strong>Warning:</strong> This is serious. Don’t ignore.
The same is true of the <i> and <em> elements.
And lastly, you should be aware that some characters are reserved in HTML. If you wanted the greater than character (>) to appear in your Web page, you will need to use the character entity code > or else the Web browser might think it is part of an element. For less than (<) use the code <.
Thank you for reading. In the next tutorial we will learn how to change the color and font style of our text.
How to Change Font Color and Style
Comments
Post a Comment