What is HTML?

HTML, or Hypertext Markup Language, is the standard language used to create and design websites and web applications. It is used to structure and format the content on the web, including text, images, links, and multimedia elements. HTML is an essential part of the backbone of the web, making it possible for us to navigate through different pages and interact with websites.

HTML is not a programming language - it's a markup language that structures the content on the web.

A Simple Analogy

Imagine you're building a house. You need to have a strong foundation and structure in place to support everything that goes inside. In this analogy, HTML is like the structural framing and foundation of the house. It provides the basic layout for everything you see and interact with on a website.

HTML Tags

HTML uses tags to define different elements of a web page. Tags are keywords enclosed in angle brackets (< and >). They are used to tell the browser how to display the content enclosed between the opening and closing tags.

Here's an example of an HTML element, which is made up of an opening tag, content, and a closing tag:

        
            html

            Editable

            
                
            
        
        
            
                 
            
            
                    1
                    
                    <p>This is a paragraph.</p>
                
            
                     
                    <p>This is a paragraph.</p>

Output

In this example, <p> is the opening tag, and </p> is the closing tag. The content between the opening and closing tags is the actual text that will be displayed on the web page.

Basic HTML Document Structure

An HTML document has a specific structure that you need to follow. Here's a simple example:

        
            html

            Editable

            
                
            
        
        
            
                  
            
            
                    01
                    
                    <!DOCTYPE html>
                

                    02
                    
                    <html>
                

                    03
                    
                      <head>
                

                    04
                    
                        <title>My First Web Page</title>
                

                    05
                    
                      </head>
                

                    06
                    
                      <body>
                

                    07
                    
                        <h1>Welcome to My Website</h1>
                

                    08
                    
                        <p>Hello, world!</p>
                

                    09
                    
                      </body>
                

                    10
                    
                    </html>
                
            
                      
                    <!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>Hello, world!</p>
  </body>
</html>

Output

Always start your HTML document with <!DOCTYPE html> to tell the browser that you're using the latest version of HTML.

In this example, the <html> element is the root of the tree. Its children are the <head> and <body> elements. The <head> element has one child, the <title> element, while the <body> element has two children, the <h1> and <p> elements.

You can visualize the tree structure of HTML by drawing a diagram, called a DOM tree (Document Object Model tree). The DOM tree shows the parent-child relationships between elements. Here's what the DOM tree for the example code looks like:

        
            
            
            
                
            
        
        
            
                 
            
            
                    1
                    
                    html
                

                    2
                    
                    ├── head
                

                    3
                    
                    │   └── title
                

                    4
                    
                    │       └── "My First Web Page"
                

                    5
                    
                    └── body
                

                    6
                    
                        ├── h1
                

                    7
                    
                        │   └── "Welcome to My Website"
                

                    8
                    
                        └── p
                

                    9
                    
                            └── "Hello, world!"

Understanding the tree structure of HTML is important because it helps you to organize your code and to manipulate elements with JavaScript. It also helps to ensure that your HTML is well-formed and semantically correct, which can improve accessibility and search engine optimization (SEO).

Why Learn HTML?

HTML is essential for anyone who wants to create or design websites and web applications. It's a fundamental skill for web developers and is often the first step in learning more advanced web technologies like CSS and JavaScript.

Learning HTML can help you:

Create your own website or blog
Understand how websites are structured and formatted
Modify existing websites to improve their design or add new features

Previous Unit

Introduction

Next Unit

HTML Document Structure

On this page

A Simple Analogy HTML Tags Basic HTML Document Structure Why Learn HTML?