Complete HTML Guide for Beginners (Part 2)

In Part 1, you learned the basics of HTML, including structure, tags, and how to create a simple webpage.

Now in Part 2, we’ll go deeper and learn how to make your webpages more structured, organized, and practical using lists, forms, tables, and semantic elements.

HTML Lists

Lists help organize content clearly.

Types of Lists

1. Ordered List (Numbered)

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Output:

HTML
CSS
JavaScript

2. Unordered List (Bullets)

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Output:
• Apple
• Banana
• Mango

HTML Tables

Tables are used to display data in rows and columns.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Aleeza</td>
    <td>20</td>
  </tr>
</table>

Explanation:

<table> → Table container
<tr> → Table row
<th> → Table heading
<td> → Table data

HTML Forms (User Input)

Forms are used to collect user data.

<form>
  Name: <input type="text"><br><br>
  Email: <input type="email"><br><br>
  <button>Submit</button>
</form>

Common Input Types:

text
email
password
number

Semantic HTML (IMPORTANT)

Semantic tags improve readability and SEO.

<header>This is header</header>
<nav>Navigation</nav>
<section>Main content</section>
<footer>Footer</footer>

These tags clearly define the structure of your webpage.

Adding More Attributes

Attributes give extra information to elements.

Example:

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

target="_blank" opens link in a new tab.

Mini Practice Task

Try this:

Create a webpage that includes:

A heading
A list of your skills
A table with your info
A simple form

Tips for Beginners

Practice daily (even 20 minutes helps)
Combine multiple concepts in one page
Don’t memorize—understand
Experiment with your own ideas

What’s Next?

➡️ Next: CSS Basics
➡️ Previous: HTML Basics (Part 1)

Keep building and practicing—this is how you become a developer!