HTML-for-Beginners

HTML Basic Tags

Basic HTML Format

<!DOCTYPE html>
<html>
  <body>
    Hello world!
  </body>
</html>

<!DOCTYPE html>

Hello world!

Paragraph (Default)

<p>This is a paragraph</p>

This is a paragraph

Paragraph (with alignment attributes)

<p align="left">Paragraph with left alignment</p>
<p align="center">Paragraph with center alignment</p>
<p align="middle">Paragraph with middle alignment</p>
<p align="right">Paragraph with right alignment</p>
<p align="justify">Paragraph with justified alignment</p>

Paragraph with left alignment

Paragraph with center alignment

Paragraph with middle alignment

Paragraph with right alignment

Paragraph with justified alignment

Bold

This text is <b>Bold</b>

This text is Bold

Italic

This text is <i>Italic</i>

This text is Italic

Underline

This text is <u>Underlined</u>

This text is Underlined

Strong

This text is <strong>strong</strong>

This text is strong

Emphasize

This text is <em>emphasized</em>

This text is emphasized

Delete

This text is <del>deleted</del>

This text is ~~deleted~~

Line Break

There are <br>three </br>lines

There are
three </br>lines

Horizontal Line

There is a horizontal line under this paragraph. <hr>
There is a horizontal line above this paragraph.

There is a horizontal line under this paragraph. <hr> There is a horizontal line above this paragraph.

Subscript

Chemical formula of water is H<sub>2</sub>O

Chemical formula of water is H₂O

Superscript

A mathematical formula is (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>

A mathematical formula is (a + b)² = a² + 2ab + b²

Heading

<h1>This is h1 heading</h1>
<h2>This is h2 heading</h2>
<h3>This is h3 heading</h3>
<h4>This is h4 heading</h4>
<h5>This is h5 heading</h5>
<h6>This is h6 heading</h6>

This is h1 heading

This is h2 heading

This is h3 heading

This is h4 heading

This is h5 heading

This is h6 heading

Image (Default)

<img src="waterlilly.jpg">

Image (with width and height)

<img src="waterlilly.jpg" width="150" height="100">

Image (with alternative text, if image is missing)

<img src="waterlilly.jpg" alt="An image of a Waterlily">

An image of a Waterlily

Hyperlink (with website)

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

Visit Google

Hyperlink (open in a new page or tab)

Visit <a href="https://www.google.com" target="_blank">Google</a> in a new tab.

Visit Google in a new tab.

Note: GitHub doesn’t support new tab link opening as of now. But HTML editors will work fine.

Hyperlink (with a file)

Open <a href="basic_html_code.html">Basic HTML</a> file. <br>
Open <a href="horse.jpeg">horse</a> image.

Open Basic HTML file.
Open horse image.

Ordered List (Default)

<ol>
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>

Banana
Apple
Mango
Lichi
Orange
Guava

Ordered List (with attribute)

<ol type="A">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>

Banana
Apple
Mango
Lichi
Orange
Guava

Ordered List (Roman Number)

<ol type="i">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>

Banana
Apple
Mango
Lichi
Orange
Guava

Ordered List (start from specific number)

<ol type="1" start="13">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>

Banana
Apple
Mango
Lichi
Orange
Guava

Unordered List (Default)

<ul>
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Banana
Apple
Mango
Lichi
Orange
Guava

Unordered List (Circle)

<ul type="circle">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Banana
Apple
Mango
Lichi
Orange
Guava

Unordered List (Square)

<ul type="square">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Banana
Apple
Mango
Lichi
Orange
Guava

Unordered List (Disk)

<ul type="disk">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Banana
Apple
Mango
Lichi
Orange
Guava

Nested Ordered and Unordered List

<ul type="disk">
  <li>Fruits</li>
    <ol type="i">
      <li>Banana</li>
      <li>Apple</li>
      <li>Mango</li>
    </ol>
  <li>Vegetables</li>
  <li>Rice</li>
  <li>Oil</li>
</ul>

Fruits

Banana
Apple
Mango

Vegetables
Rice
Oil

Table

Table (Default)

<table>
  <tr>
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Roll
John	2301
Christopher	230002

Table (with double table border)

<table border="1">
  <tr>
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Roll
John	2301
Christopher	230002

Table (with single table border)

<table border="1" cellspacing="0">
  <tr>
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Roll
John	2301
Christopher	230002

Table (with table data alignment)

<table border="1" cellspacing="0">
  <tr>
    <td align="left">Name</td>
    <td align="right">Roll</td>
  </tr>
  <tr>
    <td align="right">John</td>
    <td align="center">2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Roll
John	2301
Christopher	230002

Table (with table row alignment)

<table border="1" cellspacing="0">
  <tr align="center">
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr align="right">
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Roll
John	2301
Christopher	230002

Table (with table heading row)

<table border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>Roll</th>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Roll
John	2301
Christopher	230002

Table (Rowspan)

<table border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>Batch</th>
    <th>Roll</th>
  </tr>
  <tr>
    <td>John</td>
    <td rowspan="2">23</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>

Name	Batch	Roll
John	23	2301
Christopher	23	230002

Table (Colspan)

<table border="1" cellspacing="0">
  <tr>
    <th colspan="2">First Name & Last Name</th>
    <th>Roll</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Richard</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>Tyler</td>
    <td>230002</td>
  </tr>
</table>

First Name & Last Name		Roll
John	Richard	2301
Christopher	Tyler	230002

Examples

Complex Table 1

Hint: Use colspan, rowspan, hyperlink, image and line break tags. Click here to get the answer.

Complex Table 2

Hint: Use colspan, rowspan and table data alignments. Click here to get the answer.

Complex Table 3

Hint: Use colspan, rowspan and vertical alignment. Click here to get the answer.

Complex Table 4

Hint: Use colspan, rowspan and table data alignment. Click here to get the answer.

Complex Table 5

Hint: Use colspan, rowspan and ordered list. Click here to get the answer.

Complex Table 6

Hint: Try yourself! Click here to get the answer.

This site is open source. Improve this page.