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.
  • 📚 Learn HTML Sematic Elements.
  • 💡 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>

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>

Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer.

Article

<article>
  <h2>Sample Article Heading</h2>
  <p>An article should make sense on its own,</p>
  <p>
    and it should be possible to distribute it independently from the rest of
    the web site.
  </p>
</article>

Aside

 
<aside>
  <h2>Sample Aside Heading</h2>
  <p>The <aside> element defines some content aside from the content it is placed in (like a sidebar).</p>
  <p>The <aside> content should be indirectly related to the surrounding content.</p>
</aside>

Details and Summary

 
<details>
  <summary>Epcot Center</summary>
  <p>The <details> tag specifies additional details that the user can open and close on demand.</p>
  <p>The <details> tag is often used to create an interactive widget that the user can open and close.</p>
  <p>By default, the widget is closed. When open, it expands, and displays the content within</p>
  <p>The <summary> tag is used in conjunction with <details> to specify a visible heading for the details.</p>
</details>

Figcaption and Figure

<figure>
  <img src="sample.jpg" alt="Trulli" style="width:100%" />
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Footer

<footer>
  <p>copyrights ©</p>
  <p><a href=mailto:developer@sample.com>developer@sample.com</a></p>
</footer>

Header

<header>
  <h1>A Sample Heading</h1>
  <p>Some additional information here</p>
</header>

Main

 
<main>
  <article>
    <h2>Sample Article Header</h2>
    <p>An article should make sense on its own, and </p>
    <p>it should be possible to distribute it independently from the rest of the web site.</p>
  </article>
</main

Mark

<p>Do not forget to learn <mark>HTML</mark> today.</p>

Nav

<nav>
  <a href="/html/">HTML</a> | <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/react/">Reactjs</a>
</nav>

Section

<section>
  <h2>Section One Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>
    Cras in ante nec turpis tincidunt elementum. Duis sed est sed felis
    tristique scelerisque nec eget augue.
  </p>
  <p>Vestibulum rhoncus rutrum turpis, auctor luctus nunc egestas semper.</p>
</section>
 
<section>
  <h2>Section Two Heading</h2>
  <p>Aenean varius ac felis non vehicula r rahdirs.</p>
  <p>
    r rahdirs lacinia leo vel orci auctor vestibulum. Nunc varius rutrum eros
    non vestibulum.
  </p>
  <p>
    Duis tincidunt ullamcorper pretium. Suspendisse volutpat imperdiet nibh a
    sodales.
  </p>
</section>

Time

<p>Open from <time>10:10</time> to <time>16:10</time> every weekday.</p>