If you have ever wondered how to write html code, you are already halfway to becoming a web creator. HTML is the foundation of every website you visit. It describes the structure of a page, tells the browser what each piece of content means, and creates the basic layout that everything else builds upon. Learning HTML does not require math skills, advanced tools, or any previous programming experience. All you need is a laptop, a simple text editor, and a willingness to experiment.
This guide teaches you step by step. You will learn what HTML is, how it works, how to write tags properly, how to structure a real webpage, and how to avoid common mistakes beginners struggle with. The goal is to help you understand concepts in a clear and human way so you can start building pages with confidence.
By the time you finish, you will have a complete webpage that you built yourself.
HTML stands for HyperText Markup Language. It is not a programming language. Instead, it describes content. When you write HTML, you are essentially telling the browser what each part of the page represents.
HTML helps you define:
Headings
Paragraphs
Images
Links
Buttons
Lists
Layout sections
Forms
If you ever want to learn CSS or JavaScript later, you will need a solid understanding of how to write html code first. HTML gives your webpage structure, and everything else adds style or functionality.
To write HTML, you only need a basic text editor. There is no installation process or compiler required.
VS Code
Sublime Text
Notepad++
Atom
Brackets
If you are on Windows or macOS, you can even start with the built in Notepad or TextEdit, but using VS Code will make your life much easier.
Open your editor and create a new file. Save it with the name:
index.html
The name “index” is a common default for homepages, but you can pick anything you want.
Now you are ready to start writing HTML.
Every HTML file follows the same basic structure. Here is a simple template you will use often:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
This may look like a lot at first, but each part has a purpose.
doctype
Tells the browser that this is an HTML5 document.
html tag
Wraps the entire content.
head section
Contains metadata such as the title, character encoding, and optional scripts.
body section
Contains everything the user sees on the screen.
Learning how to write html code means learning how to shape this structure into your own designs.
HTML tags tell the browser how to interpret and display content. Tags normally come in pairs, an opening tag and a closing tag.
Example:
<p>Text inside a paragraph</p>
Here are the HTML tags every beginner should know.
<h1>Main heading</h1>
<h2>Subheading</h2>
<h3>Smaller heading</h3>
<p>This is a paragraph.</p>
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Description">
Unordered List
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
Ordered List
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<br>
<strong>Bold text</strong>
<em>Italic text</em>
Learning these tags is the core of knowing how to write html code effectively.
Let’s create a simple webpage that includes a title, an introduction, an image, and a list of favorite hobbies.
Create a file named:
about-me.html
Then write the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>Hi, I am learning how to write HTML code and this is my first page. I am keeping it simple while practicing the basics.</p>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Cycling</li>
<li>Cooking</li>
</ul>
<img src="profile.jpg" alt="My photo">
<p>Thanks for visiting my page.</p>
</body>
</html>
Save the file. Then open it in a browser by double clicking it.
You just created your first webpage.
Modern HTML uses semantic tags to make pages cleaner and more accessible. These tags describe the purpose of content instead of just its appearance.
<header>
<nav>
<section>
<article>
<footer>
Here is an example of using semantic HTML:
<body>
<header>
<h1>My Blog</h1>
</header>
<section>
<h2>Latest Post</h2>
<p>This is my first blog post. I am learning how to write HTML code and exploring what is possible.</p>
</section>
<footer>
<p>Copyright 2025</p>
</footer>
</body>
These elements help search engines understand your structure and improve accessibility for screen readers.
Attributes add more information to a tag. They appear inside the opening tag and modify behavior.
Here are common examples:
<a href="https://example.com" target="_blank">Open in new tab</a>
<img src="photo.jpg" alt="Beach" width="300">
<input type="text" placeholder="Enter name">
Attributes are essential for controlling how elements behave and display.
Forms allow users to submit data. They are the core of logins, search bars, and contact pages.
Here is a simple form:
<form action="/submit" method="POST">
<label>Name:</label>
<input type="text" name="username">
<label>Email:</label>
<input type="email" name="email">
<button type="submit">Submit</button>
</form>
Even if you do not plan to handle form submissions yet, learning the structure will help you understand modern web interactions.
Comments help you remember why you wrote something.
<!-- This is a comment -->
Comments do not appear in the browser. They are useful for organizing your code and explaining important sections.
People learning how to write html code often run into predictable problems. Here are the most frequent ones.
Forgetting to close tags
Nesting tags incorrectly
Forgetting alt text for images
Misusing heading levels
Using <br> repeatedly instead of proper spacing
Not validating HTML structure
Here is a broken example:
<p>This is my paragraph
<h2>Oops this heading is inside the paragraph</h2>
Browsers try to fix errors, but good habits lead to cleaner code.
You can find mistakes using the W3C Validator. Studies show that developers who use validation tools catch structural problems earlier and improve accessibility and SEO performance.
Go to an HTML validator and paste your code. It will show:
Missing attributes
Invalid nesting
Deprecated tags
Structural issues
Fixing these will make your webpage more reliable.
As your project grows, you should organize your files in folders.
A typical beginner structure looks like this:
project/
index.html
about.html
styles/
style.css
images/
profile.jpg
Even if you do not use CSS yet, getting used to organizing content makes future development easier.
Once you understand how to write html code, you are ready to style and add interactivity.
CSS helps you:
Change colors
Change fonts
Add spacing
Create layouts
Improve visual design
JavaScript helps you:
Add dynamic behavior
Create dropdown menus
Build animations
Interact with APIs
HTML is always the starting point.
You will learn faster when you build real things. Here are simple projects you can complete today.
A personal bio page
A simple homepage with links
A recipe page with a list of ingredients
A photo gallery
A contact form
A travel bucket list
These projects help you apply everything you learn and create a small portfolio.
You do not need long sessions. Even ten minutes a day helps.
Rewrite a section of code using semantic tags
Add new content to your practice page
Create small lists or tables
Experiment with attributes
View source code on websites to learn from real examples
Consistency builds confidence faster than anything else.
Learning how to write html code is the first step toward becoming a web creator. You learned how to set up your editor, structure pages, use essential tags, write links and images, organize content with semantic elements, validate your code, avoid common mistakes, and build real projects. HTML is simple enough for beginners but powerful enough to stay relevant throughout your entire development journey.
With a bit of practice, you can build clean and meaningful webpages that set the foundation for everything you will learn next. Keep experimenting, keep writing, and open your browser often to see your progress in real time.