Unit 2 - Basic Text Formatting
Now that you know what a tag is, now you need to learn the different tags and what they do.
Here are commonly used tags on text formatting and what they look like:
| Name |
Coding |
Result |
| Bold |
<b>Words</b> |
Words |
| Italic |
<i>Words</i> |
Words |
| Underlined |
<u>Words</u> |
Words |
| Strike through |
<s>Words</s> |
Words |
| Superscript |
<sup>Words</sup> |
Words |
Don't worry, I didn't forgot about font color! You'll learn about that in Unit 3.
For people who want a heading to stand out, the heading tag is used. The heading tag also has a number that follows it that tells the website how big the heading should be.
| Name |
Coding |
Result |
| Heading 1 |
<h1>Words</h1> |
Words |
| Heading 2 |
<h2>Words</h2> |
Words |
| Heading 3 |
<h3>Words</h3> |
Words |
| Heading 4 |
<h4>Words</h4> |
Words |
| Heading 5 |
<h5>Words</h5> |
Words |
| Heading 6 |
<h6>Words</h6> |
Words |
If you want to have linked text, you use the <a> tag. You can link another tag such as a DIV, an image, etc as long as you put the other tag between the <a> tag.
1. <a href="link address">
Although there are more, the two most common ways to have a link opened by the browser is by opening the link in the current tab or in a new tab with a target attribute.
*Note that opening a link in the current tab is the default and its target attribute can be left out.
| Name |
Coding |
Result |
| Current tab |
<a href="welcome.html" target="_self">Click Me</a> |
Click Me |
| New tab |
<a href="welcome.html" target="_blank">Click Me</a> |
Click Me |
Some other useful tags are
<p> which will start text on a new line,
<hr> which adds a horizonal line (does not need an end tag),
<br>
which adds a line break between two elements or text (does not need an end tag), and
<pre> which keeps text's existing format. For example, any line breaks
put in the raw coding will be kept with that tag.
Here are some uncommonly used formatting tags:
| Name |
Coding |
Result |
| Strong |
<strong>Words</strong> |
Words |
| Emphaized |
<em>Words</em> |
Words |
| Marked |
<mark>Words</mark> |
Words |
| Small |
<small>Words</small> |
Words |
| Deleted |
<del>Words</del> |
Words |
| Inserted |
<ins>Words</ins> |
Words |
| Subscript |
<sub>Words</sub> |
Words |
If you want a full list of the different ways to format text, go to
W3Schools. I have only included formats that you will use
often.