HTML Tutorial

HTML is the basic building block of every website. The acronym stands for HyperText Markup Language. With it, we define the structure of the content: what is the heading, where the paragraph stands, and where the image is located. The browser reads these elements and renders them visually to the user. HTML represents the foundation, upon which we then add CSS for visual styling and JavaScript for interactivity. Together, they form the inseparable trio of the modern web.

What exactly is HTML?

HTML is not a programming language in the classical sense (like PHP or JavaScript), but rather a markup language. It consists of a series of elements that tell the browser how to display the content.

Main characteristics of HTML:

• It is the standard global language for creating web content.
• It describes the logical structure of a website.
• It enables the insertion of multimedia (images, video, sound).
• It is simple to learn, yet extremely extensible for complex projects.

How do we write HTML elements?

Most HTML elements have a start and an end tag, between which the content is located. Special attention goes to the root element <html>, which must always contain the lang attribute for defining the page language.

Examples of writing:

1. <h1>This is a main heading</h1>
2. <p>This is paragraph content.</p>
3. <tag>content</tag>
4. Self-closing tags: Some elements do not need an end tag (e.g., <br>, <hr>, <img>, <input>).

What Tools Do You Need?

You don't need expensive equipment. Start with what you have, and upgrade when you need more features. Here is an overview of the best tools for beginners and advanced users.

Tool	For Who?	Main Advantage	Price
Notepad	For complete beginners who want to understand the basics without extra features.	Available everywhere, nothing to install. Teaches you that HTML is just text.	Free
Notepad++	For beginners who want a little more (colors, multiple files at once).	Lightweight, fast, open-source. Has syntax highlighting.	Free
Visual Studio Code (VS Code)	For those seriously starting development and wanting a modern tool.	Unlimited number of extensions, excellent code autocomplete, free.	Free
Sublime Text	For those who want exceptional speed and elegant design.	Very fast, minimalist, supports huge number of formats.	Free (demo)
PhpStorm	For professionals and those developing complex web applications (PHP, JS, Databases).	All in one: debugging, databases, Git, advanced refactoring.	30 days free trial

My Advice: Start with Notepad or Notepad++ to understand the basics. When you start writing more code, move to VS Code. If you'll be working with PHP and databases, PhpStorm is the best investment.

HTML Elements

HTML elements are defined with a start tag, some content, and closed with an end tag. Before we start describing elements, we need to define two important tags, head and body. If we want to use special characters (such as š, č or ž (Slovenian letters)), we need to add UTF-8, which supports them. The Title tag describes the page title, which appears in the browser tab. When we want to display content on the webpage, we use the body element, since all content displayed on the webpage is defined between <body></body> tags. For webpage content we most commonly use paragraph <p></p>, and heading <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. These are tags that mark the document title on the webpage and are defined from <h1> to <h6>.

This table allows you to quickly review all basic HTML elements, their categories and usage.

Element	Category	Description (The Basics)	Example Code
<!DOCTYPE html>	Structure	Document type declaration. Required at the beginning.	<!DOCTYPE html>
<html>	Structure	Root element of the entire page.	<html lang="en"> ... </html>
<head>	Structure	Contains metadata, title and links to CSS/JS.	<head> ... </head>
<title>	Metadata	Page title that appears in the browser tab.	<title>My Page</title>
<meta charset="UTF-8">	Metadata	Sets character encoding (supports special letters).	<meta charset="UTF-8">
<meta name="viewport">	Metadata	Enables responsive design on mobile devices.	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>	Structure	All visible page content is within this element.	<body> ... </body>
<h1> ... </h1>	Headings	Main heading (most important). Use only once per page.	<h1>Main Heading</h1>
<h2> ... </h2>	Headings	Subheading (second level of importance).	<h2>Subheading</h2>
<h3> ... </h6>	Headings	Further heading levels (from h3 to h6).	<h3>Smaller Heading</h3>
<p> ... </p>	Text	Paragraph of text. Basic unit of content.	<p>This is a paragraph.</p>
<img>	Media	Inserts an image. Has no closing tag.	<img src="image.jpg" alt="Description">
<a>	Links	Creates a hyperlink to another page or location.	<a href="https://vadnica.org">Link</a>
<iframe>	Embedding	Embeds another webpage or content into yours.	<iframe src="https://example.com"></iframe>