Let's Learn HTML! 📝👨‍💻

Comprehensive guide for HTML

Want to improve this page? Raise a issue on @github.

Whats on this section?

  • 🎨 Set up HTML boilerplate, add a page title, and use Live Server extension for development.
  • 🔍 Learn heading and paragraph tags, line breaks, horizontal lines, formatting text with bold and italic tags, and creating links, lists, tables, and forms in HTML.
  • 💡 Explore media embedding, semantic tags, and practice HTML through assignments.

📺 Watch Now

We hope that you found the tutorial video helpful in understanding the basic concepts of HTML, You can refer this notes 📝 for quick revision.

Notes

HTML CheatSheet

Basic Structure

 
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    Content goes here
  </body>
</html>

Headings

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

Paragraphs

 
<p>This is a paragraph</p>

Line Break

 
<p>This is the first line.<br>This is the second line.</p>

Horizontal Line

 
<hr>

Links

 
<a href="https://www.example.com">Link text</a>

Lists

Unordered List

 
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

Ordered List

 
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

Tables

 
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
  </tbody>
</table>

Forms

 
<form>
  <label for="input">Input Label:</label>
  <input type="text" id="input" name="inputName">
  
  <label for="checkbox">Checkbox Label:</label>
  <input type="checkbox" id="checkbox" name="checkboxName" value="checkboxValue">
  
  <label>Radio Label 1:</label>
  <input type="radio" name="radioName" value="radioValue1">
  
  <label>Radio Label 2:</label>
  <input type="radio" name="radioName" value="radioValue2">
  
  <label for="date">Date:</label>
  <input type="date" id="date" name="dateName">
  
  <label for="number">Number:</label>
  <input type="number" id="number" name="numberName">
  
  <label for="color">Color:</label>
  <input type="color" id="color" name="colorName">
  
  <label for="file">File:</label>
  <input type="file" id="file" name="fileName">
  
  <button type="reset">Reset</button>
  <button type="submit">Submit</button>
</form>

Images

 
<img src="image.jpg" alt="Image description">

Iframes

Youtube Video

 
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

External Webpage

 
<iframe src="https://www.example.com"></iframe>

Audio

 
<audio src="audio_file.mp3" controls></audio>

Video

 
<video src="video_file.mp4" controls></video>