What is HTML?

Learn the basics of HyperText Markup Language, the foundation of web pages.

Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages. HTML describes the structure of a webpage using elements represented by tags.

HTML elements form the building blocks of all websites. Browsers read HTML files and render the content for users.

Key Features of HTML:

  • Defines the structure and layout of a webpage
  • Uses tags to mark up content
  • Supports embedding images, links, videos, and other media
  • Works with CSS and JavaScript to create interactive and styled pages

Why Learn HTML?

HTML is essential for anyone looking to build websites or web applications. It provides the foundation for web development, allowing you to create structured content that can be styled with CSS and made interactive with JavaScript.

Understanding HTML is the first step in becoming a web developer. It enables you to create and manipulate web pages, making it a crucial skill in the tech industry.

Basic HTML Document Structure

An HTML document is structured with a series of elements that define the content and layout of the page. Each element is represented by a tag, which consists of an opening tag and a closing tag.

An HTML document starts with a doctype declaration followed by the <html> tag. Inside the <html> tag, there are two main sections: the <head> and the <body>.

Here’s a breakdown of the basic structure of an HTML document:

  • <!DOCTYPE html> - Declares the document type and version of HTML
  • <html> - Root element of the HTML document
  • <head> - Contains meta-information about the document (like title, character set, styles)
  • <body> - Contains the content of the webpage (text, images, links, etc.)

Real-world Analogy:

HTML is like the skeleton of a human body — it provides structure, but without style (CSS) or action (JavaScript).

HTML File Extension:

HTML files typically have the extension.html or .htm . You can create an HTML file using any text editor, such as Notepad, Visual Studio Code, or Sublime Text.

When you save your file, make sure to use the .html extension so that browsers can recognize it as an HTML document.

For example, you can save your file as index.php or about.php .

HTML files can be opened in any web browser, such as Chrome, Firefox, or Safari. When you open an HTML file in a browser, it interprets the HTML code and displays the content as a webpage.

To view your HTML file, simply double-click it, or right-click and select "Open with" followed by your preferred web browser.

As you learn more about HTML, you will discover various elements and attributes that allow you to create complex and interactive web pages.

HTML is the foundation of web development, and mastering it is essential for anyone looking to build websites or web applications.

In this course, you will explore various HTML elements, attributes, and best practices to create well-structured and accessible web pages.

By the end of this course, you will have a solid understanding of HTML and be able to create your own web pages from scratch.

Let’s get started with the basics of HTML!

Example of a Basic HTML Document:

To create a simple HTML document, you can use the following structure:

Here’s a simple example of a basic HTML document:

Basic HTML Example:

                            
<!DOCTYPE html> <!-- Declares HTML5 document -->
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- Character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive -->
  <title>My First Page</title> <!-- Title on browser tab -->
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph inside the body.</p>
</body>
</html>

OUTPUT

Hello, World!

This is a paragraph inside the body.

Important Note:

HTML is case-insensitive, but lowercase is the standard in modern HTML (HTML5).

This code creates a simple webpage with a title and a heading. The <title> tag sets the title of the page that appears in the browser tab, while the <h1> tag creates a large heading on the page.

As you progress through this course, you will learn more about HTML elements and how to use them to create complex and interactive web pages.

Back to Course Next: HTML Elements