The basis of the web: HTML, the language that allows websites to exist since 1991, remains to this day one of the most important to know. With it, and other tools, people have made everything from websites to basic apps(using NW.js/Electron).
In this tutorial, we will go through the basics of HTML, what it does, what it is and how to make a simple web page.
1 — What is HTML and how it works
HTML (HyperText Markup Language) describes the structure of a web page. Browsers read HTML and render content visually. It uses elements made from tags to mark content. Tags tell the browser what each piece of content means.
Technically speaking, HTML is not a programming language, as it lacks many of the necessary things. It simply defines the base structure of a web page.
2 — Tools you need
- A plain text editor (VS Code, Sublime, or Notepad).
- A modern browser (Brave, Firefox, Edge, Safari).
- A folder to save files.
3 — Create your first file
- Open your editor.
- Create a file named
index.html. - Paste this minimal scaffold and save:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
- Open
index.htmlin the browser to see the result.
Congratz you have a hello world!
4 — Basic document structure (explained)
<!DOCTYPE html>— use modern HTML rules.<html lang="en">— root element and language.<head>— metadata and resources (title, links, meta).<meta charset="utf-8">— text encoding.<title>— title shown in browser tab.<body>— visible page content.
5 — Elements, tags and attributes
- Element example:
<p>Text</p>. Displays text. - Opening tag:
<p>. Closing tag:</p>. - Self-closing example:
<img src="..." alt="...">. - Attribute example:
<a href="https://example.com">Visit</a>.
Attributes add extra information to tags. In this case, a link to the text “Visit”.
6 — Common tags you will use
- Headings:
<h1>to<h6>. - Paragraph:
<p>. - Link:
<a href="URL">text</a>. - Image:
<img src="path" alt="description">. - Lists:
<ul>,<ol>,<li>. - Container blocks:
<div>. - Inline wrapper:
<span>. - Forms:
<form>,<input>,<label>,<button>.
7 — Semantic HTML & accessibility
Use meaningful tags:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>.
These improve accessibility and SEO.- Always add
alttext to images. - Link text should be descriptive, not “click here.”
- Use
<label for="id">with inputs for screen readers.
8 — Images and links (examples)
Image:
<img src="photo.jpg" alt="A dog running in a park">
Link:
<a href="https://example.com" target="_blank" rel="noopener">Visit example.com</a>
Use target="_blank" to open in a new tab. Add rel="noopener" for security.
9 — Lists and tables
Unordered list:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
Table:
<table>
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>30</td>
</tr>
</table>
10 — Forms and inputs (simple example)
<form action="/submit" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
<button type="submit">Send</button>
</form>
action is the URL that handles the data. method is usually get or post.
11 — Linking CSS and JavaScript
Add CSS in <head>:
<link rel="stylesheet" href="styles.css">
Add JS before </body>:
<script src="script.js"></script>
Keep style and behavior in separate files for clarity.
12 — Nesting rules and best practices
Always close tags in the right order:
<!-- correct -->
<div><p>Text</p></div>
<!-- wrong -->
<div><p>Text</div></p>
Invalid nesting may break layout or accessibility.
13 — Comments and special characters
Comment:
<!-- This is a comment -->
Entity example:
&→&<→<
Use entities when needed.
14 — Mini project: build a simple profile page
Follow these steps, then copy the final code.
Steps:
- Create
profile.html. - Add scaffold and title.
- Add header with name.
- Add an image with
alt. - Add a short bio in
<p>. - Add social links in a list.
- Save and open in the browser.
Final code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile — Jane Doe</title>
</head>
<body>
<header>
<h1>Jane Doe</h1>
</header>
<main>
<img src="jane.jpg" alt="Jane Doe smiling" width="200">
<p>Web developer, coffee lover, and beginner gardener.</p>
<section>
<h2>Contact</h2>
<ul>
<li><a href="mailto:jane@example.com">Email Jane</a></li>
<li><a href="https://twitter.com/janedoe" target="_blank" rel="noopener">Twitter</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2025 Jane Doe</p>
</footer>
</body>
</html>
Congratz! You’re now basically a web developer!
