PREVIOUS NEXT

HTML – Basic Tags

Welcome to this guide on HTML Basic Tags in a Fun Way! We’ll explore essential HTML tags with humor and engaging examples to make learning easy. These HTML Basic Tags in a Fun Way help structure content and make coding enjoyable.

Tag	Description
<!DOCTYPE html>	Document type
<html>	Main element of HTML document
<head>	Contains Metadata like title, keywords, author
<title>	Title for the document
<body>	Content of the document
<h1>-<h6>	HTML Headings
<p>	HTML Paragraph
<a>	Used for hyperlink to another webpage
<img>	Used to add images in the document
<ul> and <ol>	Used to create ordered or unordered list
<li>	Used list items
<table>	Used to create tables
<tr>	Used to create tables row
<td>	Used to create tables column
<form>	Used for HTML form for user input
<input>	Used for input control
<select>	Used for drop-down list
<option>	Used for option in a drop-down list
<button>	Used for clickable button

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

<head>
    <style>
      .heading { color: blue; }
      .paragraph { font-size: 16px; }
      .link { color: green; text-decoration: none; }
      .image { width: 200px; height: auto; }
      .list { margin: 10px 0; padding-left: 20px; }
      .btn-tag{
        padding: 5px 10px;

}
      .table, .table th, .table td { border: 1px solid black; border-collapse: collapse; padding: 5px; }
      .form-group { margin-bottom: 10px; }
    </style>
  </head>

<h1 class="heading">Heading 1</h1>
    <h2 class="heading">Heading 2</h2>
    <h3 class="heading">Heading 3</h3>
    <h4 class="heading">Heading 4</h4>
    <h5 class="heading">Heading 5</h5>
    <h6 class="heading">Heading 6</h6>

<p class="paragraph">This is an HTML paragraph.</p>

<a class="link" href="https://designwithrehana.com">Click here to visit Example</a> <br> <br>

<img decoding="async" class="lazy lazy-hidden image" width="60px" height="60px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-type="image" data-lazy-src="https://designwithrehana.com/wp-content/uploads/2023/12/cropped-Logo.png" alt="Sample Image" /><noscript><img decoding="async" class="image" width="60px" height="60px" src="https://designwithrehana.com/wp-content/uploads/2023/12/cropped-Logo.png" alt="Sample Image" /></noscript>

<h3>Unordered List</h3>
    <ul class="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

<h3>Ordered List</h3>
    <ol class="list">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>

<h3>HTML Table</h3>
    <table class="table">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>Mumbai</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>28</td>
        <td>Pune</td>

</tr>
    </table>

<h3>HTML Form</h3>
    <form>
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
      </div>

<div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
      </div>

<div class="form-group">
        <label for="country">Country:</label>
        <select id="country" name="country">
          <option value="usa">USA</option>
          <option value="uk">UK</option>
          <option value="canada">Canada</option>
        </select>
      </div>

</form>
    <button class="btn-tag">Submit</button>

Important Note: Want to download the full course as a PDF? Click here to save it locally!

PREVIOUS NEXT