HTML and it's tags

Photo by LUM3N on Unsplash

HTML and it's tags

In pursuit of learning Web Designing, it all begins with creating a structure. This structure is created by none other than our well known HTML. So today we’ll discuss about how HTML is able to give structure to our website with the help of it’s tools - tags.

WHAT IS HTML?

  • HTML stands for HyperText Markup Language.
  • It is the standard markup language for creating web pages.
  • It describes the basic structure of web pages.
  • In HTML, HyperText defines the link between the web pages and Markup Language defines the text document within the tag.

Basic Structure

The basic structure of HTML contains essential building-block elements upon which all web pages are created.

  • <!DOCTYPE HTML> : It is an instruction that tells the web browser about the markup language in which the current page is written.

  • < html > : It define the root element of an HTML document.

  • < head > : It contains information related to document.
  • < body > : It is used to enclose all the visible content of web pages, such as- headings, paragraphs, tables, hyperlinks, lists, images etc.

Example:

image.png

Basic HTML tags

  • Title tag : It define the title of HTML document. It lays inside head tag.
    Syntax :

                  <!-- this is title tag -- >
                  <title> Title here </title>
    
  • Heading tag : It define the heading of HTML document. HTML headings are defined with the h1 to h6 tags.
    Syntax :

                 <!-- this is heading tags -- >
                 <h1>Heading 2 </h1>
                 <h2>Heading 2 </h2>
                 <h3>Heading 3 </h3>
                 <h4>Heading 4 </h4>
                 <h5>Heading 5 </h5>
                 <h6>Heading 6 </h6>
    
  • Paragraph tag : It define paragraph content in HTML document.
    Syntax :

                  <!-- this is paragraph tag -- >
                  <p> Statements... </p>
    
  • Emphasis tag : It is used to emphasize text.
    Syntax :

                  <!-- this is emphasize tag -- >
                  <em> Statements... </em>
    
  • Bold tag : It specifies bold content in the HTML document.
    Syntax :

                  <!-- this is bold tag -- >
                  <b> Statements... </b>
    
  • Italic tag : It is used to write content in italic format.
    Syntax :

                  <!-- this is italic tag -- >
                  <i> Statements... </i>
    
  • Underline tag : It is used to set the content underlined.
    Syntax :

                  <!-- this is underline tag -- >
                  <u> Statements... </u>
    
  • Deleted text tag : It crosses the text content and is used to represent deleted text.
    Syntax :

                  <!-- this is deleted text tag -- >
                  <strike> Statements... </strike>
    
  • Anchor tag : It is used to link one page to another page.
    Syntax :

                  <!-- this is anchor tag -- >
                  <a> Statements... </a>
    
  • List tag : It is used to list the content.
    Syntax :
                  <!-- this is list tag -- >
                  <li> Statements... </li>
    
  • Ordered tag : It is used to list the content in a particular order.
    Syntax :

                  <!-- this is Ordered tag -- >
                  <ol> Statements... </ol>
    
  • Unordered tag : It is used to list the content without order.
    Syntax :

                  <!-- this is unordered tag -- >
                  <ul> Statements... </ul>
    
  • Comment tag : It is used to set the comment.
    Syntax :

                  <!-- this is comment tag -- >
                  <!-- Statements... -- >
    
  • Center tag : It is used to set the content into the center.
    Syntax :

                  <!-- this is center tag -- >
                  <center> Statements... </center>
    
  • Font tag : It specify the font size, font color, and font family in HTML document.
    Syntax :

                  <!-- this is font tag -- >
                  <font> Statements... </font>
    
  • Line break tag : It is used to break the line.
    Syntax :

                  <!-- this is line break tag -- >
                  <br> 
    
  • Image tag : It is used to add image elements in HTML documents.
    Syntax :

                  <!-- this is image tag -- >
                  <img>
    
  • Horizontal rule tag : It is used to display a horizontal line in HTML document.
    Syntax :

                  <!-- this is horizontal rule tag -- >
                  <hr>
    
  • Table tag : It is used to create a table in HTML document.
    Syntax :

                  <!-- this is table tag -- >
                  <table> Statements... </table>
    

Table tag consist of the following tags :

  1. Tr tag : It define a row of HTML table.
    Syntax :

                 <!-- this is tr tag -- >
                 <tr> Statements... </tr>
    
  2. Th tag : It define header cell in a table.
    Syntax :

                 <!-- this is th tag -- >
                 <th> Statements... </th>
    
  3. Td tag : It define standard cell in an HTML document.
    Syntax :

                 <!-- this is td tag -- >
                 <td> Statements... </td>
    
  • Form tag : It is used to create HTML form for user.
    Syntax :

                  <!-- this is form tag -- >
                  <form> Statements... </form>
    
  • Submit input tag : It is used to take input from the user.
    Syntax :

                  <!-- this is submit input tag -- >
                  <input>
    

So thats all for this article. Hopefully you learned something from this.

HAVE A GOOD DAY! #HAPPY LEARNING 😊!

Copyright @Daisy’s_Blog