Skip to main content

🏷️ Common Tags & Elements

Master the HTML tags you'll use every day.

Text Tags​

Headings (h1 - h6)​

<h1>Main Title</h1>         <!-- Use once per page -->
<h2>Section Title</h2>      <!-- Main sections -->
<h3>Subsection</h3>         <!-- Within sections -->
<h4>Sub-subsection</h4>     <!-- Nested content -->

Best Practice:

  • Use <h1> only once per page
  • Don't skip heading levels (h1 → h3 is wrong)
  • Use for page structure, not for styling

Paragraphs​

<p>This is a paragraph of text.</p>
<p>Each paragraph should be separate.</p>

Text Formatting​

<!-- Strong/Bold -->
<strong>Important text</strong>

<!-- Emphasis/Italic -->
<em>Emphasized text</em>

<!-- Bold (presentational) -->
<b>Bold text</b>

<!-- Italic (presentational) -->
<i>Italic text</i>

<!-- Marked/Highlighted -->
<mark>Highlighted text</mark>

<!-- Deleted text -->
<del>Deleted text</del>

<!-- Inserted text -->
<ins>Inserted text</ins>

<!-- Small text -->
<small>Small print</small>

<!-- Subscript -->
H<sub>2</sub>O

<!-- Superscript -->
E=mc<sup>2</sup>

Container Tags​

Divisions (Generic Container)​

<div>
    <!-- Groups multiple elements -->
</div>

Spans (Inline Container)​

<p>This is <span style="color: red;">highlighted</span> text.</p>

Sections (Semantic Container)​

<section>
    <!-- Thematic grouping of content -->
</section>

Articles​

<article>
    <!-- Self-contained content -->
</article>
<!-- External link -->
<a href="https://example.com">External Site</a>

<!-- Internal link -->
<a href="/about.html">About Us</a>

<!-- Link with title -->
<a href="page.html" title="Go to page">Click here</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank">New Tab</a>

<!-- Link to section -->
<a href="#section-id">Jump to section</a>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Media Elements​

Images​

<!-- Basic image -->
<img src="photo.jpg" alt="Photo description">

<!-- With dimensions -->
<img src="photo.jpg" alt="Photo" width="300" height="200">

<!-- With title -->
<img src="photo.jpg" alt="Photo" title="My Photo">

<!-- Responsive image -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%;">

Alt text best practices:

  • Describe what you see
  • Be concise but descriptive
  • Don't say "image of" - that's implied
  • For decorative images, use empty alt: alt=""

Videos​

<video width="400" height="300" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser doesn't support HTML5 video.
</video>

Audio​

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser doesn't support audio element.
</audio>

Iframes (Embed External Content)​

<!-- Embed a YouTube video -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/video-id" 
        allowfullscreen>
</iframe>

<!-- Embed another webpage -->
<iframe src="https://example.com" width="600" height="400"></iframe>

Lists​

Unordered List​

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered List​

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Nested Lists​

<ul>
    <li>Item 1
        <ul>
            <li>Nested item 1.1</li>
            <li>Nested item 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

Description List​

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Tables​

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
</table>

Forms & Input​

Basic Form​

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <button type="submit">Submit</button>
</form>

Input Types​

<input type="text" placeholder="Text input">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="number" min="1" max="10">
<input type="date">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="submit" value="Submit">
<textarea rows="5" cols="40"></textarea>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Meta Information​

Head Tags​

<head>
    <!-- Page title -->
    <title>Page Title</title>
    
    <!-- Character encoding -->
    <meta charset="UTF-8">
    
    <!-- Viewport for responsiveness -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Description for search engines -->
    <meta name="description" content="Page description">
    
    <!-- Keywords for search engines -->
    <meta name="keywords" content="html, tags, elements">
    
    <!-- Author -->
    <meta name="author" content="Your Name">
    
    <!-- CSS link -->
    <link rel="stylesheet" href="style.css">
    
    <!-- JavaScript link -->
    <script src="script.js"></script>
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">
</head>

Semantic Structure​

<header>
    <!-- Page header -->
</header>

<nav>
    <!-- Navigation -->
</nav>

<main>
    <article>
        <!-- Main content -->
    </article>
    
    <aside>
        <!-- Sidebar -->
    </aside>
</main>

<footer>
    <!-- Page footer -->
</footer>

Common Mistakes​

❌ Wrong:

<img src="photo.jpg">                    <!-- Missing alt -->
<a href="#">Click here</a>               <!-- Vague link text -->
<div onclick="func()">Button</div>       <!-- Should be <button> -->

✅ Correct:

<img src="photo.jpg" alt="My photo">     <!-- Has alt -->
<a href="/about">About Us</a>            <!-- Descriptive text -->
<button onclick="func()">Click</button>  <!-- Proper button -->

Next Steps​

→ Forms & Inputs → Semantic HTML → Advanced HTML