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>

Break Line

 
<br>

Anchor Element

 
<a href="https://www.example.com">Link text</a>
 
Example:
 
```html
 
<a href="https://www.youtube.com">Youtube</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>

Semantic Tags

Header

 
<header>
  <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact Us</a></li>
      </ul>
    </nav>
  </header>

Main

 
<main>
  <section>
    <h2>Home</h2>
    <p>Welcome to our website.</p>
  </section>
 
  <section>
    <h2>About</h2>
    <p>We are a team of passionate developer working on improving the content...</p>
  </section>
        
  <section>
    <h2>Contact Us</h2>
    <p>Email Us at sample@mywebsite.com </p>
  </section>
 
  <article>
    <h2>Latest News</h2>
    <p>Breaking news: Something significant has happened...</p>
  </article>
</main>

Aside

 
<aside>
  <h3>Related Links</h3>
    <ul>
      <li><a href="/archive">News Archive</a></li>
      <li><a href="/terms">Terms of Service</a></li>
    </ul>
</aside>

Footer

 
<footer>
  <p>&copy; 2023 My Website</p>
    <address>
      Contact: <a href="mailto:sample@mywebsite.com">sample@mywebsite.com</a>
    </address>
</footer>