# HTML(Hypertext Markup Language)

# **HTML** 

Hyper text markup Language 

HTML is the code that is used to structure a web page and its Content 

The Component used to design the structure of websites are called **HTML TAG**  

# HTML Boilerplate

       <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>HTML 5 Boilerplate</title>

    <link rel="stylesheet" href="style.css">

  </head>

  <body>

         <script src="index.js"></script>

  </body>

# Quick Point

HTML tag is parent of head and body tag

Most of html element have opening and closing tags with content in between 

Some tags have no content in between, eg -<br>

We can use inspect element/view page source to edit html 

# Comment in HTML

• This is part of code that should not be parsed 

<!- -This is an HTML Comment- ->

      <!--function displayMsg()alert("Hello World!")}//-->

# Heading Tag

Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3> , and so on.  

 Heading 1       

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

## Anchor Tag

     Used to add link to your page 

<a href="[https://www.growwwithcode.com">Visit](https://www.growwwithcode.com">Visit) [Growwwithcode.com](http://Growwwithcode.com)!</a>

## Image Tag

    Used to add images to your page

<img src="img\_girl.jpg" alt="Girl in ajacket" width="500" height="600">

## Br Tag

  Used to add next line (line breaks) to your page 

  <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

## Bold, Italic and Underline Tag

      Used to highlight text in your page

## Hr Tag

  <h1>The Main Languages of the Web</h1>

<p>HTML is the how to display the content.</p>

</hr>

<p>CSS is a language that all at once.</p>

## Subscript and Superscript tag

here are times when we would like to use characters that are a half a character below or above the set text. Subscripts are characters that are set half a character below the text. Superscripts are characters that are set half a character above the [text.In](http://text.In) a real-world setting, we use these characters when we’re using math equations, chemical equations, citations or footnotes, for example.

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

## Span Tag

          Span is also a container used for other HTML element Inline Element 

          (takes width as per size)                               

## LIST In HTML

               Lists are used to represent real life list data.

               Unordered                                  ordered

         <ul>                                                  <ol>

               <li>Apple</li>                                  <li>Apple</li>

        </ul>                                                 </ol>

## Table In HTML

              Tables are used to represent real life table data 

                 <tr>  Used to display table row

                 <td> used to display table data

                 <th> used to display table header 

## Form in HTML

           Forms are used to collect data from the user

             Eg- sign up/login/help requests/contact me

         <form>

                Form content

       </form>

## Action in form  

Action attribute is used to define what action need to be performed when a form is                submitted    

                   <form action=”/action.PHP”>

**From Element : Input**                    

                <input type=”text ”Placeholder=”Enter Name”>

## Class and ID

        <div id =”id1”class=”group1”> </div>

        <div id = “id2” class= “group2”> </div>

## Checkbox

     <lable for=”id1”>

               <input type =”checkbox”value+”classX”name=”class” id=”id1”>     </lable>

## Video tag

        <video src=”myvid.mp4”>my video</video>

          Attribut

controls

height

width

autoplay