What is HTML?

HTML (HyperText Markup Language) is the foundation of every website. It organizes content like text, images, and links, while CSS and JavaScript handle design and interactivity.

In HTML:

  • Hypertext refers to links that connect web pages, either within the same website or between different websites.
  • Markup means using special tags to structure and format content like text, images, and links for display in a web browser.

How Does HTML Work?

When you open a website, your browser reads the HTML code and displays it on the screen. Don’t worry about what the code means yet. We’ll explore it in more detail in the next chapter. Here’s a simple example of HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is my first webpage using HTML.</p>
    </body>
</html>

Run this code in an online HTML playground to see how it works!

My First Webpage - HTML Tutorial
My First Webpage – HTML Tutorial

The HTML code is made up of elements. Most elements have two tags: an opening tag and a closing tag. These tags tell the browser how to handle the content placed between them.

Types of Tags in HTML

There are three types of tags in HTML:

  1. Opening (start) tag: It consists of a left-angle bracket (<), a tag name, and a right-angle bracket (>), e.g., <p> (where p stands for paragraph).
  2. Closing (end) tag: It has a forward slash (/) before the tag name, e.g., </p> is a closing paragraph tag.
  3. Self-closing (empty) tags: These tags do not require a closing tag because they don’t have any content inside. They are also known as empty tags or void elements. For example, <img /> is used to display images and <br /> is used to create line breaks.

Tag names in HTML are case-insensitive. This means they can be written in uppercase, lowercase, or a mixture of both. For example, the <html> tag can be written as <Html>, <HTML>, or in any other combination. However, the recommended practice is to write tags in lowercase.

What is an HTML Element?

Anatomy of an HTML element
HTML Element

An HTML element consists of a start tag, content, and an end tag. For example, <p>Hello HTML</p> is a paragraph element where <p> is the start tag, “Hello HTML” is the content, and </p> is the end tag.

What Do HTML Tags Do?

  • HTML tags provide instructions to web browsers on how to display content like text, images, links, and other media.
  • HTML tags define the structure of a webpage and help browsers interpret the code correctly.
  • HTML tags play a role in SEO (Search Engine Optimization) by helping search engines understand and rank web pages based on their content.

Why is HTML Important?

  • It creates the structure of a webpage.
  • It is easy to learn and widely used.
  • Every web developer must know HTML—it’s the first step in web development!

Fun Fact 🎉

Did you know the first website ever created was just a simple HTML page? It was built in 1991 by Tim Berners-Lee, the inventor of the World Wide Web!