Most commonly known HTML tags..!!

Most commonly known HTML tags..!!

Semantic HTML

What is HTML?

HTML -> HyperText Markup Language

what-is-html.jpg

Html is a standard markup language that is a basic building block that defines the meaning and structure of web content. Html is also referred to as the skeleton of the webpage with the human body analogy. it defines the content and structure of the webpage. Html is the entity that holds everything together or entity to which everything clings.

Tags in HTML

tag2.jpg

Tag is a basic formatting tool in HTML that helps in giving proper structuring to a page. there are numerous tag predefines that have their own meaning and purpose in the structuring. four basic HTML tags required for the proper functioning of an HTML code are:

  • html -> Used to represent the root of the html document
  • title -> Defines the title of the project/document, and also shown in the browsers title bar
  • head -> This acts as a container to hold all the metadata for the project, it is placed before the body tag
  • body -> This defines the body of the document, contains all the contents of an HTML document. Only one body tag is allowed in an HTML document.

What is Semantic HTML and why should we use it?

Semantic HTML elements are those that express their meaning in a way that is both human and machine-understandable, it also describes the meaning of the web page rather than a presentation. By adding meaningful tags the page provides additional information about the document which helps in an improved communication to viewers. It also aids the search engine to deliver a proper response page for a query/search. semantic HTML tags also improve the presentation of the page also, particular format/style is attached with each tag which helps in conveying the message in an intended manner.

Some of the common HTML tags

Heading tags

<h1> This is a level 1 heading </h1>
<h2> This is a level 2 heading </h2>
<h3> This is a level 3 heading </h3>
<h4> This is a level 4 heading  </h4>
<h5> This is a level 5 heading  </h5>
<h6> This is a level 6 heading  </h6>

preview

This is a level 1 heading

This is a level 2 heading

This is a level 3 heading

This is a level 4 heading

This is a level 5 heading

This is a level 6 heading

Paragraph tag

<p> The paragraph content goes here </p>

preview

This is the text content of the paragraph

Bold and Italic tag

<strong> This content is highlighted in bold </strong>
<i> This text is in italics </i>

This content is highlighted in bold
This text is in italics

Superscript and Subscript

<p> The chemical formula of carbondioxide is CO<sub>2</sub></p>
<p> Raj finished the race in 1<sup>st</sup> position </p>

The chemical formula of carbondioxide is CO2

Raj finished the race in 1st position

Unordered list

<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
</ul>

The items in an unordered list are:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Ordered List

<ol>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
</ol>

The items in an ordered list are:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4