Updated April 5, 2026
4 min read
10 views
Website Development
# HTML Basics for Beginners
## Introduction
HTML, or Hypertext Markup Language, is the foundational language used for creating web pages. Understanding HTML is essential for anyone looking to develop a website or manage web content. It allows you to structure your content, embed images, create links, and much more. This article will introduce you to the basics of HTML, providing you with the skills needed to start building your own web pages.
In this article, we will cover:
– The structure of an HTML document
– Common HTML elements
– Step-by-step instructions for creating a simple web page
– Best practices and tips
– Troubleshooting common issues
## Understanding the Structure of an HTML Document
An HTML document is structured using various elements that define the content and layout. Here’s a breakdown of a basic HTML document:
“`html
Your Page Title
Hello World!
This is my first web page.
“`
### Breakdown of Elements:
– ``: Declares the document type and version of HTML.
– ``: The root element of an HTML page.
– `
`: Contains meta-information about the document, such as the title and character set.
– ``: Sets the title of the web page, shown in the browser tab.<br />
– `<body>`: Contains the content of the web page, including text, images, and other elements.</p>
<p>## Common HTML Elements</p>
<p>Here are some of the most common HTML elements you will use:</p>
<p>– **Headings**: Use the `</p>
<h1>` to `</p>
<h6>` tags for headings.</p>
<p> “`html</p>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p> “`</p>
<p>– **Paragraphs**: The `</p>
<p>` tag defines a paragraph.</p>
<p> “`html</p>
<p>This is a paragraph of text.</p>
<p> “`</p>
<p>– **Links**: Use the `<a>` tag to create hyperlinks.</p>
<p> “`html<br />
<a href="https://www.xmla.com">Visit XMLA</a><br />
“`</p>
<p>– **Images**: The `<img>` tag embeds images.</p>
<p> “`html<br />
<img class="lazy-load" decoding="async" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" data-src="image.jpg" alt="Description of image"><br />
“`</p>
<p>– **Lists**: Use `</p>
<ul>` for unordered lists and `</p>
<ol>` for ordered lists.</p>
<p> “`html</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
<p> “`</p>
<p>## Step-by-Step Instructions: Creating a Simple Web Page</p>
<p>Follow these steps to create a simple web page using HTML:</p>
<p>### Step 1: Open a Text Editor</p>
<p>Choose a plain text editor such as Notepad (Windows) or TextEdit (Mac). You can also use code editors like Visual Studio Code or Sublime Text for a better experience.</p>
<p>### Step 2: Write the HTML Code</p>
<p>Copy the following template and paste it into your text editor:</p>
<p>“`html<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>My First Web Page
Save the file with a `.html` extension, for example, `mypage.html`.
### Step 4: Open the File in a Web Browser
Locate the saved HTML file on your computer and double-click it. It should open in your default web browser, displaying your content.
## Use Cases for HTML
Understanding HTML opens up numerous opportunities, including:
– **Creating Personal Blogs**: Share your thoughts and experiences with the world.
– **Developing Business Websites**: Showcase your products or services.
– **Portfolio Sites**: Display your work and professional achievements.
– **Landing Pages**: Promote a specific product or service effectively.
## Best Practices and Tips
– **Use Semantic HTML**: Use appropriate tags (like `
