HTML Tutorial

HTML is the basic language for building web pages. The name stands for HyperText Markup Language. It lets us define what on a page is a heading, paragraph, image, list, or link. The browser recognizes these elements and displays them correctly. HTML is the foundation on which we add CSS (for appearance) and JavaScript (for interactivity). With HTML, we can build simple static pages or more dynamic pages tailored to modern users.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive HTML tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<h1>Welcome to the interactive HTML tutorial</h1>

<!-- Navigation menu -->
<nav>
    <p><strong>Jump to section:</strong></p>
    <ul>
        <li><a href="#list">List</a></li>
        <li><a href="#table">Table</a></li>
        <li><a href="#form">Form</a></li>
    </ul>
</nav>

<hr>

<!-- List (ordered and unordered) -->
<section id="list">
    <h2>List</h2>

    <h3>Order List</h3>
    <ol>
        <li>Step one - open browser</li>
        <li>Step two – enter URL</li>
        <li>Step three – enjoy content</li>
    </ol>

    <h3>Unordered list</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>

<hr>

<!-- Table -->
<section id="table">
    <h2>Tabela podatkov</h2>

    <table border="1" cellpadding="5">
        <caption>Example of a book information table</caption>
        <thead>
            <tr>
                <th>Author</th>
                <th>Book</th>
                <th>Year of publication</th>
                <th>ISBN</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>George Orwell</td>
                <td>1984</td>
                <td>1949</td>
                <td>978-0451524935</td>
            </tr>
            <tr>
                <td>J.K. Rowling</td>
                <td>Harry Potter and the Philosopher's Stone</td>
                <td>1997</td>
                <td>978-0747532699</td>
            </tr>
            <tr>
                <td>Harper Lee</td>
                <td>To Kill a Mockingbird</td>
                <td>1960</td>
                <td>978-0061120084</td>
            </tr>
        </tbody>
    </table>
</section>

<hr>

<!-- Form -->
<section id="form">
    <h2>Contact form</h2>

    <form action="#" method="post">
        <fieldset>
            <legend>User information</legend>

            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name" required><br><br>

            <label for="email">Email address:</label><br>
            <input type="email" id="email" name="email" required><br><br>

            <label for="gender">Gender:</label><br>
            <select id="gender" name="gender">
                <option value="">Select…</option>
                <option value="M">Male</option>
                <option value="F">Female</option>
                <option value="drugo">Other</option>
            </select><br><br>

            <label>Interests (select multiple):</label><br>
            <input type="checkbox" id="html" name="interests" value="HTML">
            <label for="html">HTML</label><br>
            <input type="checkbox" id="css" name="interests" value="CSS">
            <label for="css">CSS</label><br>
            <input type="checkbox" id="js" name="interests" value="JS">
            <label for="js">JavaScript</label><br><br>

            <label for="message">Message:</label><br>
            <textarea id="message" name="message" rows="4" cols="40"></textarea><br><br>

            <button type="submit">Send</button>
            <button type="reset">Reset</button>
        </fieldset>
    </form>
</section>

<hr>

<footer>
    <p>&copy; 2025 Interactive HTML Tutorial.</p>
</footer>
</body>
</html>

RESULT

An HTML document is simply a text file that can be created with a basic text editor (such as Notepad), but more advanced tools and code editors are available for professional work, such as PHPStorm, Sublime Text, or Visual Studio Code. After the files are written and saved, they can be opened with a web browser, which reads the HTML document and displays the formatted result. With HTML, we can learn the basics of web development while also offering plenty of opportunities for creativity. The main features of HTML are its simplicity and extensibility, allowing connections with various tools and language libraries. Although basic pages can be very simple, HTML also allows for complex layouts and structures, forming the backbone of today’s most advanced websites.

What is HTML?

The <html> tag is the core of an HTML document. It serves as a container for all other HTML elements except the <!DOCTYPE> tag. Note: Within the <html> tag, we must always include a lang attribute if we want to declare the language. This tag helps search engines and browsers.

How do we write elements in an HTML document?

<h1>header content</h1>
<p>paragraph content</p>
<elementName>document content</elementName>
Tags that don’t close: <br>, <hr>, <img>, <input>, <param>, <source>, etc.

HTML stands for Hyper Text Markup Language, and:

It is the standard language for creating web pages.
Describes the structure of a web page.
It consists of a variety of elements.
Tells the browser how to display the content.
Marks parts of the content, such as a header, paragraph, etc.

ELEMENT	DESCRIPTION	EXAMPLE
<!DOCTYPE html>	Defines the document as HTML5.	See example
<html>	Is the root element of an HTML page.	See example
<head>	Contains meta information about the document.	See example
<title>	Sets the title of the HTML document.	See example
<body>	Contains the visible content of the page.	See example
<h1> <h2> <h3> <h4> <h5> <h6>	Defines the size of a heading.	See example
<p>	Defines a paragraph.	See example
</body>	Ends the content.	See example
</html>	Closes the HTML document.	See example

Tools for Working with HTML

To create and edit HTML files, we have access to various tools that are suitable for both beginners and advanced users. Regardless of the chosen tool, it is crucial to feel comfortable while working and to have the appropriate functionalities for the quick development of web pages. Here are some of the most common tools for working with HTML:

Notepad	An HTML document can be written in Notepad, which is part of every operating system.	See example
PHPStorm	The editor truly understands our code and deeply analyzes its structure while supporting all PHP language features for modern and legacy projects. It provides the best code completion, refactoring, error prevention, and more.	See example
VS Code	Goes beyond syntax highlighting and autocompletion with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.	See example