Working with Text

Headings

There are 6 levels of headings from h1 to h6 in html. h1 represents the main heading being the most important. Rest represents sub-heading.

Heading can be defined using the following syntax:

<hn>Heading text</hn>
where n represents numbers from 1 to 6.

span tag

span tag has no semantic value as such. It is used to add styling to your text. You will understand this after learning CSS.

Syntax for using span tag is as follows:

<span>Your text</span>

em tag

em tag is used for making emphasized text.

Text between em tags get italicized.

Syntax for using em tag is as follows:

<em>Your emphasized italics text</em>

strong tag

strong tag is used when you want to put strong emphasis on your text.

Text between strong tags get bold.

Syntax for using strong tag is as follows:

<strong>Your emphasized bold text</strong>

Making text bold

<b> tag is used to make your text bold.

Syntax for using b tag is as follows:

<b>Your text in bold</b>

Making text italicized

<i> tag is used to make italicized text.

Syntax for using i tag is as follows:

<i>Your text in italics</i>

Making paragraphs

<p> tag is used for making paragraphs.

Text between p tags contains blank lines before and after p tags.

Syntax for using p tag is as follows:

<p>Your text in italics</p>

Subscript

<sub> tag is used to make subscript text. Sub-scripted text gets smaller in size and lies below as compared to other text. It can be helpful in writing chemical formulas in chemistry.

Syntax for using sub tag is as follows:

<sub>Your text</sub>

Superscript

<sup> tag is used to make superscript text. Super-scripted text gets smaller in size and lies above as compared to other text.

Syntax for using sup tag is as follows:

<sup>Your text</sup>

Line Breaks

<br /> tag is used to give line breaks.

Syntax for using br tag is as follows:

Your text<br />

Things to do

  • Open notepad++.
  • Write the following code: 
    <!DOCTYPE html>
<html>
<head>
    <title>Working with Text</title>
</head>
<body>
<h1>This is my level 1 heading</h1>
<h2>This is my level 2 heading</h2>
<h3>This is my level 3 heading</h3>
<h4>This is my level 4 heading</h4>
<h5>This is my level 5 heading</h5>
<h6>This is my level 6 heading</h6>

<span style="color:#F00">You will understand span tag
     more clearly after learning CSS.</span><br />

<em>This is my Emphasized test</em><br />

<strong>This is my strong text</strong><br />

<b>This line of text is in bold</b><br />

<i>This line of text is in italics</i><br />

<p>This is my paragraph.<br />
I can add more text in here.
</p>

Chemical formula for water is H<sub>2</sub>O.<br />
2<sup>3</sup>=8
</body>
</html>
  • Save the file as "working with text.htm" and open it in a browser.
  • Don't forget to experiment with the code.
<< Core Elements Frames >>