Introduction
HTML (HyperText Markup Language) is the backbone of every website. It provides the structure for web content, allowing you to create headings, paragraphs, lists, and more. Whether you’re new to coding or looking to refresh your skills, this tutorial will guide you through HTML basics and help you build your first webpage for your site, techbit.online.
In this article, you’ll learn:
- The structure of an HTML document
- Common HTML elements like headings, paragraphs, and links
- How to create a simple webpage with semantic HTML
- Best practices for writing clean HTML code
By the end, you’ll have a functional webpage you can view in your browser!
What is HTML?
HTML is a markup language used to structure content on the web. It consists of elements (or tags) that define different parts of a webpage, such as headings, images, and links. Each element is written using opening and closing tags, like <p> for paragraphs or <h1> for main headings.
Setting Up Your Environment
To start, you need:
- A text editor (e.g., VS Code, Notepad++, or even Notepad)
- A web browser (e.g., Chrome, Firefox)
- A file with a .html extension (e.g., index.html)
Create a new file called index.html and open it in your text editor. We’ll use this file to build our webpage.
Step 1: Create the Basic HTML Structure
Every HTML document starts with a standard structure. Copy the following code into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My TechBit Webpage</h1>
<p>This is my first webpage built with HTML!</p>
</body>
</html>Code language: HTML, XML (xml)Explanation:
- <!DOCTYPE html>: Declares the document as HTML5.
- <html lang=”en”>: The root element, specifying the language as English.
- <head>: Contains metadata, like the character set (meta charset) and viewport settings for responsiveness.
- <title>: Sets the webpage title shown in the browser tab.
- <body>: Contains the visible content, like headings (<h1>) and paragraphs (<p>).
Save the file and open it in your browser. You should see a heading and a paragraph.
Step 2: Add More HTML Elements
Let’s enhance the webpage with additional elements, such as a list, a link, and an image. Update your index.html with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My TechBit Webpage</h1>
</header>
<main>
<p>This is my first webpage built with HTML! Here are some things I love about coding:</p>
<ul>
<li>Creating interactive websites</li>
<li>Solving problems with code</li>
<li>Learning new technologies</li>
</ul>
<p>Visit <a href="https://techbit.online">TechBit</a> for more tutorials!</p>
<img src="https://via.placeholder.com/150" alt="A sample image">
</main>
<footer>
<p>© 2025 TechBit. All rights reserved.</p>
</footer>
</body>
</html>Code language: HTML, XML (xml)Explanation:
- Semantic Elements: <header>, <main>, and <footer> provide structure and improve accessibility.
- List: <ul> creates an unordered (bulleted) list with <li> items.
- Link: <a href=”…”> creates a hyperlink to your website.
- Image: <img src=”…” alt=”…”> adds an image (using a placeholder URL for now). The alt attribute ensures accessibility for screen readers.
Save and refresh your browser to see the updated webpage.
Step 3: Follow HTML Best Practices
To align with freeCodeCamp’s guidelines and ensure clean code:
- Use Semantic HTML: Elements like <header> and <main> add meaning and improve SEO.
- Validate Your Code: Use the W3C Markup Validator (https://validator.w3.org/) to check for errors.
- Avoid Deprecated Tags: Use <strong> instead of <b> for bold text and <em> instead of <i> for italics to add semantic meaning.
- Keep It Simple: Avoid unnecessary complexity for beginners.
Step 4: Test and Publish
- Test your webpage in multiple browsers (Chrome, Firefox, Edge) to ensure compatibility.
- Upload index.html to your techbit.online server (e.g., via FTP or a CMS like WordPress).
- Share your blog post on techbit.online with a link to the live demo or a downloadable file.
Conclusion
Congratulations! You’ve built your first webpage using HTML. You learned the basic structure, added elements like lists and links, and followed best practices for clean, accessible code. This is just the start—next, you can explore CSS to style your webpage or JavaScript to add interactivity.
Try experimenting with other HTML elements, like tables or forms, and share your webpage on techbit.online. Have questions or want to share your work? Leave a comment below or connect with the TechBit community!