Getting Started with HTML

Introduction

HTML (HyperText Markup Language) is the easiest yet most essential thing you can learn in web development. It’s so simple that it should be taught in schools to kids! However, many developers overlook its importance because HTML doesn’t throw errors like programming languages do.

But here’s the truth: A good web design starts with proper HTML.

If you don’t use semantic tags, your webpage will be hard to maintain.
If your class names and IDs are messy, styling with CSS will be a nightmare.
If your HTML structure is incorrect, your webpage will break.

Think of HTML as the skeleton of a website—if the bones are misplaced, the whole structure collapses. So, let’s dive into how to write proper HTML with a structured learning roadmap.

How to Think When Writing HTML

Before you start coding, you need to analyze the layout of the webpage you’re building. A well-structured HTML document follows a logical breakdown:

1. Identify the Layout & Sections

Look at the design and break it down into sections:

Header – Usually contains a logo and navigation.
Main Content – The core part of the page, divided into sections.
Sidebar – Additional content like links or advertisements.
Footer – Page ending with copyright or links.

Use semantic tags to define these sections properly:

<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>

2. Use Containers for Structuring Content

To keep your layout organized, wrap sections inside container divs.
Example:

<section class="container">
    <div class="row">
        <div class="column">
            <h2>Heading</h2>
            <p>Some text content here.</p>
        </div>
    </div>
</section>

.container holds the entire section.
.row divides content into horizontal sections.
.column creates separate content blocks.

3. Choose the Right Tags for Content

Once you have the structure, use appropriate HTML tags:

Text Content → Use <h1> to <h6> for headings, <p> for paragraphs.
Lists → Use <ul> and <ol> for unordered/ordered lists.
Links → Use <a href="url"> for navigation.
Forms → Use <form>, <input>, <button>.
Media → Use <img> for images, <video> for videos, and <audio> for sound files.

Example of a structured section with proper tags:

<section>
    <div class="container">
        <h2>Welcome to My Website</h2>
        <p>This is a short introduction about the page.</p>
        <img src="image.jpg" alt="A sample image">
    </div>
</section>

4. Keep HTML Readable & Maintainable

Use indentation to organize nested elements.
Add comments to clarify sections in your code:

<!-- This is the navigation menu -->
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Keep class names meaningful and consistent for better CSS styling.

By structuring your HTML properly, you make it easier to read, style, and maintain.

Roadmap to Learning HTML

To master HTML, you should follow a structured approach:

1. Understanding Basic HTML Structure

Learn the basic document structure (Doctype, <html>, <head>, <body>).
Understand how HTML elements work (opening and closing tags).
Create a simple web page with text, headings, and paragraphs.

2. Essential HTML Tags

Start by learning the fundamental HTML tags:

Headings (<h1> to <h6>) – Define page structure.
Paragraphs (<p>) – Add text content.
Lists (<ul>, <ol>, <li>) – Organize content.
Links (<a href="url">) – Navigate between pages.
Images (<img src="image.jpg" alt="description">) – Display pictures.

3. Attributes & Their Importance

HTML tags can have attributes that provide additional information:

class and id – Used for CSS styling and JavaScript targeting.
alt – Provides alternative text for images (important for accessibility).
href – Defines the link destination for <a> tags.
src – Specifies the source of media files like images, videos, and audio.

4. Comments & Code Organization

Use  to add notes in your code.
Helps in documentation and debugging.

5. Viewport & Meta Tags (Essential for Responsive Web Design)

Meta tags are placed inside <head> to provide page information:

<meta charset="UTF-8"> – Ensures proper character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> – Makes your site mobile-friendly.
<meta name="description" content="Short description of your webpage"> – Helps with SEO.

6. Forms & User Input

Forms allow users to interact with your website. Learn about:

<form> – The container for all form elements.
<input> – Fields like text, email, password, etc.
<label> – Associates text with an input field for accessibility.
<button> & <submit> – For form submission.
<select> & <option> – Dropdown menus.

7. Semantic HTML – Writing Meaningful Code

Semantic tags give meaning to the structure of a webpage. Instead of using generic <div> elements everywhere, use:

<header> – Represents the top section of a page.
<nav> – For navigation menus.
<main> – Contains the main content of the page.
<section> – Defines sections of content.
<article> – Represents an independent piece of content.
<aside> – Used for sidebars or related content.
<footer> – The bottom section of a page.

8. Iframes – Embedding External Content

The <iframe> tag allows embedding external content like Google Maps, YouTube videos, and other web pages.

Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/example_video" frameborder="0" allowfullscreen></iframe>

9. Media Tags – Adding Multimedia Content

Learn how to add videos and audio files:

<audio> – Embeds audio files.
<video> – Embeds video files.