Course

Web Development
  • 1.1 Introduction to the Web
  • 2.1 HTML Basics
  • 2.2 Text & Content
  • 2.3 Layout & Grouping
  • 2.4 Lists & Tables
  • 2.5 Media & Embedding
  • 2.6 Forms
  • 2.7 Semantic HTML
  • 2.8 Accessibility & SEO
  • 3.1 CSS Introduction
  • 3.2 CSS Syntax
  • 3.3 CSS Selectors
  • 3.4 Typography
  • 3.5 Colors & Backgrounds
  • 3.6 Text Styling
  • 3.7 Box Model
  • 3.8 Units
  • 3.9 Display & Positioning
  • 3.10 Layout Systems
  • 3.11 Responsive Design
  • 3.12 Animations
  • 3.13 Modern CSS
  • 3.14 Performance & Accessibility
  • 3.15 Tailwind CSS Basics
  • 4.1 Introduction to JavaScript
  • 4.2 Variables & Scope
  • 4.3 Data Types
  • 4.4 Type Conversion
  • 4.5 Operators
  • 4.6 Control Flow
  • 4.7 Loops
  • 4.8 Functions
  • 4.9 Advanced Functions
  • 4.10 Objects & Arrays
  • 4.11 The this Keyword

2.1 HTML Basics

Updated Jul 2, 2026

2.1 HTML Basics

Updated Jul 2, 2026

HTML

HTML (HyperText Markup Language) is the standard language used to create webpages.

HTML tells the browser:

  • What content exists on a page
  • How content is organized
  • The meaning of different pieces of content

Every website you visit uses HTML.

HTML Structure

Every HTML document follows a standard structure.

Example

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>Welcome to HTML.</p>
</body>
</html>

Notice that this document contains several parts.

Structure

HTML Document
│
├── DOCTYPE
├── html
│   ├── head
│   └── body

We will look at each of these individually.

DOCTYPE

At the top of every HTML document is the DOCTYPE declaration.

Example

<!DOCTYPE html>

This tells the browser that the document uses HTML5.

Without this line, browsers may render pages differently.

For this reason, the DOCTYPE should always be the first line of an HTML document.

Example

<!DOCTYPE html>
<html>
...
</html>

html

The <html> element is the root element of every webpage.

Everything on the page lives inside this tag.

Example

<html>
    <head>
    </head>

    <body>
    </body>
</html>

Often, we also specify a language.

Example

<html lang="en">

This tells browsers and search engines that the page is written in English.

It also helps screen readers and accessibility tools.

head

The <head> element contains information about the webpage.

Most of this information is not displayed directly to users.

Example

<head>
    <title>My Website</title>
    <meta charset="UTF-8">
</head>

Common Elements Inside <head>

head
├── title
├── meta
├── link
├── script
└── style

Purpose

Element Purpose
title Sets the browser tab title
meta Provides information about the page
link Connects external files such as CSS
script Loads JavaScript
style Contains CSS

body

The <body> element contains everything visible on the webpage.

Example

<body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
</body>

Everything users see is placed inside the <body> element.

Examples

body
├── Headings
├── Paragraphs
├── Images
├── Forms
└── Buttons

meta

Meta tags provide information about a webpage.

They help browsers and search engines understand the page.

Character Encoding

One common meta tag is:

<meta charset="UTF-8">

This enables support for many characters and languages.

Example

<p>नेपाल 🇳🇵</p>

Viewport Meta Tag

Another common meta tag is:

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

This tells mobile devices how to display the page.

Without it, webpages may appear zoomed out on phones.

With it, webpages become responsive.

Description Meta Tag

We can also provide a description for the webpage.

<meta
    name="description"
    content="Learn HTML from beginner to advanced."
>

Search engines may display this description in search results.

Tags and Attributes

HTML is built using tags.

Example

<h1>Hello</h1>

Notice the structure:

<h1>      Opening Tag
Hello     Content
</h1>     Closing Tag

Most HTML elements follow this pattern.

Attributes

Attributes provide additional information about an element.

Example

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

Here:

href                  → Attribute
https://google.com    → Value

Attributes are placed inside the opening tag.

Syntax

<tag attribute="value">

An element can have multiple attributes.

Example

<img
    src="image.jpg"
    alt="Nature"
    width="300"
>

HTML Comments

Comments are notes written for developers.

Browsers completely ignore comments.

Syntax

<!-- This is a comment -->

Example

<!-- Navigation Section -->

<nav>
    ...
</nav>

Common Uses

  • Documentation
  • Explanations
  • Organizing code
  • Temporarily disabling code

Case Insensitivity

HTML tags are case-insensitive.

The following examples work the same way:

<h1>Hello</h1>
<H1>Hello</H1>
<H1>HELLO</H1>

However, modern HTML follows the best practice of using lowercase tags.

Recommended

<h1>Hello</h1>

Whitespaces

Browsers ignore extra spaces and line breaks.

Example

<p>Hello     World</p>

Output

Hello World

Even if the content appears on multiple lines:

<p>
Hello

World
</p>

Output

Hello World

The browser automatically collapses multiple spaces and line breaks into a single space.

The <pre> Element

Sometimes we want spaces and line breaks to be preserved exactly as they are written.

For this purpose, HTML provides the <pre> (preformatted text) element.

Example

<pre>
Hello

World
</pre>

Output

Hello

World

Notice that all spaces and line breaks remain unchanged.

When to Use <pre>

The <pre> element is commonly used for:

  • Code examples
  • ASCII art
  • Text formatting
  • Command-line output
  • Preserving whitespace

HTML Entities

Some characters have special meaning in HTML.

For example:

<p><h1></p>

The browser interprets <h1> as an HTML tag.

If we want to display it as plain text, we use HTML entities.

Example

<p>&lt;h1&gt;</p>

Output

<h1>

Common HTML Entities

Character Entity
< &lt;
> &gt;
& &amp;
" &quot;
' &apos;
Space &nbsp;
© &copy;
® &reg;
™ &trade;

Example

<p>&copy; 2025 Samir</p>

Output

© 2025 Samir

Non-Breaking Space (&nbsp;)

The &nbsp; entity creates a space that the browser does not collapse.

Example

HTML&nbsp;&nbsp;&nbsp;CSS

Output

HTML   CSS

Key Takeaway

Every HTML page starts with a similar foundation.

Example

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

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>

<body>

    Content Goes Here

</body>

</html>

As you continue learning HTML, everything you build will be placed inside this structure.

This structure forms the foundation of every website on the Internet.

1.1 Introduction to the Web2.2 Text & Content