---

🌐 Getting Started with HTML: Lists, Links, Images, Tables & Semantic Tags

HTML (HyperText Markup Language) is the foundation of web development. In this post, I’ll walk you through six essential HTML features using practical examples and simple explanations.

🏢 Shoutout to DevSync for inspiring this beginner series in HTML. Follow them for more dev-friendly insights!

---

✅ 1. HTML Lists: Ordered & Unordered

Lists help structure content in a readable format. HTML provides two types of lists:

➔ Unordered List (<ul>) with Nested Ordered List

<ul type="disc">
  <li>This is my first item
    <ol type="a">
      <li>This is Yash</li>
      <li>This is Disha</li>
      <li>This is Om</li>
    </ol>
  </li>
  <li>This is my second item</li>
  <li>This is my third item</li>
</ul>

➔ Ordered List (<ol>)

<ol type="I">
  <li>This is my first item</li>
  <li>This is my second item</li>
  <li>This is my third item</li>
</ol>

These tags help organize and display data with clarity and hierarchy.

---

🔗 2. Anchor Tags (Links)

Anchor tags allow you to create hyperlinks to external or internal pages.

<a href="https://www.google.com" target="_blank">Visit Google</a>

Output: Opens Google in a new tab. The target="_blank" attribute ensures the link opens in a separate window.

---

🖼️ 3. Image Tag and Resizing

Display images and control their size using the img tag:

<img src="https://via.placeholder.com/150" alt="Sample Image" width="200" height="150">

Output: A 200x150 placeholder image. Using alt text ensures accessibility for screen readers.

---

🏗️ 4. Semantic HTML Markup

Semantic tags give meaning to HTML elements and improve SEO and accessibility.

<header>
  <h1>Welcome to My Blog</h1>
</header>

<nav>
  <a href="#home">Home</a> |
  <a href="#contact">Contact</a>
</nav>

<main>
  <section>
    <h2>About Me</h2>
    <p>I love coding and building web pages!</p>
  </section>
  <aside>
    <h3>Quick Links</h3>
    <ul>
      <li><a href="#top">Go to Top</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2025 My Blog. All rights reserved.</p>
</footer>

This structure makes the webpage more meaningful and easier to navigate.

---

🔣 5. HTML Entities

HTML entities are used to display reserved or special characters.

<p>a &lt; b</p>
<p>a &gt; b</p>
<p>a &nbsp; b</p>
<h1>The sky is &#9729; &amp; This is umbrella &#9748;</h1>

Output:

• a < b

• a > b

• a b (with non-breaking space)

• ☁ & This is umbrella ☔

Entities are essential when writing characters that might be misinterpreted as code.

---

📊 6. Tables with <thead>, <tbody>, colspan, and rowspan

Tables organize data into rows and columns.

<table border="1">
  <caption>Test Table</caption>
  <thead>
    <tr>
      <th rowspan="2"></th>
      <th colspan="2">Average</th>
      <th rowspan="2">Red Eyes</th>
    </tr>
    <tr>
      <th>Height</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Males</td>
      <td>1.9</td>
      <td>0.03</td>
      <td>40%</td>
    </tr>
    <tr>
      <td>Females</td>
      <td>1.7</td>
      <td>0.002</td>
      <td>65%</td>
    </tr>
  </tbody>
</table>

Output (simplified):

+--------+--------+--------+----------+
|        | Height | Weight | Red Eyes |
+--------+--------+--------+----------+
| Males  |  1.9   | 0.03   |   40%    |
|Females|  1.7   | 0.002  |   65%    |
+--------+--------+--------+----------+

Tables are great for displaying structured information like statistics and reports.

---

🚀 Conclusion

Mastering these HTML elements is essential for building clean and functional web pages. From structuring content with lists and tables to enhancing meaning with semantic tags, every HTML skill you gain brings you closer to being a confident web developer.

📌 Tip: Practice these examples in a live HTML editor to solidify your understanding.

Stay tuned for the next post on CSS styling to make your HTML pages beautiful and responsive!

---

📝 Written by @YashKalbhute | Inspired by Devsync