HTML Basic Tags

Basic HTML Format

<!DOCTYPE html>
<html>
  <body>
    Hello world!
  </body>
</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
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.

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">

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.

Name		Name	Last commit message	Last commit date
Latest commit History 39 Commits
images		images
.gitattributes		.gitattributes
39.html		39.html
42.html		42.html
44.html		44.html
46.html		46.html
50.html		50.html
LICENSE		LICENSE
README.md		README.md
basic_html_code.html		basic_html_code.html
basic_table.html		basic_table.html
colspan.html		colspan.html
rowspan.html		rowspan.html
valign.html		valign.html

License

nishatrhythm/HTML-for-Beginners

Folders and files

Latest commit

History

Repository files navigation