Skip to content
This repository has been archived by the owner on Sep 13, 2024. It is now read-only.

Basic HTML tags can be found here. Hopefully, it will be helpful for the beginners.

License

Notifications You must be signed in to change notification settings

nishatrhythm/HTML-for-Beginners

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 H2O

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)2 = a2 + 2ab + b2

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>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. 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>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. 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>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. 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>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. 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
    1. Banana
    2. Apple
    3. 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 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.

About

Basic HTML tags can be found here. Hopefully, it will be helpful for the beginners.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages