Typography:

Tags of Typography:

Typography refers to the activity related to text typing. All the headings, paragraphs and their formatting undergo this activity. So the tags are:

Heading tags
Paragraph tags
Bold / Italic / Underline
Subscript
Superscript
Strike
Teletype
Font

Heading tags: HTML supports six different sizes of headings. For every size, there is a tag. It all starts from the largest <h1> and ends at the smallest <h6>.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<h1>Ourtutorials</h1>
		<h2>Ourtutorials</h2>
		<h3>Ourtutorials</h3>
		<h4>Ourtutorials</h4>
		<h5>Ourtutorials</h5>
		<h6>Ourtutorials</h6>
	</body>
  </html>

Output:

Paragraph tag: It is a simple tag  ... . Any text that is written inside of this tag structure appears as a paragraph in the browser

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p>We, at Ourtutorials, provide best quality E-Learning material. The text alongwith images, all are designed and presented in such a way that a candidate can get most of the concept very veasily.</p>
	</body>
  </html>

Output:

Bold / Italic / Underline: These tags make the text bold / italic / underlined on screen respectively.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p><b>Ourtutorials</b></p>
		<p><i>Ourtutorials</i></p>
		<p><u>Ourtutorials</u></p>
	</body>
  </html>

Output:

Subscript: Subscript is the style of writing text below the baseline. For example- in a chemical formula H₂SO₄ , 2 and 4 are subscripts.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p>H<sub>2</sub>SO<sub>4</sub></p>
	</body>
  </html>

Output:

Superscript: Subscript is the style of writing text above the baseline. For example- in a mathematical formula A²+B² , 2 is superscript.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p>A<sup>2</sup>+B<sup>2</sup></p>
	</body>
  </html>

Output:

Strike: Strike makes an effect of a horizontal cut across the entire text it is imposed over. For example- a price in e-commerce website is given as: ~~Rs. 1500.00~~ Rs. 1000.00

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p><strike>Rs. 1500.00</strike> Rs. 1000.00</p>
	</body>
  </html>

Output:

Teletype: Teletype is a style of text in which words appear as have been printed by a tele-printer or typewriter.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p><tt>Ourtutorials</tt></p>
	</body>
  </html>

Output:

Font: Font is a popular tag in HTML. It works for formatting the text up to some extent. We can set a particular font and a particular color for the text.

tag is used with following two attributes

face: its value can be any font name like- Calibri, Times New Roman etc.

Ourtutorials

color: its value can be any color name like- red, green, blue, pink etc.

Ourtutorials

Example:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p><font face="monotype corsiva" color="red">Ourtutorials</font></p>
	</body>
  </html>

NOTE: However font as a tag is not used very frequently in modern web design. Instead, CSS properties are applied.