HTML - zero to practical
Published Aug 31, 2025
Written by
Dmytro Kharchenko
About this article
The foundation of every web page is a solid defined structure of elements, text, images, links, and forms. This structure is defined using a markup language called HTML.
On the basis of this structure, the website developer has the opportunity to imporove the looks of the web page by writing style sheets using CSS, and add different kinds of functionality to the website, for example animations, form validation, or even fully integrated apps, using JavaScript.
This article seeks to become a solid introduction of HTML which you can use to learn the language from scratch or refer to in the future.
Not a programming language
A programmer's job is to design and create programs. For example, given a specific problem, the programmer may solve it by creating the web application architecture and translating this solution in concrete working code.
This is done using many kinds of software design principles and programming languages. A programming language is basically a middleman between the programmer's mind and the computer. The programmer defines instructions and structures (the program) using the programming language, the program is then executed by the machine either by way of interpretation or after compilation (translation) into lower level machine instructions.
Here is an oversimplified way to explain how the internet works:
You perform a request for a website using your browser.
Your request is routed to a particular server.
Server processes the request.
Server sends the response in a specific format.
The response gets accepted and rendered by your browser.
HTML comes in at the last step. In some cases, the HTML page gets assembled live on the server, based on your specific request, this is called Server Side Rendering. In both cases the rules of the markup language are the same.
Defining web page structure
As stated before, HTML is used to define the structure and content of the web page.
The structure is defined using tags. Different tags "mean" different things and "behave" differently when styled using CSS.
For example the text you are reading right now is wrapped in a p tag:
<p>
Content of the paragraph...
</p>This tag is called the paragraph tag, and it defines, logically, a paragraph of text on a page. This tag, further is wrapped by another tag:
<div class="content">
...
<p>
Content of the paragraph...
</p>
...
</div>The div tag is used to create "blocks" of content on the web page. In this case, a given div defines the section of the main content of the article.
Notice the class="content" inside the opening part of the tag? This is called the "attribute". The class attribute is used to style a particular element in the stylesheets, or to select and manipulate the element using JavaScript .
What is a tag?
A tag is the code that wraps the content or another tag in the HTML document, with the purpose of creating a particular page structure.
Tags can be paired and unpaired.
The paried tag syntax is as follows:
<tag attribute="value..."> content... </tag>You can notice the opening part, and the closing part, as well as the content between the code.
The unpaired tag syntax is as follows:
<tag attribute="value..."/>The difference is that unpaired tag has no content, only attributes.
Tag attributes
Attributes are always specified in the opening tag and generally have the form of name="value" , and they server a purpose of providing extra information about HTML elements. That information can be used by the browser to render or process an element, or by the developers in stylesheets or in JavaScript code.
Blank structure
When starting to define a web page you would generally create an empty file called, by the standart, index.html , this file is called called an "HTML document".
Every HTML document starts with a type declaration and the basic tag structure, as follows:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>You define the document type, "html" tag is the root of the structure, the "head" tag will contain the metadata of the web page, the "body" tag will contain the structure and content of the web page.
For example, a single paragraph displayed on a web page would require you to write, at minimum, the following HTML document:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Content of the paragraph.</p>
</body>
</html>Common tags & their usage
===========
Core tags:
===========
<!DOCTYPE html>
- Used to define the document type
<html></html>
- Used to define the root of the HTML document
<head></head>
- Contains the metadata of the document
<body></body>
- Contains the structure and content of the document
==================
Common head tags:
==================
<titile></title>
- Defines the title of the web page that
is displayed in the browser tab.
<meta charset="UTF-8"/>
- Defines the charset the browser will use
to display the web page.
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
- Gives browser information on how to control
the page's dimensions and scaling.
<link rel="icon" href="/path/to/icon.png" sizes="axb"/>
- Defines paths to files to be used for the favicon.
<link rel="stylesheet" href="/path/to/file.css"/>
- Includes the particular stylesheet file
into the document.
<script defer src="/path/to/file.js"></script>
- Includes the particular JavaScript file
into the document.
==================
Common body tags:
==================
<div></div>
- Container used to define the content block.
<section></section>
<main></main>
<article></article>
<header></header>
<footer></footer>
<nav></nav>
- Container tags used to create content blocks
that carry a particular meaning.
These tags are called "Semantic", and they
play key roles in Search Engine Optimization.
<h1></h1>
<h2></h2>
<h3...6></h3..6>
- Tags used to define the headings of the page.
There are 6 levels from most important (h1) to
least (h6).
<p></p>
- Tag that defines a paragraph of text.
<br>
- Tag that is used to create a line break.
<a ... />
<a href="https://url.com"/>
- Tag that defines a link.
<img ... />
<img src="/path/to/image.png" alt="description"/>
- Tag that defines an image.
<button>Click</button>
- Tag that defines an interactive clickable button.
<ul></ul>
- Tag that defines unordered list.
<ol></ol>
- Tag that defines ordered list.
<li></li>
- Tag that defines list item.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<form></form>
- Tag that defines a web form for entering data
<label></label>
<input/>
<textarea></textarea>
- Common tags used for input fields in forms
Example:
<form action="https://url.com">
<label for="name">
<input id="name"/>
<label for="email">
<input id="email"/>
<input type="submit" value="Submit">
</form>These are just the most common tags, for the full list see the HTML Element Reference.
Optimization & SEO
Did you know that on average, users wait only 8 seconds for a web page to load before jumping to another search result?
To optimize page load speeds many different techniques are used. One of these techniques is minifying HTML. Minification is the process of removing unnecessary characters from the code.
For example this code:
<body>
<p>
Paragraph content.
</p>
</body>When minified would become this:
<body><p>Paragraph content.</p></body>Another point to consider is that by writing clear semantic HTML by hand, developers can achieve better Search Engine rankings and reduce page sizes compared to code generated by common no-code tools.
Example
Let's bring everything together and create a structure of a simple web page hero section:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Art Gallery</title>
</head>
<body>
<header>
<div class="navbar-container">
<a class="logo" href="/"></a>
<nav>
<a href="/about">About</a>
<a href="/exhibitions">Exhibitions</a>
<a href="/visit">Visit</a>
</nav>
</div>
<div class="centered-content-container">
<div class="text-container">
<h1>A gallery for every taste</h1>
<p>Lorem Ipsum is simply dummy text. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#visit">Visit</a>
</div>
<div class="image-container">
<img src="/bust.png" alt="bust"/>
</div>
</div>
<div class="triangle-guide"></div>
</header>
</body>
</html>Now to bring this structure to life, what's left is to add a bit of styling, images, and animations. The only limit is your imagination.