HTML5 FORMATTING TAGS CHAMPTER 7






SEVENTH TUTORIAL ON HTML FORMATTIN

HTML Formatting Elements


In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text


HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

 

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

OUTPUT

 

This text is normal.
This text is bold.

The HTML <strong> element defines strong text, with added semantic "strong" importance.
<!DOCTYPE html>
<html>
<body>

<P>This text is normal.</P>

<p><strong>This text is strong.</strong></p>

</body>
</html>
OUTPUT

This text is normal.
This text is strong.

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>
OUTPUT
This text is normal.
This text is italic.

HTML <small> Element

The HTML <small> element defines smaller text:

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML <small>Small</small>

Formatting</h2>

 

</body>

</html>

OUTPUT

 

HTML Small Formatting

 


HTML <mark> Element

The HTML <mark> element defines marked/highlighted text:

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML <mark>Marked</mark> Formatting</h2>

 

</body>

</html>

 

OUTPUT

 

HTML Marked Formatting

 

 

HTML <del> Element

The HTML <del> element defines deleted/removed text.

<!DOCTYPE html>

<html>

<body>

 

<p>The del element represents deleted (removed) text.</p>

 

<p>My favorite color is <del>blue</del> red.</p>

 

</body>

</html>

 

OUTPUT

 

My favorite color is blue red.

 

 

HTML <ins> Element

The HTML <ins> element defines inserted/added text.

<!DOCTYPE html>

<html>

<body>

 

<p>The ins element represent inserted (added) text.</p>

 

<p>My favorite <ins>color</ins> is red.</p>

 

</body>

</html>

OUTPUT

 

The ins element represent inserted (added) text.
My favorite color is red.

 

HTML <sub> Element

The HTML <sub> element defines subscripted text.

<!DOCTYPE html>

<html>

<body>

 

<p>This is <sub>subscripted</sub> text.</p>

 

</body>

</html>

 

OUTPUT

 

This is subscripted text.

 

 

 

HTML <sup> Element

The HTML <sup> element defines superscripted text.

<!DOCTYPE html>

<html>

<body>

 

<p>This is <sup>superscripted</sup> text.</p>

 

</body>

</html>

 

OUTPUT

 

This is superscripted text.

 

 

created by: unknown programmer



Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more