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>
3. Links
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
Save this code in a file with the extension
.html
(e.g.,index.html
).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:
Twitter (X): https://x.com/Abdelhakim99891
Instagram: https://www.instagram.com/abdelhakim.baalla/
Let’s connect and grow together! 🚀
Subscribe to my newsletter
Read articles from Abdelhakim Baalla directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
