HTML 5 Text Level Semantics
Mastering HTML5 - Part 5
Forward: In this part of the series we look at what is titled, Text Level Semantics, in HTML5.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
The em Element
The double-tag em element emphasizes its text content. It makes text slightly bigger and italics it. You will really see the effect of the em element, when you try the code below.
The strong Element
The double-tag strong element makes its text content strong (bold).
The small Element
The double-tag small element is used to make its text content small (small print). It can be used for disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements. See illustration below.
The b Element
The double-tag b element is used to bold text. See illustration below.
The i Element
The double-tag i element is used to italics text. See illustration below.
Try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>dl illustration</title>
</head>
<body>
Normal Text <br>
<em>Text to emphasize</em> <br>
<strong>text to make strong</strong> <br>
<b>Text to Bold</b> <br>
<small>Text to make small e.g. copyright induication</small> <br>
<i>Text to italics</i> <br>
</body>
</html>
The q Element
This is a doubled-tag element that changes into enclosing double quotes at the browser. Try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>dl illustration</title>
</head>
<body>
He said, <q>I am a humble man.</q>
</body>
</html>
The double-tag mark element is used to highlight a short portion of text within a larger quantity of text. Try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>dl illustration</title>
</head>
<body>
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text <mark>He is great!</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</body>
</html>
The span Element
The span element has some similarities to the mark element. The mark element just highlights the text automatically. With the span element you have to use the language called CSS (see later) to format the text (or give it a color). The span element is a double-tag element. Read and try the following code, which illustrates the use of the span element:
<!DOCTYPE HTML>
<html>
<head>
<title>dl illustration</title>
</head>
<body>
<p>
text text text text text text text text text text text text text text text text text text text text text text text text <span style="color:blue" >He is great!</span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</body>
</html>
The sub element is a double-tag element, used to produce a subscript. The sup element is a double-tag element, used to produce a superscript. Read and try the following code:
<!DOVTYPE HTML>
<html>
<head>
<title>Illustration</title>
<head>
<body>
Today is the 5<sup>th</sup> day of the month.<br>
15<sub>8</sub> means fifteen base eight.
</body>
</html>
Well, I have not talked about all the elements under this topic, in this tutorial. The ones I have not covered will either be dealt with as individual tutorials in this series, or will be dealt with in my blog under advanced topics.
So, we take a break here. We continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT