Home
Blog
Front-end
HTML – the foundation of websites

10 min

April 4, 2025

HTML - the foundation of websites

The modern Internet could not function without HTML. This inconspicuous markup language is the backbone of every Web page, regardless of its appearance, function or size. HTML isn't just a programming tool - it's a language that allows you to give structure to your content, organize information and make your pages understandable to browsers and users alike. Below we'll take a closer look at what HTML is, where it came from, how it has evolved, and its importance in everyday web work.

Schedule a free consultation

We process your data in accordance with our privacy policy.

Table of contents:

1. What is HTML?
2. A brief history of HTML
3. What is the use of HTML?
4. HTML structure
5. What are the components of HTML?
5.1. Tags
5.2. Attributes
5.3. HTML Enions
5.4. Categorization of elements
6. HTML vs Accessibility
7. The most common HTML errors
8. FAQ – Frequently asked questions:

What is HTML?

HTML (HyperText Markup Language) is a standard markup language that is used to create and structure documents displayed in web browsers. It is not a programming language in the strict sense – it has no loops, variables or conditional statements. Instead, HTML uses special tags (called tags) to describe the structure and meaning of various elements on a web page.

With HTML, we can define which pieces of content are headings, which are paragraphs, where to put an image, how to create a list, and where to add a contact form. HTML works with CSS (Cascading Style Sheets) responsible for the appearance of the page, and with JavaScript, which is responsible for logic and interactions. Together, this forms what is known as the basic front-end technology stack.

A brief history of HTML

HTML was created in the early 1990s by Tim Berners-Lee, a British computer scientist working at CERN. His goal was to allow scientists to share documents through a hypertext system based on the HTTP protocol and the Mosaic browser.

The first version of HTML was very basic – it contained a dozen or so tags, such as , , , , , . It was not until 1995 that the Internet Engineering Task Force published the official HTML 2.0 standard. Subsequent versions brought more and more features:

HTML 3.2 (1997) – standardization of existing extensions, introduction of tags for creating tables, forms, frames, and basic CSS style support.
HTML 4.01 (1999) – separation of content and presentation (content in HTML, appearance in CSS), better support for forms, introduction of three versions of the document: Strict, Transitional and Frameset.
XHTML 1.0 (2000) – an attempt to clean up HTML by enforcing strict compliance with XML syntax. XHTML documents had to be properly nested and encapsulated, increasing reliability.
HTML5 (2014) – a fundamental change in philosophy: instead of the restrictiveness of XHTML, a return to the flexibility of HTML. Added semantic elements(<header>, <footer>, <article>, <section>), new APIs (canvas, audio, video, geolocation, localStorage), simplification of doctype(<!DOCTYPE html>), support for modern forms and web applications.
HTML Living Standard (as of 2014) – currently being developed without versioning by WHATWG. Instead of consecutive numbered editions, HTML is evolving continuously. More features and extensions are being added, including support for Web Components, integration with JavaScript via is, slot, template and shadow DOMattributes, and better support for mobile devices and PWA applications.

HTML5 is currently being developed as a so-called “living standard” by WHATWG (Web Hypertext Application Technology Working Group), which means there is no “final” version – HTML is constantly being refined.

What is the use of HTML?

HTML is used wherever you need structure and presentation of content on the Internet. Here are the most important examples:

– Web development – from the simplest business cards to complex portals and applications
– content formatting – creating paragraphs, headings, bullets, quotes
– navigation – hyperlinks, menus, anchors
– multimedia integration – embedding images, video, audio
– forms – contact, login, registration, surveys
– responsiveness and semantic structure – supporting SEO positioning and readability for screen readers.

HTML is also a staple for content creators, bloggers, SEO specialists, UX/UI designers or marketers. Understanding HTML structure allows you to better optimize your sites and collaborate with technical teams.

HTML structure

Every HTML document has a specific structure that allows the browser to correctly interpret its content. A typical HTML5 document looks as follows:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>My first website</title>
</head>
<body>
    <h1>Hello world!</h1>
    <p>This is a sample document HTML</p>
</body>
</html>

Explanation of elements:

<!DOCTYPE html> – information about the HTML version (here: HTML5).
<html> – the main container for the entire document.
<head> – section with metadata: page title, character encoding, links to CSS, scripts, etc.
<body> – the actual content displayed on the page.

This structure is the starting point for any site and can be freely expanded with additional sections, styles and scripts.

What are the components of HTML?

Language components are the basic elements from which the structure of an HTML document is built. They include tags that define the content and layout of the page, attributes that convey additional information, entities that allow the use of special characters, and various types of elements divided by their function and behavior in the code.

1. Tags

These are the basic elements of HTML. They are always surrounded by acute parentheses and usually appear in pairs: opening and closing (e.g. <p> and </p>). Example tags:

<h1> to <h6> – headings of different hierarchies,
<p> – paragraph,
<a href=“”> – hyperlink,
<img src=“”> – image,
<ul>, <ol>, <li> – lists,
<div> – block container,
<span> – inline container.

2. Attributes

Attributes are additional information passed in tags. They occur in the form of a pair: name and value. Examples:

href – address in a link (e.g. <a href=“https://example.com”>),
src and alt– image source and alternative description,
class and id– identifiers used for styling or selecting elements,
type, value, placeholder – used in forms.

3. HTML Enions

Enions allow the display of special characters that would normally be interpreted as part of the code:

< and > – < and >, respectively,
& – sign &,
  – non-separating space.

4. Categorization of elements

HTML distinguishes elements by their behavior and function:

block elements – take up the entire width of the parent, e.g.: <div>, <p>, <section>.
inline elements – do not break the line, e.g.: <a>, <span>, <strong>.
semantic elements (HTML5) – give much more meaning to the structure of the page: <header>, <nav>, <article>, <footer>.
Form elements – allow interaction with the user: <form>, <input>, <label>, <textarea>.
Table elements – are used to present data: <table>, <tr>, <td>, <th>.

HTML vs Accessibility

Web development is not only a matter of appearance and functionality, but also of accessibility for the widest possible range of users – including people with disabilities. HTML, thanks to its semantics, plays a key role here.

Why it’s important:
Well-written HTML makes it easier for screen readers, improves keyboard navigation and increases content comprehensibility by automated tools (e.g., search engines, bots, AI).

Basic principles of accessible HTML:

1. Use the alt attribute in images
Provides an alternative description for people who cannot see the image or use a screen reader.
Example:

<img src="photo.jpg" alt="Portrait of a smiling woman with coffee">

2. Use semantic markup
Instead of generic <div> or <span>, use <header>, <nav>, <main>, <article>, <footer> – they help to better understand the structure of the page.

3. Correctly mark up headings (<h1>–<h6>)
Maintain the hierarchy of headings – do not skip levels. It is like a “table of contents” for assistive technologies.

4. Combine labels with forms
Each form field should have its purpose described with <label>.
Example:

<label for="email">Adres e-mail:</label>
<input type="email" id="email" name="email">

5. Avoid text hidden in graphics
If you want to convey important information, write it in the text and not just in the image. Users may not see it or the reader may not read it.

We encourage you to read the official source on accessibility in the context of HTML and websites: https://www.w3.org/

The most common HTML errors

1. Failure to close tags – e.g. forgetting </p>, which can disrupt the structure of the document.

2. Nested tags in the wrong order – e.g. <a><div></div></a>, which is incorrect.

3. Incorrect use of attributes – e.g. typos in class, href, src.

4. Missing declaration <!DOCTYPE html> – can cause the page to display incorrectly.

5. Illegible code – no indentation, classes not described, comments not used ().

FAQ – Frequently asked questions:

What does <em> in HTML mean?
The <em> tag in HTML is used to mark a text passage that should be emphasized, i.e. pronounced with more emphasis. By default, browsers display such text in italics, but its main purpose is to semantically emphasize importance, not just stylization. This also has an impact on accessibility and SEO.

What is HTML used for?
HTML is used to create and organize the content of websites. It allows you to define the structure of a page and insert text, images, videos, links, forms, and tables. It is the basic front-end language on which all websites are based.

What can you do in HTML?
In HTML, you can create different page elements: headers, paragraphs, lists, hyperlinks, embed multimedia (audio, video, graphics), build contact forms, logins or registrations. You can also use semantic markup, which makes it easier for browsers and search engines to interpret the content.

How do you start with HTML?
All you need is a computer, a simple text editor (e.g. Notepad, Notepad++ or better: Visual Studio Code) and a web browser. Create a new text file, save it with the file extension .html, enter the basic HTML code and open the file in your browser.

How does HTML differ from plain text?
HTML contains special tags (e.g. <p>, <h1>, <a>, <div>) that give the content structure and determine its function. Plain text does not have this information layer – the browser does not know which parts are headings, which are links or forms. HTML allows computers to “understand” the content.

Where do I write HTML?
HTML is written in text editors or programming environments. You can use free tools such as Notepad++, Visual Studio Code, Sublime Text or Atom. HTML code is saved in files with the extension .html.

Where do I write HTML?
It is best to write HTML locally on your computer in a code editor. You can also use online editors, e.g. CodePen, JSFiddle, repl.it or the in-browser editor in your developer tools. The most important thing is that the tool allows you to highlight syntax and work with HTML files.

How do I get into HTML?
If you want to start working with HTML, simply open a code editor, create a new file and give it the extension .html. You can also “enter” the source code of an existing page by right-clicking on the web page and selecting “Inspect” or “View Page Source” (depending on your browser).

How do I open an HTML page?
Simply double-click on the .html fileand the system will open it in your default web browser. You can also drag the file into the browser window or open it via the “File > Open” menu. This way, you will see the page as the user sees it.

Connected articles