Tutorial

IntroductionEditorElementsAttributesCSSHeading TagParagraph TagText FormattingBlockquote TagAnchor TagImage TagTable TagListsFromsCommentsClass and IDResponsive

Introduction

HTML stands for Hyper Text Markup Language. People use this to develop the websites, webpages, web-apps. HTML contains many different elements to describe a clean structure like if you write a title then heading tag <h1> will be used, if you write a paragraph then paragraph tag <p> will be used, if you write clickable text which is redirected to another webpage then an anchor tag <a> will be used, etc..

HTML tags are the elements of HTML language.

HTML elements guide the browser to show the page in a manner means if you write a title with the heading tag then browser will shown it in big size, if you write a paragraph with the paragraph tag then it will automatically shown in small size/readable size, etc..

The browser is a software and you can interact with the webpages over the browser with the internet connectivity like you are reading this HTML introduction on a webpage and this webpage is displaying on the browser with internet connectivity. Popular browser are Chrome, Firefox, Safari (Only For Mac), Internet Explorer, Edge.

Note: HTML is not case sensitive means if you write the tag name in capital letter or small letter, it would given the same result.

<H1> and <h1> is same in HTML, <P> and <p> is same.

Example



<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

    <h1>

      First Example.

    </h1>

    <p>

      It's my First Example

    </p>

</body>

</html>

Detail of your first example:
  • The <!DOCTYPE html> declaration also known as Document Type, this line of code tells to the browser that what version of HTML code you are using.
  • The <html> tag is the root of HTML document. When you start writing HTML code it’s the first tag of HTML.
  • The <head> element contains information about the document. Inside the head tag you will get <title> tag, <meta> tag, <link> tag to link the stylesheet, and some other tags depends on the project, etc.. Basically it contains only <title> tag and <meta> tag.
  • The <title> element specifies a title of HTML page and it shows in the browser’s title bar.
  • The <body> element shows on the browser and all the content tags will be written in the body tag. It’s the main tag of HTML document.
  • The <h1> tag is for large title.
  • The <p> tag is for paragraph.
Tip: A screen reader is a software program that reads the HTML code, and allows the user to “listen” to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Editor to learn HTML

You can use notepad to learn HTML and also you can create a webpage and run that on browser.

To open the notepad, follow the below steps:

  • Click on window icon called Start button of your PC, located at the bottom-left side. Wrapped in red border.
  • Now type Notepad, you will see the Notepad would be highlighted in the menu.
  • Click on Notepad which being highlight, and the notepad would be open.
  • Copy the below HTML code and paste it on your editor.


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

    <h1>

      First Example.

    </h1>

    <p>

      It's my First Example

    </p>

</body>

</html>


  • When you are pasted the code, your Notepad will look like this.

  • After pasting the code, save the file.
  • To save the file, click File tab, top-left corner of your Notepad.
  • After clicking, a list would be open. You need to select Save as in that list.
  • After clicking Save As in the list, a new window would be open. Type the name of your first html file with the html extension as you are watching in the below screenshot.

    File name: my-first-file.html
  • Click Save button.
  • Now, go to your saved file that will look like this.
  • Double click on this and it will be open in browser and you will see the title and paragraph not the written code in the file.

    Output:

For the Mac OS

Use text Plain Text.

  • Open Finder > Applications > TextEdit.
  • Copy the HTML code provided above.
  • Paste it at you text editor.
  • Save file and open.

HTML Elements

All the tags are called elements of HTML. An element has start tag and closing tag.

Example

<Start_Tag_Name> Content of element can be written here. </End_Tag_Name>





<Start_Tag_Name> - <html>, <head>, <title>, <body>, <h1>, <p>, <table>, <a ...>, etc..



</End_Tag_Name> - </html>, </head>, </title>, </body>, </h1>, </p>, </table>, </a>, etc..


Some elements have not end_tag_name called empty element, e.g. <br>.

<br> tag is for break the line.

You have a long paragraph and you want to break the line and start from new line you can use <br> tag.

<p>I am paragraph text and <br> break the line. Can you see the difference </p>

HTML Attributes

Some HTML elements have attributes to provide more details of that element as image tag, anchor tag, head tag, paragraph tag etc..

Let’s see some examples.

Image Tag

<img src="c-drive/image-folder/image-name.jpg" width="400" height="400" >

src is a attribute of image tag. It defines the image path.

width and height attributes define the size of image.

Anchor tag

<a href="google.com"> Click Me </a>

href is a attribute of anchor tag. It specifies the URL of a webpage where it goes when you click on the text.

List of attributes in the elements

  • The lang attribute of the <html> tag declares the language of the Web page
  • The title attribute defines the title or details which you write in this
  • The href attribute of <a> specifies the URL of the webpage where it goes after clicking
  • The src attribute of <img> specifies the path to the image to be displayed
  • The width and height attributes of <img> set the size of image
  • The alt attribute of <img> provides a image detail when mouse hover over image
  • The style attribute is used to add styles to an element, such as color, font, size, font-weight, etc..
  • Elements use Classes as an attributes. Classes are used in external or internal stylesheet to design the layout. It’s the part of CSS.

Overview

CSS stands for Cascading Style Sheets. We use CSS when we design the web pages. CSS controls the UI of web pages. Using CSS you can set your paragraph font-size big or small, change color of paragraph fonts, set the position (Left, Right, Center), you can add top and bottom space in the paragraph, etc.

Example. you can change the font-color of two paragraphs using CSS.

<p style="background-color:yellow;">

This is a yellow paragraph 

</p>

<p style="background-color:red;">

  This is a red paragraph.

</p>


Output:

Add CSS in HTML

We can add CSS by three ways:

  • Inline CSS
  • Internal CSS
  • External CSS
Inline CSS: Add style attribute inside the HTML element called Inline CSS.

Example:

<html>

<head>

<title>Page Title</title>

</head>

<body>

    </h1>

     <p style="background-color:red;">

       This is a paragraph.

     </p>

</body>

</html>

Internal CSS: Add style as an element (<style>) in the <head> section on the same HTML page where you are writing your HTML.
<html>

<head>

<title>Page Title</title>

<style>

p {
   background-color:red;
}

</style>

</head>

<body>

     <p>

       This is a paragraph.

     </p>

</body>

</html>

External CSS: When you have multiple HTML pages for your website, you will need a separate file named style.css where your all CSS would written for your all webpages. The external stylesheet would be added via link element on each HTML file inside the <head> element.

Example:

<html>

<head>

<title>Page Title</title>

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

</head>

<body>

     <p>

       This is a paragraph.

     </p>

</body>

</html>


Getting Started With Heading Tag

Let’s start to learn HTML, first tag is heading tag, it have six sizes, depends on title or subtitle.

<h1> Hello! </h1> : Use <h1> If you want to show a big heading on the page.
<h2> Hello! </h2> : Use <h2> If you want to show a small heading on the page.
<h3> Hello! </h3> : Use <h3> If you want to show a sub-heading on the page.
<h4> Hello! </h4> : Use <h4> If you want to show a more small heading on the page.
<h5> Hello! </h5> : Use <h5> If you want to show a little more small heading on the page.
<h6> Hello! </h6> : <h6> is smallest size and last tag of heading.

You can customize the default size of heading using CSS

You can easily change the default size of heading tag, see below how I did:

h1 { 
font-size: 60px;
}

h2 {
  font-size: 50px;
}

h3 {
  font-size: 40px;
}

h4 {
  font-size: 40px;
} 

h5 {
  font-size: 30px;
} 

h6 {
  font-size: 20px;
} 

Complete Example:

<!DOCTYPE html>

<html>
  
<head>

<title>Page Title</title>

<style>

h1 {
  font-size: 60px;
}

h2 {
  font-size: 50px;
}

h3 {
  font-size: 40px;
  font-weight: 600;
}

h4 {
  font-size: 40px;
} 

h5 {
  font-size: 30px;
} 

h6 {
  font-size: 20px;
} 

</style>

</head>

<body>

    <h1>

    Hello!

    </h1>
  
  <h2>

     Hello!

    </h2>
  
  <h3>

     Hello!

    </h3>
  
  <h4>

     Hello!

    </h4>
  
  <h5>

     Hello!

    </h5>
  
  <h6>

     Hello!

    </h6>
  

</body>

</html>

Getting Started With Heading Tag

Let’s start to learn HTML, first tag is heading tag, it have six sizes, depends on title or subtitle.

<h1> Hello! </h1> : Use <h1> If you want to show a big heading on the page.
This image has an empty alt attribute; its file name is Screenshot-2021-10-13-225343.png
<h2> Hello! </h2> : Use <h2> If you want to show a small heading on the page.
This image has an empty alt attribute; its file name is Screenshot-2021-10-13-225425.png
<h3> Hello! </h3> : Use <h3> If you want to show a sub-heading on the page.
This image has an empty alt attribute; its file name is Screenshot-2021-10-13-225404.png
<h4> Hello! </h4> : Use <h4> If you want to show a more small heading on the page.
This image has an empty alt attribute; its file name is Screenshot-2021-10-13-225425-2.png
<h5> Hello! </h5> : Use <h5> If you want to show a little more small heading on the page.
This image has an empty alt attribute; its file name is Screenshot-2021-10-13-225444-1.png
<h6> Hello! </h6> : <h6> is smallest size and last tag of heading.
This image has an empty alt attribute; its file name is Screenshot-2021-10-13-225504-1.png





You can customize the default size of heading using CSS

You can easily change the default size of heading tag, see below how I did:

h1 { 
font-size: 60px;
}

h2 {
font-size: 50px;
}

h3 {
font-size: 40px;
}

h4 {
font-size: 40px;
}

h5 {
font-size: 30px;
}

h6 {
font-size: 20px;
}

Complete Example:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

h1 {
font-size: 60px;
}

h2 {
font-size: 50px;
}

h3 {
font-size: 40px;
font-weight: 600;
}

h4 {
font-size: 40px;
}

h5 {
font-size: 30px;
}

h6 {
font-size: 20px;
}

</style>

</head>

<body>

<h1>

Hello!

</h1>

<h2>

Hello!

</h2>

<h3>

Hello!

</h3>

<h4>

Hello!

</h4>

<h5>

Hello!

</h5>

<h6>

Hello!

</h6>


</body>

</html>

Add block

<p> tag is used for paragraph, when you write the simple text with the HTML code then you will have to use <p>…</p> tag, it’s a separate block of text.

Example

Copy the below code and paste it one the notepad on your PC and click ctrl + s to save the document. Then click on that saved document and you will get the output same as below screenshot.

<html>
  
<head>

<title>Page Title</title>

</head>

<body>

<p>I wrote my first paragraph.</p>
  
<p>It's my first paragraph.</p>

</body>

</html>

Output

Text Format Elements

You can easily format the text as bold, italic format, etc. Let’s see how you can use it inside any tag.

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic text
  • <em> – Emphasized text
  • <mark> – Marked text
  • <small> – Smaller text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text
  • <sup> – Superscript text

b – Bold Text

Your text would be bold when you write something inside this <b>…</b> tag.

<p>I am paragraph text and <b> It's your bold text </b>. Can you see the difference </p>

Output:

strong – Important Text

When the text contains important value in the middle of any tag or separate then we use <strong>…</strong>. It be render as bold text.



<p>I am paragraph text and <strong> It's your important text </strong>. Can you see the difference </p>

Output:

i – Italic Text

The <i>…</i> tag renders the text in italic form.



<p>I am paragraph text and <i> It's your italic text </i>. Can you see the difference </p>

small – Smaller text

This tag would be use for small text in the same tag.

<p>I am paragraph text and <small> It's your smaller text in the same tag</small>. Can you see the difference </p>

del – Deleted text

It defines deleted text on the webpage and you can identify it by a strike line.

<p>I am paragraph text and <del> It's your deleted text in the same tag</del>. Can you see the difference </p>

ins – Inserted text

This tag defines inserted text into your paragraph or you can say you have updated any word in the documentation. You favorite dish is chicken but after some times your favorite dish is something else then you can update the document delete chicken and insert something else. You can identify this tag – <ins> by a underline of a text.

<p>I am paragraph text and <del>I like chicken</del>after sometime<ins> I like Pizza.</ins>. Can you see the difference </p>

sub – Subscript text

This tag is subscript text as you write chemical formulas like  NH2 , C8H10N4O2 , This is subscripted text. We use this tag for typographical reasons.

When you write any text inside the <sub>…</sub> tag, your text would be shown lower side of common text.

<p>I am paragraph text and <sub>I like reading books</sub>. Can you see the difference </p>
<p>I am paragraph text and NH<sub2></sub>. Can you see the difference </p>

sup – Superscript text

The sup tag would be use for typographical reason like change the position of any word in the sentence, to show your document in a good format. You can take it as mathematical formulas – a2 + b2 = c2 .

When you write any text inside the <sup>…</sup> tag, your text would be shown upper side of common text.



<p>I am paragraph text and <sup>it's your superscript text</sup>, Can you see the difference </p>

<p>I am paragraph text and it's chemical formula a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup.>. Can you see the difference </p>

HTML Blockquote Tag

The HTML <blockquote> tag defines a long quotations. When you write the text inside the <blockquote> tag, the alignment of this text would be change than other text and look like special note or text. Quotation is used for many reasons, here we describe one example for this tag, a short piece of a longer text to elaborate the meaning of the chapter etc..

<!DOCTYPE html>
<html>
<body>


<blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</blockquote>

</body>
</html>

Short Quotations <q>

It defines short quotation text as in middle of a paragraph.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <q>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</q>, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

Abbreviations tag <abbr>

When you write a paragraph and in the middle of it you write short form of any long word but you want to show full form while doing mouse hover over this word, then you can use this tag <abbr>.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <abbr title="It's only demo text"> Lorem Ipsum </abbr> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

Contact Information <address>

When you write the address of a person or an organization, <address> tag would be used. Automatically, browser shows it in italic and add <br> tag called line break.

Email address, phone number, social media as LinkedIn, Instagram, twitter, etc.. are included in the contact information.

     <address>
         Organization Name: XYZ <br>
         Contact us: <br>
         XYZ<br>
         999-A, XYZ, XYZ - 0000 <br>
         xyz.email.com <br>
     </address>

The HTML <blockquote> tag defines a long quotations. When you write the text inside the <blockquote> tag, the alignment of this text would be change than other text and look like special note or text. Quotation is used for many reasons, here we describe one example for this tag, a short piece of a longer text to elaborate the meaning of the chapter etc..

<!DOCTYPE html>
<html>
<body>


<blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</blockquote>

</body>
</html>

Short Quotations <q>

It defines short quotation text as in middle of a paragraph.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <q>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</q>, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
This image has an empty alt attribute; its file name is short-quote-1024x185.png

Abbreviations tag <abbr>

When you write a paragraph and in the middle of it you write short form of any long word but you want to show full form while doing mouse hover over this word, then you can use this tag <abbr>.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <abbr title="It's only demo text"> Lorem Ipsum </abbr> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
This image has an empty alt attribute; its file name is abbriviation.png

Contact Information <address>

When you write the address of a person or an organization, <address> tag would be used. Automatically, browser shows it in italic and add <br> tag called line break.

Email address, phone number, social media as LinkedIn, Instagram, twitter, etc.. are included in the contact information.

     <address>
Organization Name: XYZ <br>
Contact us: <br>
XYZ<br>
999-A, XYZ, XYZ - 0000 <br>
xyz.email.com <br>
</address>
This image has an empty alt attribute; its file name is address.png

Work Title <cite>

The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Browser renders it in italic automatically.

Note: Name of person isn’t title.

<p>I am paragraph text and the title of this paragraph is <cite> Quotations </cite>. Can you see the difference </p>

Bi-Directional Override <bdo>

This tag is used to change the text direction. By-default, text renders left to right as you are reading this left hand side to right hand side. This tag would be used with it’s attribute “dir”. “dir” renders direction, so if you want to change the direction of text, use this tag.

Right hand side to laft hand side

<p>I am paragraph text and It's your <bdo dir="rtl">RIGHT HAND SIDE TO LEFT HAND SIDE TEXT </bdo>. Can you see the difference </p>

Left hand side to right hand side


<p>I am paragraph text and It's your <bdo dir="ltr">RIGHT HAND SIDE TO LEFT HAND SIDE TEXT </bdo>. Can you see the difference </p>

Anchor tag allows a text to be clickable to go to another webpage. In other words, we write a text and wrap that text inside anchor tag to make that text clickable.

We link another webpage URL in the anchor tag using href attribute.

Example

Copy the below HTML code and paste it into notepad on your PC and press ctrl + s to save the document and see the output in the below screenshot.

<html>
  
<head>

<title>Page Title</title>

</head>

<body>

<a href="https://www.google.com/">  Click  </a>
  
</body>

</html>
Output

When you target the mouse over the Click link, a small hand would be shown with the underline.

Attributes Of Anchor Tag

“href” is an attribute of anchor tag and the URL of webpage would be written inside this.

e.g.


<a href="https://www.google.com/">  Click  </a>

Overview

Image improves webpages more attractive. Images show our products, etc. on our website. Image tag does not have closing tag, it has attributes to link image and show the text for image.

You can add image in your webpage using image tag.

Example:
<html>

<head>

<title>Page Title</title>

</head>

<body>

    <img src="image-name.jpg" alt="Description of image">

</body>

</html>


SRC: SRC attribute is to link image by image path. You PC have folder which has image for your webpage then you can add the accurate path into SRC i.e. src=”Desktop/folder-name/image-name.jpg”
ALT: ATL attribute is to show text for image when you keep mouse over the image.

Size Of Image

You can add inline CSS to set the size of image using ‘width’ and ‘height’.

<img src="image-name.jpg" alt="Description of image" style="width: 500px; height:500px">

You can set height and width as an attribute inside the image tag.

<img src="image-name.jpg" alt="Description of image" width: "500" height: "500px">

You can deep with the image
  • Image Map
  • Background Image
  • The Picture Element

Overview

You can create the table using table tag <table> in HTML.

Whenever you need to organize the data in rows and columns you can create the table with the <table> tag.

Let’s create a table: Copy the below code and paste it into your HTML file.
<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<table>

   <tr>
    <th>Name</th>
    <th>Contact Number</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Ouz</td>
    <td>99999</td>
    <td>20</td>
  </tr>

  <tr>
    <td>Jack</td>
    <td>88888</td>
    <td>21</td>
  </tr>
  <tr>

    <td>Tom</td>
    <td>77777</td>
    <td>22</td>
  </tr>

</table>


</body>

</html>

Output:

About Table Tags

<table> </table>: It’s a table main tag, it contains child tags.
  • td: <td></td> for table data.
  • tr: <tr></tr> for table row.
  • th: <th></th> for table title/heading.
  • colgroup: <colgroup></colgroup> is for formatting of multiple columns.
  • col: <col></col> is for column property and it would be use within colgroup.
  • thead: <thead></thead> defines header content of table.
  • tbody: <tbody></tbody> defines body content of table
  • tfoot: <tfoot></tfoot> defines body content of table.
Example

All the tags explained above are exist in the below table code.

<table>
  
    <colgroup>
      <col span="2" style="background-color:yellow">
      <col style="background-color:pink">
    </colgroup>
  
   <thead>
      <tr>
        <th>Name</th>
        <th>Contact Number</th>
        <th>Age</th>
      </tr>
   </thead>
  
    <tbody>
      <tr>
        <td>Ouz</td>
        <td>99999</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Jack</td>
        <td>88888</td>
        <td>21</td>
      </tr>
    </tbody>
  
  <tfoot>
    <tr>
      <td>Tom</td>
      <td>77777</td>
      <td>22</td>
    </tr>
  </tfoot>
  
</table>




Table Rowspan & Colspan

Two columns or many columns can be merged via colspan, same as columns you can merge two or many rows via rowspan.

Let’s see how can be done it?

Colspan

Source:
<table>

      <tr>
        <th colspan="2"
>
          Colspan 2: Covers 2 columns
        </th>
        <th></th>
      </tr>


    
  <tr>
        <td>Ouz</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>Jack</td>
        <td></td>
        <td></td>
      </tr>
    

    <tr>
      <td>Tom</td>
      <td></td>
      <td></td>
    </tr>
 
</table>

Rowspan

Source
<table>

  <tr>
    <th>Name</th>
    <th></th>
  </tr>

  <tr>
    <td rowspan="2">
      Rowspan 2: Covers two rows
    </td>
    <td>Row 1</td>
  </tr>

  <tr>
    <td>Row 2</td>
  </tr>

   <tr>
    <td>Jack</td>
    <td></td>
  </tr>

</table>

Overview

List is a way to set the data in a clean format. You can write the information point wise using the List tag. List is divided mainly into two formats: Ordered List and Unordered List.

Ordered list’s main tag starts with <ol> tag and it’s child tags are <li> tag. These <li> tags contain the data.

<ol> ------- Ordered List Main Tag

    <li> ----------Child Tag

       List Item 1  -----------Contains Data

    </li>

       List Item 2

    </li>

</ol>

Unordered list’s main tag starts with <ul> tag and it’s child tags are <li> tag. These <li> tags contain the data.

<ul> ------- Unordered List Main Tag

    <li> ---------- Child Tag

       List Item 1  ----------- Contains Data

    </li>

       List Item 2

    </li>

</ul>


There is one more list Description List. It is completely different from ordered list and un-ordered list. Using this, you can divide your data as the title and description.

Description list’s main tag starts with <dl> tag and it’s child tags are <dt> and <dd> tag. These <li> tags contain the data.

Here is the source to understand about it’s tags
<dl> --------- Description List

    <dt> -------- Description Name/Term

      Title 1

    </dt>

            <dd> ------- Describes The Description Name/Term

              Description Goes Here.

            </dd>

     <dt>
 
       Title 2

     </dt>

            <dd>

              Description Goes Here.

            </dd>

</dl>
        

Unordered List

<ul> tag describes the un-ordered-list (bulleted list).

Source
<ul>

    <li>
       List Item 1
    </li>

    <li>
       List Item 2
    </li>

    <li>
       List Item 3
    </li>

</ul>

Unordered Nested List

Source
<ul>

    <li>
        List Item 1
    </li>


    <li>
        List Item 2
    </li>

    <li>
        List Item 3

                <ul>

                        <li>
                            Nested List Item 1
                        </li>

                        <li>
                            Nested List Item 2
                        </li>

                        <li>
                            Nested List Item 3
                        </li>
                </ul>
     </li>

     <li>
        List Item 4
     </li>
</ul>

Ordered List

Source
<ol>

    <li>
       List Item 1
    </li>

    <li>
       List Item 2
    </li>

    <li>
       List Item 3
    </li>

</ol>

Ordered Nested List

Type 1:
Source
<ol>

    <li>
        List Item 1
    </li>


    <li>
        List Item 2
    </li>

    <li>
        List Item 3

                <ol>

                        <li>
                            Nested List Item 1
                        </li>

                        <li>
                            Nested List Item 2
                        </li>

                        <li>
                            Nested List Item 3
                        </li>
                </ol>
     </li>

     <li>
        List Item 4
     </li>
</ol>

Type 2:
Source
<ol>
    
     <li>
        List Item 1
    </li>


    <li>
        List Item 2
    </li>

    <li>
        List Item 3

                <ul>

                        <li>
                            Nested List Item 1
                        </li>

                        <li>
                            Nested List Item 2
                        </li>

                        <li>
                            Nested List Item 3
                        </li>
                </ul>
     </li>

     <li>
        List Item 4
     </li>
</ol>

Description List

Source:
<dl>
    <dt>

      Title 1

    </dt>

            <dd>

            Description Goes Here.

            </dd>

    <dt>

      Title 2

    </dt>

            <dd>

            Description Goes Here.

            </dd>

    <dt>

      Title 3

    </dt>

            <dd>

            Description Goes Here.

            </dd>

</dl>
        

Tip:

You can change the list style of un-ordered list.

ul {
    list-style-type: square;
}

Or

ul {
    list-style-type: circle;
}

Or

ul {
    list-style-type: disc;
}

Overview

A Form contains different type of input fields to store different type of data such as user-name, user-password, user email-id, phone number, address etc. User data would be send to the server for further processing via HTML Form.

The <input> element is used for every type of element. Using type attribute, you can add different kinds of input fields in a form such as checkbox, radio button, button, text etc.

Example
Source:
<form>

      <label>

           Name: <input type="text">

      </label>

      <label>

           Email: <input type="email">

      </label>

      <label>

           Username: <input type="text">

      </label>

      <label>

           Password: <input type="password">

      </label>

      <input type="submit" value="Submit">

</form>

The <form> </form> tag is main wrapper of a form and it contains all the input fields as you have seen in above example.

Input Fields & Attributes

Input fields depend on ‘type’ attribute.

‘<input type=”text”>’, it is a text input field for text type content.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

‘<input type=”password”>’, it is a password input field for password type text.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pswd">Password:</label><br>
  <input type="password" id="pswd" name="pswd">
</form>

‘<input type=”email”>’, it is a email input field for email type text.

<form>
  <label for="email">Enter email:</label>
  <input type="email" id="email" name="email">
</form>

‘<input type=”file”>’, it is a file input field to upload the file like zip, image, .txt etc.. onto the server. We add this type of input field we get a clickable button and you can upload any file your PC to server via clicking that button.

<form>
  <label for="choosefile">Choose a file:</label>
  <input type="file" id="chossefile" name="choosefile">
</form>

‘<input type=”submit”>’, it is a submit input field for submit button. When you have done filling the form, click submit button to send the information from the form to the server for further processing.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Jack"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Sparrow"><br><br>
  <input type="submit" value="Submit">
</form>

‘<input type=”reset”>’, it is a reset input field for reset button. When you have done filling the form, click reset button to delete all the information from the input field. In other words, if you have filled wrong information in the form, click reset button to remove the wrong info from the input field.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Jack"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Sparrow"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

‘<input type=”radio”>’, radio button is options for you to select only one option from many.

<h1>Choose your favorite Web language:</h1>
<form>
  <input type="radio" id="fronend" name="fav_language" value="Font-end">
  <label for="frontend">Front-end</label><br>
  <input type="radio" id="backend" name="fav_language" value="Back-end">
  <label for="backend">Back-end</label><br>
  <input type="radio" id="fullstack" name="fav_language" value="Full Stack">
  <label for="fullstack">Full stack</label>
</form>

<input type="tel">‘, it contains telephone/mobile number. If you enter any

example:

<form>
  <label for="phone">Please enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</form>

Comments Tag

Comment ( <!– –> ) tag is used to write the comment in the code and this comment would not shown on webpage by the browsers. Whenever we write any complex code in HTML then we can write the comments for each line of code to make understand. If other person read your complex code he/she can understand the code by your comments.

<!-- It's a comment tag -->

e.g.

<!-- It's a paragraph tag -->

<p> It's my paragraph </p>






<!-- It's a heading tag -->

<h1> It's my heading </h1>

Browser hides those comments and shown only heading and paragraph text.

Note: If you have rough code you can comment that to hide.

Class and ID

Class or ID are attributes of an element. We use class or id in the elements to style the element, we can use same class in each element to get them same style but cannot use same ID in each element.

ID is unique for each single element.

Let’s see how to work with class or id in the elements. We have an element and we want to increase its font size. So we will create a class using a dot ( . ) and curly bars { } to write CSS property inside it.


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */

.demo {

  font-size: 30px;

}


</style>

</head>

<body>


<!-- demo is a class-name -->

    <p class="demo">

      It's my First Example

    </p>

</body>

</html>

We can write more CSS properties inside the class to design the paragraph.


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */

.demo {

  font-size: 30px;
  color: red;
  background-color: yellow;

}


</style>

</head>

<body>


<!-- demo is a class-name -->



    <h1 class="demo">

      It's my first heading.

    </h1>




    <p class="demo">

      It's my first paragraph.

    </p>




   <span class="demo">

      It's my first span tag.

    </span>



</body>

</html>

Use of ID

ID of an element would be unique, it cannot be same even in two elements.

ID would be make with hash ( # ) and used curly bars to write CSS properties.



<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a hash ( # ) for ID and curly bars {} with CSS property */

#demo {

  font-size: 30px;

}


</style>

</head>

<body>


<!-- demo is a class-name -->

    <p id="demo">

      It's my First Example

    </p>

</body>

</html>

Responsive

Responsive webpage means, webpage will look good on every sizes of device. In other words, when you open a webpage on your PC/big screen webpage layout should look good, when you open your webpage on your tablet device webpage layout should look good and when you open a webpage on your mobile device webpage layout should look good.

Responsive webpages automatically adjust on all sizes of device.

Let’s see, how to make it possible. With media queries you can change your CSS code for different screen sizes.



<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */

.demo {

  font-size: 30px;
  color: blue;

}






/* Media query for Tablet size */

@media (max-width:1024px) {

.demo {

  font-size: 15px;
  color:red;

 }

}






/* Media query for Mobile size */

@media (max-width:768px) {

.demo {

  font-size: 10px;
  color: black;

 }

}


</style>

</head>

<body>


<!-- demo is a class-name -->

    <p class="demo">

      It's my First Example

    </p>

</body>


So we are written two size of media queries 1024px and 768px, it means when your device size under the 1024px screen size you text color would be red and font size 15px, when your screen size would be under 768pxyou text color would be black and font size would be 10px but when you don’t have these both media queries your text font size 30px and color would be blue.