HTML5 Text Element Basics
Basics of HTML 5 - Part 9
Foreword: In this part of the series I talk about elements that are used to contain text.
By: Chrysanthus Date Published: 3 Apr 2015
Introduction
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 indication</small> <br>
<i>Text to italics</i> <br>
</body>
</html>
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 mark Element
The double-tag mark element is used to highlight a short portion of text (with background color) 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>
For the expression, “style="color:blue"” in the code, style is an example of an HTML attribute. "color:blue" is an example of what is known as CSS coding (see later).
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. 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 discussed will be dealt with later. Stay in my blog.
For now, we take a break. We continue in the next part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT