Learning Objectives

Build a strong HTML foundation before moving into semantic page structure.

📄

Understand HTML

Understand HTML as the markup language that describes the structure and meaning of web content.

🧱

Build Documents

Create a correct HTML document using doctype, html, head and body.

🏷️

Use Elements

Work confidently with tags, elements, content and attributes.

🔗

Create Links

Use anchors and href correctly for navigation.

📋

Organize Content

Use headings, paragraphs, ordered lists and unordered lists appropriately.

♿

Write Better HTML

Use meaningful alt text, correct nesting and logical heading hierarchy.

02

What Is HTML?

HTML gives a browser the structural description of a document.

HTML stands for HyperText Markup Language. It is the standard markup language used to structure content on the Web.

HTML is not primarily responsible for visual styling or application logic. It describes what content represents: a heading, paragraph, link, list, image, section and many other kinds of content.

HTML       → Structure and meaning
CSS        → Presentation and layout
JavaScript → Behaviour and interaction

A useful beginner rule is: first structure the content, then style it, then add behaviour.

03

HTML Document Anatomy

Understand the major parts before writing individual elements.

01

📄 DOCTYPE

Document declaration used at the beginning of the HTML document.

02

🌐 html

Root element of the HTML document.

03

🧠 head

Contains metadata and document information.

04

👁️ body

Contains the page content presented to users.

Key idea: The browser parses an HTML document into a structured representation rather than treating it as random text.

04

The Basic HTML Document

The standard starting point for a modern HTML page.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        My Web Page
    </title>

</head>


<body>

    <h1>
        Hello Web
    </h1>

    <p>
        Welcome to HTML.
    </p>

</body>

</html>

<head>

Contains metadata, title, linked resources and other document information.

<body>

Contains the content that forms the document presented to the user.

05

Tags, Elements and Content

Learn the terminology used when discussing HTML.

<p>
    Learn HTML with CodeBhavya.
</p>

Part	Example	Meaning
Opening tag	<p>	Starts the paragraph element.
Content	Learn HTML...	Text inside the element.
Closing tag	</p>	Ends the paragraph element.
Complete element	<p>...</p>	Complete paragraph structure.

Some elements are void elements. They do not contain normal child content and do not use a separate closing tag, such as <img> and <br>.

06

HTML Attributes

Attributes add information or configuration to elements.

<a
    href="https://codebhavya.com"
    target="_blank"
>
    Visit CodeBhavya
</a>

Attribute	Common Purpose
href	Destination of a link.
src	Source of an embedded resource.
alt	Alternative text for an image.
id	Identifies a particular element.
class	Groups elements for CSS or JavaScript.
lang	Declares the language of a document or element.

07

Headings and Paragraphs

Use content hierarchy rather than choosing elements only for their default size.

HTML provides six heading levels, from h1 through h6. They communicate hierarchy.

Paragraphs are represented by the p element.

H1 Main Topic

H2 Section

H3 Subsection

H4 Detail

<h1>
    Web Technologies
</h1>

<h2>
    HTML
</h2>

<h3>
    HTML Fundamentals
</h3>

<p>
    HTML gives a document structure and meaning.
</p>

08

Links and Navigation

Connect documents and resources using the anchor element.

The <a> element creates a hyperlink. Its href attribute identifies the destination.

<a href="https://codebhavya.com">
    CodeBhavya
</a>


<a href="about.html">
    About Us
</a>


<a href="#contact">
    Contact Section
</a>

Absolute URL

A complete web address such as https://example.com/page.

Relative URL

A path such as about.html relative to the current website or document.

09

Lists

Represent ordered and unordered collections of related items.

Unordered List

<ul>

    <li>
        HTML
    </li>

    <li>
        CSS
    </li>

    <li>
        JavaScript
    </li>

</ul>

Ordered List

<ol>

    <li>
        Learn HTML
    </li>

    <li>
        Learn CSS
    </li>

    <li>
        Learn JavaScript
    </li>

</ol>

li represents an individual list item. Choose ordered or unordered lists according to the meaning of the content.

10

Images

Embed images while preserving useful alternative information.

<img
    src="images/student.jpg"
    alt="Student learning web technologies"
>

Attribute	Purpose
src	Identifies the image resource.
alt	Provides a text alternative for meaningful images.
width / height	Can communicate intended dimensions.

Accessibility: Meaningful images should have useful alternative text. Decorative images may use an empty alt value when appropriate.

11

Nesting and Document Hierarchy

Elements can contain other elements, but the hierarchy must remain valid.

<section>

    <h2>
        HTML
    </h2>

    <p>

        Learn
        <strong>
            HTML
        </strong>

        step by step.

    </p>

</section>

The strong element is inside the paragraph, and the paragraph is inside the section. Closing tags should follow the reverse order in which nested elements were opened.

Open section
    Open p
        Open strong
        Close strong
    Close p
Close section

12

HTML Comments and Whitespace

Keep source code understandable without confusing presentation with meaning.

<!-- Main page heading -->

<h1>
    Student Portal
</h1>


<!-- Introduction -->

<p>
    Manage your academic information.
</p>

Comments are ignored as visible page content. Whitespace and indentation improve source readability, while indentation itself does not create HTML hierarchy.

13

Global Attributes and Useful Metadata

Some attributes can be used across many different HTML elements.

id

Identifies a specific element and should be unique within the document.

class

Associates an element with one or more reusable groups.

title

Provides advisory information about an element in suitable contexts.

lang

Communicates the language of text for the document or a specific element.

<html lang="en">


<p
    id="intro"
    class="lead-text"
>

    Welcome to CodeBhavya.

</p>

14

HTML vs CSS vs JavaScript

Separate structure, presentation and behaviour.

HTML

Defines document structure and meaning.

<button>
    Save
</button>

CSS

Controls appearance and layout.

.button {

    padding:
        10px;

}

JavaScript

Responds to actions and changes application state.

button.addEventListener(
    "click",
    save
);

15

Real-World Example — Student Portal

Turn a simple requirement into a structured HTML document.

Suppose a college wants a student portal page. Before adding CSS or JavaScript, HTML can establish the content structure.

<h1>
    Student Portal
</h1>


<p>
    Welcome, Bhavya.
</p>


<h2>
    Academic Details
</h2>


<ul>

    <li>
        CSE-AI&ML
    </li>

    <li>
        Semester 06
    </li>

    <li>
        CGPA 8.42
    </li>

</ul>


<h2>
    Resources
</h2>


<a href="results.html">
    View Results
</a>

16

Premium Visualizer — HTML Parsing Journey

Trace how a browser processes the major parts of a basic HTML document.

📄

STEP 01

Document begins

The browser starts processing the HTML document.

What is happening?

The active stage shows one important part of the document parsing journey.

17

Premium Interactive — HTML Page Builder

Select a building block and see how it fits into a simple document.

DOCTYPE → html → head + body → content

Complete HTML document selected

18

Common HTML Mistakes

Recognize mistakes before they become habits.

❌ Incorrect nesting

<p>
    <strong>
        Hello
    </p>
</strong>

Close nested elements in the reverse order of opening.

<p>
    <strong>
        Hello
    </strong>
</p>

❌ Missing image alternative

<img
    src="student.jpg"
>

Meaningful images should have useful alternative text.

<img
    src="student.jpg"
    alt="Student"
>

❌ Heading used only for size

<h1>
    Tiny detail
</h1>

Choose heading levels according to document hierarchy, not simply visual size.

❌ Empty link destination

<a>
    Click here
</a>

Use a meaningful destination when the element represents a link.

<a href="results.html">
    Results
</a>

19

Interview Preparation

Click each card to reveal the answer. Try answering before flipping.

QUESTION 01

What is HTML?

Click to reveal answer

ANSWER

HTML

HTML is a markup language used to structure and describe the meaning of content in web documents.

MCQ 02 EASY

Which element is the root of an HTML document?

MCQ 03 EASY

Which attribute specifies the destination of an anchor?

MCQ 04 EASY

Which element creates an unordered list?

MCQ 05 MODERATE

Which attribute provides alternative text for an image?

MCQ 06 MODERATE

Which element contains the visible page content?

MCQ 07 MODERATE

Which statement about HTML attributes is correct?

MCQ 08 MODERATE

Which is the correctly nested structure?

21

Extra Practice

Build small pages without copying the examples above.

01

Create a personal profile page containing your name, a short introduction and three skills.

02

Create a learning-resources page containing three meaningful links and a heading hierarchy.

03

Create a student profile with name, course, skills, image with alt text and a CodeBhavya link.

04

Create a college department page with a main heading, two sections and lists of courses.

05

Write a valid HTML document from memory without looking at the basic template.

06

Inspect one of your old HTML pages and identify at least five elements and five attributes.

22

Quick Revision

Remember these points before moving to Semantic HTML.

01

HTML describes the structure and meaning of web content.

02

DOCTYPE identifies the document type and supports standards-based rendering.

03

html is the root element; head contains metadata and body contains document content.

04

Attributes provide additional information inside opening tags.

05

h1–h6 communicate heading hierarchy; p represents paragraphs.

06

a creates links and href specifies their destination.

07

ul, ol and li represent unordered lists, ordered lists and list items.

08

img embeds an image and meaningful images should have appropriate alt text.

Text that provides an alternative description for a meaningful image.

TERM

Void Element

Click to see meaning

DEFINITION

Void Element

An element that does not contain normal child content and does not use a separate closing tag.