6b. Brief list of HTML Tags

The <!DOCTYPE> Declaration:

  • The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
  • It must only appear once, at the top of the page (before any HTML tags).
  • The <!DOCTYPE> declaration is not case sensitive.
  • The <!DOCTYPE> declaration for HTML is: <!DOCTYPE html>

<html> tag:

  • The <html> element is the root element of an HTML page
<html>
</html>

<title> Tag:

  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
<html>
<head>
   <tltle> My page </title>
</head>
</html>

<body> Tag:

  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

<h1*> Tag:

  • HTML headings are defined with the <h1> to <h6> tags.
  • <h1> defines the most important heading. <h6> defines the least important heading: 
  <!--(h1 to h6) -->
  <h1>Heading tag 1(big)</h1>
  <h2>Heading tag</h2>
  <h3>Heading tag</h3>
  <h4>Heading tag</h4>
  <h5>Heading tag</h5>
  <h6>Heading tag (small)</h6>

heading.png

<p> tag:

  • HTML paragraphs are defined with the <p> tag:
  • Example:
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>

paragraph.png

<pre> Tag

  • By default HTML ignores extra spaces & newlines.
  • pre tag is Used to display text as it is (without ignoring spaces & next line).
  • Example:
<pre> This
is a     sample
text.
</pre>
  • Live: 
  • This
is a          sample
text.

<br> Tag:

  • Used to add next line(line breaks) to your page.
  • Example:
<br>

<hr> Tag

  • Used to display a horizontal ruler, used to separate content
  • Example:
`<hr>`

Bold, Italic & Underline Tags:

  • Formatting Tags: (Bold, Italic, Underline, SuperScript, SubSCript)
    <b>This is bold text</b> <br>
    <i>this is italic text</i> <br>
    <u>This is underline text</u> <br>
    A<sup>2</sup> <br>
    O <sub>2</sub> <br>
  • Bold: <b> tag. [ This is bold text ]
  • italics: <i> tag. [ this is italic text ]
  • underline: <u> tag. [ This is underline text ]
  • strike: <strike> tag [ strike text ]
  • Superscript text: <sup> tag. [ A2]
  • Subscript text: <sub> tag. [O 2 ]
  • Single line break: <br> tag.
    • The <br> tag inserts a single line break.
    • This is an empty tag which means that it has no end tag. 
      <p>Be not afraid of greatness.<br> Some are bon great,<br> some achieve greatness,<br> and others have greatness thrust upon them.</p>

<big> & <small> Tags

  • Used to display big & small text on your page
  • Example:
This is <big> Big </big> & <small> Small </small> text.
  • Live: This is Big & Small text

<sub> & <sup> Tag

  • The <sup> tag defines superscript text. which appears half a character above the normal line.
  • The <sup> tag defines subscript text. which appears half a character below the normal line.
  • Example:
H<sub>2</sub>O is made of H<sup>2+</sup> & O<sup>2-</sup>
  • Live: H2O is made of H2+ & O2-

<marquee> Tag:

  • It is used to create a scrolling piece of text or an image.
  • Depreciated in HTML5, should be used CSS instead.
  • Example:
<marquee>
   <--- contents --->  
</marquee>
  • Live Example:
    This is live Example of marquee Tag.

<img> Tag

  • HTML images are defined with the <img> tag.
  • The source file (src), alternative text (alt), width, and height are provided as attributes:
    • src is for image location.
    • alt is for caption.
    • height & width is for image size.
  • Example:
    W3Schools.com
<img src="address or path of the image" alt="caption if image not loaded" height="size">

<a> tag:

  • This is called Anchor Tag.
  • HTML links are defined with the <a> tags.
  • This is controlled by attributes:
    • herf: The link's destination is specified here.
    • target="_main": to open the link in a new tab.
    • <img src="link">: This is to use image instead of text for link (clickable link).
  • Example:
<a href="address of the link">caption </a>
<a href="address of the link"><img src="https://logos.kiwibrowser.com/github.com"> </a>

Next Chapter>>