HTML Tutorial - From Beginner to Professional

Understanding Block vs Inline Elements

Block Elements

<div>, <p>, <h1>-<h6>
Start on a new line
Take full width available
Can contain other elements

Inline Elements

<span>, <a>, <img>
Don't start new lines
Only take necessary width
Can't set width/height

Using <div> for Layout

The <div> is a generic container for flow content:

<div class="header">...</div>
<div class="main-content">
    <div class="sidebar">...</div>
    <div class="content-area">...</div>
</div>
<div class="footer">...</div>

Combine with CSS for complete page layouts.

HTML Classes and How to Use Them

Classes allow styling and selecting multiple elements:

<p class="text-red highlight">Styled text</p>
<div class="card featured">...</div>

Key points:

Multiple classes separated by spaces
Reusable across elements
Primary method for CSS styling

Assigning IDs for Styling and Scripts

IDs identify unique elements:

<div id="main-header">...</div>
<form id="contact-form">...</form>

Note: IDs must be unique per page and are case-sensitive.

Common uses:

JavaScript DOM manipulation
Anchor links (#section-id)
Unique element styling

HTML Head and Meta Tags Explained

Essential head elements:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>

Important meta tags:

charset - Character encoding
viewport - Mobile responsiveness
description - SEO snippet

Designing Responsive Layouts in HTML

Key techniques for responsive design:

Use <meta name="viewport"> tag
Fluid containers (width: 100%)
Flexible images (max-width: 100%)
CSS media queries
Mobile-first approach

Example responsive grid:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">Column 1</div>
        <div class="col-sm-12 col-md-6 col-lg-4">Column 2</div>
        <div class="col-sm-12 col-md-12 col-lg-4">Column 3</div>
    </div>
</div>

Semantic HTML: Best Practices

Modern semantic elements:

<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>

<article>...</article>
<aside>...</aside>
<footer>...</footer>
<figure>...</figure>

Benefits:

Better accessibility
Improved SEO
Clearer code structure

Common HTML Layout Patterns

1. Holy Grail Layout

<div class="container">
    <header>...</header>
    <div class="main-content">
        <main>...</main>
        <nav class="left-sidebar">...</nav>
        <aside class="right-sidebar">...</aside>
    </div>
    <footer>...</footer>
</div>

2. Card Layout

<div class="card-container">
    <article class="card">...</article>
    <article class="card">...</article>
    <article class="card">...</article>
</div>

3. Magazine Layout

<div class="magazine">
    <section class="featured">...</section>
    <section class="secondary">
        <article>...</article>
        <article>...</article>
    </section>
</div>