What is HTML? A Beginner’s Guide to Building Web Pages


What is HTML? A Beginner’s Guide to Building Web Pages

Photo by Luca Bravo on Unsplash

If you’re new to web development, HTML is the perfect place to start. It’s the foundation of every website you visit, and learning it is the first step toward becoming a web developer. In this guide, we’ll cover everything you need to know about HTML, from what it is to how to create your first web page.

What is HTML?

HTML stands for HyperText Markup Language. It’s the standard language used to create and structure content on the web. HTML uses tags to define elements like headings, paragraphs, images, links, and more. These elements are the building blocks of every website.

Why Learn HTML?

  • It’s Essential: Every website uses HTML. Without it, the web wouldn’t exist as we know it.

  • Easy to Learn: HTML has a simple syntax, making it beginner-friendly.

  • Foundation for Other Technologies: Once you know HTML, you can easily learn CSS and JavaScript to create dynamic and stylish websites.

Basic Structure of an HTML Document

Every HTML document follows a standard structure. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page. I’m learning HTML!</p>
</body>
</html>

Common HTML Tags

Here are some of the most commonly used HTML tags:

1. Headings

Headings are used to define titles and subtitles. There are six levels of headings, from <h1> (most important) to <h6> (least important).

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>

2. Paragraphs

The <p> tag is used to define paragraphs of text.

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

The <a> tag is used to create hyperlinks. Use the href attribute to specify the link’s destination.

<a href="https://www.example.com">Visit Example.com</a>

4. Images

The <img> tag is used to embed images. Use the src attribute to specify the image file and the alt attribute to provide alternative text.

<img src="image.jpg" alt="A description of the image">

5. Lists

HTML supports both ordered (<ol>) and unordered (<ul>) lists.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First Item</li>
    <li>Second Item</li>
</ol>

6. Divisions

The <div> tag is used to group elements together for styling or layout purposes.

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

Creating Your First Web Page

Let’s put everything together and create a simple web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page. I’m learning HTML!</p>
    <a href="https://www.example.com">Visit Example.com</a>
    <img src="image.jpg" alt="A beautiful landscape">
</body>
</html>

Run HTML

  1. Save this code in a file with the extension .html (e.g., index.html).

  2. Open the file in your browser to see your web page in action!


Tips for Learning HTML

  • Practice Regularly: The more you code, the better you’ll get.

  • Use Online Resources: Websites like MDN Web Docs and W3Schools are great for learning HTML.

  • Experiment: Try creating different types of web pages to see what you can build.


Conclusion

HTML is the foundation of web development, and learning it is the first step toward building your own websites. With this guide, you’ve learned the basics of HTML, including its structure, common tags, and how to create your first web page. Keep practicing, and soon you’ll be ready to move on to CSS and JavaScript!

Follow Me for More!

If you found this guide helpful, feel free to follow me for more tutorials, tips, and insights on web development and programming:

Let’s connect and grow together! 🚀

1
Subscribe to my newsletter

Read articles from Abdelhakim Baalla directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Abdelhakim Baalla
Abdelhakim Baalla