What is HTML? A Beginner's Guide to Understanding HTML

Updated Friday, May 3, 2024, 6 PM

Have you ever wondered how websites are made? HTML is one of the key ingredients that helps create web pages on the internet! Let's learn about what HTML is, how it works, and how you can use it to build your own web pages.

1. What is HTML?

HTML stands for "HyperText Markup Language." It is a language used to create web pages. HTML tells a web browser (like Chrome or Firefox) how to display a web page, such as what text to show, where to put pictures, and how to make a page look nice.

2. Building Blocks of HTML

Think of HTML as building blocks that you can put together to build a web page. These building blocks are called "elements" and are made up of "tags." Let's learn more about tags and elements!

HTML Tags

HTML tags are words that are wrapped in angle brackets <>. These tags tell the web browser what to do. For example:

<h1>Hello, world!</h1>

The tag <h1> is used to create a big heading that says "Hello, world!"

HTML Elements

HTML elements are created using tags. Elements usually have an opening tag (like <p>) and a closing tag (like </p>), with content in between:

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

The <p> and </p> tags create a paragraph element that contains the text "This is a paragraph."

3. Common HTML Tags

Here are some common HTML tags you can use to create different parts of a web page:

Headings: Use <h1> to <h6> tags for different sizes of headings.
Paragraphs: Use <p> to create paragraphs of text.
Links: Use <a> to create clickable links to other web pages or websites.
Images: Use <img> to add pictures to your web page.
Lists: Use <ul> and <ol> for unordered and ordered lists, and <li> for list items.

4. How to Create a Simple Web Page

Let's put everything together to create a simple web page:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>Welcome to my first web page!</p>
        <p>Here's a link to my favorite website: <a href="https://www.example.com">Example</a>.</p>
        <p>Check out this cool picture:</p>
        <img src="https://www.example.com/image.jpg" alt="A cool picture">
        <h2>My Favorite Hobbies</h2>
        <ul>
            <li>Reading</li>
            <li>Drawing</li>
            <li>Playing games</li>
        </ul>
    </body>
</html>

This simple web page includes a title, headings, paragraphs, a link, an image, and a list of hobbies!

5. How to View Your Web Page

To see your web page, follow these steps:

Open a text editor (like Notepad or a coding editor like Visual Studio Code).
Copy and paste the HTML code from the previous section into your text editor.
Save the file with a name like my-first-webpage.html.
Open the file using a web browser (like Chrome, Firefox, or Safari).

Now you should see your simple web page! Try making changes to the code and see how the web page changes.

6. Epilogue

HTML is the foundation of web pages and an important skill to learn if you want to create your own websites. Start with the basic tags and elements, and as you practice, you'll get better at building more complex web pages. Have fun exploring the world of HTML!