HTML Basics

Published: April 18, 2025

HTML is the standard markup language for creating web pages. It stands for HyperText Markup Language and serves as the foundation of content on the World Wide Web. Unlike a programming language (which uses logic and commands), HTML is a markup language. It uses special tags to annotate text, images, and other content so that web browsers know how to display it. HTML elements are the building blocks of web pages. They tell the browser what is a heading, what is a paragraph, an image, and so on. By structuring content with the correct HTML tags, we give meaning and hierarchy to otherwise plain text.

In this beginner-friendly guide, we’ll cover the basic concepts and structure of HTML. We’ll walk through a simple example to demonstrate how HTML tags work together to form a webpage. We’ll also compare HTML with other markup languages like Markdown and templating syntaxes like JSX to see how they differ. Finally, we’ll highlight some trends and best practices in HTML development in 2025. Whether you’re new to web development or just brushing up on the fundamentals, this article will provide a solid foundation for understanding HTML.

Basic Concepts and Structure of HTML

HTML Document Structure: An HTML file is structured in a specific way so that browsers can interpret it correctly. At the top of every HTML document, we declare the document type with <!DOCTYPE html> to tell the browser that this is an HTML5 document. The content of the page is then enclosed within the <html> element, which is the root of the document. Inside the <html> tag, we typically have two main sections: the <head> and the <body>.

The <head> section contains metadata about the page (information that isn’t directly displayed on the webpage). For example, the head includes the <title> of the page (shown in the browser tab), a character encoding declaration (like <meta charset="UTF-8"> to ensure the page handles text correctly), and often other metadata or links to CSS files. The <body> section, on the other hand, contains all the content that will be displayed to the user in the web browser – text, images, links, lists, and so on.

Let’s look at a very simple HTML page example:

In the example above:

<!DOCTYPE html> declares the document as HTML5.
<html lang="en"> is the root element of the page, with a language attribute indicating the language (en for English) of the content.
<head> ... </head> contains metadata; here we set the character encoding to UTF-8 and define the page <title> as “My First Page”.
<body> ... </body> contains the visible content of the page. In our example, the body has a heading and a paragraph. The paragraph also contains a hyperlink defined by the <a> tag (<a href="...">...</a>).

Common HTML Tags: Inside the body, HTML provides a variety of tags to structure different types of content:

Headings: <h1> through <h6> tags are used for section headings, <h1> being the largest (typically the main title) and <h6> the smallest.
Paragraphs: <p> defines a paragraph of text.
Links: <a> (anchor tag) defines a hyperlink. It uses the href attribute to specify the URL of the link.
Images: <img> embeds an image. It uses the src attribute to specify the image file and an alt attribute to provide alternative text (important for accessibility if the image can’t be displayed).
Lists: <ul> creates an unordered list (bulleted), <ol> creates an ordered list (numbered), and each list item is wrapped in an <li> tag.

These are just a few examples—HTML has many other tags for structuring content (such as <table> for tables, <form> for forms, and semantic elements like <article>, <nav>, and <footer> introduced in HTML5). But as a beginner, understanding and practicing with the basic ones above will give you a strong start.

It’s important to remember that most HTML tags come in pairs: an opening tag (e.g., <p>) and a closing tag (e.g., </p>), with the content in between. Tags should be properly nested (you should close the most recently opened tag first). In our example, the <a> tag for the link is opened and closed entirely within the <p> paragraph tag, keeping the structure valid.

Some tags are self-closing (also called void elements) and don’t wrap any content. For example, <img> or <br> (a line break) are written as a single tag (often closed with />) and don’t need a separate closing tag. Writing well-structured HTML with correct nesting and closing of tags ensures that browsers can render your page correctly.

HTML vs Markdown

What is Markdown? Markdown is a lightweight markup language often used for writing content like README files, documentation, or blog posts. It uses a plain text syntax to format text in a simple, readable way. For example, in Markdown you might write **bold** to make text bold, or # Title to indicate a heading. Markdown is designed to be easy to write and read in its raw form. However, web browsers do not understand Markdown directly — Markdown content is usually converted into HTML (or another format) before being displayed on a website.

Comparing HTML and Markdown:

Syntax Complexity: HTML uses explicit tags for formatting (e.g., <p> for a paragraph, <strong> for bold text), whereas Markdown uses punctuation-based syntax (e.g., **podebljano** for bold text). Markdown is generally quicker and more concise to write for basic content, but it’s less precise and less capable when it comes to complex layouts or interactive content.
Usage: HTML is used to structure webpages and is directly interpreted by browsers. Markdown is typically used as an easier way to write content, which is then converted to HTML. For example, many static site generators or documentation platforms allow you to write in Markdown and then generate HTML files. You can’t simply open a raw Markdown file in a browser and expect full web presentation — it needs to be processed into HTML first.
Capabilities: HTML is far more powerful in defining a webpage’s structure and behavior. With HTML (and accompanying CSS/JS), you can create complex page layouts, add forms, tables, interactive elements, and more. Markdown is limited to basic formatting (headings, lists, emphasis, etc.) and cannot include advanced web features by itself. In practice, for anything beyond simple text and images, Markdown has to fall back on HTML. (In fact, Markdown allows raw HTML snippets inside it for this reason.)

HTML vs JSX

What is JSX? JSX stands for JavaScript XML. It is a syntax extension for JavaScript, commonly used with libraries like React. JSX allows developers to write HTML-like code within JavaScript. For example, in React you might write: <h1>Hello, {username}</h1> inside a JavaScript function, and JSX will compile this into the appropriate DOM instructions (essentially producing HTML elements in the browser). While JSX looks very much like HTML, it isn’t HTML by itself — it must be processed (transpiled) by a tool or framework into plain JavaScript and HTML before it runs in a browser.

Comparing HTML and JSX:

Purpose and Usage: HTML is a static markup language that browsers parse and render directly. JSX is not meant to be used standalone in the browser; it’s used within JavaScript code to describe UI components, and then a build step or framework turns it into actual DOM elements. In practice, you write JSX as part of a JavaScript app (for example, a React application), and you never serve JSX files directly to a browser. The browser ultimately receives HTML/JS (after compilation).
Syntax Differences: JSX syntax is very similar to HTML, but there are key differences. For instance, in JSX you use className instead of class for CSS classes on an element (since “class” is a reserved word in JS). Also, all JSX tags must be properly closed, even tags that in HTML can be self-closing (JSX would require <br /> or <img ... />). Additionally, JSX allows you to embed JavaScript expressions inside curly braces { } within the markup. For example: <p>{user.name}</p> will insert a variable’s value. You cannot do anything like this in pure HTML, since HTML isn’t executable code.
When to Use Each: Use HTML when you are creating static content or the base structure of web pages (like simple sites or server-rendered pages). Use JSX when you are working with React or similar front-end frameworks to build dynamic, interactive user interfaces as components. It’s worth noting that understanding HTML is important to effectively use JSX, because the JSX you write ultimately creates HTML elements in the DOM. In summary, HTML is the foundation, while JSX is a tool for developers to generate and manipulate that foundation within JavaScript.

HTML Best Practices and Trends in 2025

As of 2025, HTML remains a living standard, meaning it is continuously updated with new features and improvements rather than undergoing infrequent big version releases. While the core of HTML5 has long stabilized, developers continue to follow best practices to ensure their HTML is clean and effective. Below are some key best practices and emerging trends in HTML development for 2025:

Best Practices (2025):

Use Semantic Elements: Structure your page with meaningful HTML5 elements (such as <header>, <nav>, <main>, <section>, <article>, <footer>) instead of relying solely on generic <div>s. Semantic HTML makes your code more readable and improves accessibility and SEO, because it gives browsers and search engines more information about the role of each part of your content.
Accessibility Matters: Always provide descriptive alternative text for images using the alt attribute and use <label> elements for form inputs. Ensure your headings (<h1>…<h6>) follow a logical order (don’t skip levels arbitrarily). If you use icons or custom interactive elements, consider using ARIA attributes (like aria-label) to provide additional context when needed. Making your HTML accessible is not just a trend but a standard practice – in many places it’s reinforced by accessibility guidelines and laws.
Responsive and Mobile-Friendly Markup: Include the responsive meta tag in your page’s head (e.g., <meta name="viewport" content="width=device-width, initial-scale=1">) so that the layout adapts properly on mobile devices. Use relative units and flexible layouts (with CSS) so content can adjust to different screen sizes. Also take advantage of HTML features like the <picture> element or the srcset attribute on <img> to serve appropriate images for different devices (for example, high-resolution images for retina displays or smaller images for mobile).
Optimize with Modern HTML Features: Leverage built-in HTML features for better performance and user experience. For instance, use loading="lazy" on images and iframes to defer loading content that is off-screen, which improves initial load times. Use <video> and <audio> tags to embed media natively instead of relying on old external plugins. In forms, utilize newer input types (such as email, number, date) to get built-in validation and appropriate keyboards on mobile devices. These features enhance the user experience with minimal effort.
Separation of Concerns: Keep your HTML structure separate from presentation and behavior. Avoid using deprecated or purely presentational HTML elements (like <font> or <center> for styling). Instead, use CSS for styling and layout, and use JavaScript for interactive functionality. By maintaining a clear separation, your HTML remains clean and your content is accessible even if styling or scripts fail to load.

Trends (2025):

Native Dialogs and Modals: There is increasing usage of the <dialog> element for creating modal dialogs and pop-up windows, now that browser support for it has matured. Using <dialog> allows developers to implement pop-ups without heavy custom JavaScript, and it comes with some built-in accessibility and functionality (such as a backdrop and methods to open/close the dialog via script).
Web Components: The adoption of Web Components is on the rise. Web Components (which include technologies like custom elements and the shadow DOM) let developers define their own reusable HTML tags with encapsulated structure and style. This means you can create, for example, an <user-card> element for a user profile widget. While this is an advanced technique, its growing popularity is changing how we think about HTML – the set of available tags is no longer fixed, as developers can extend HTML with custom elements for specific needs.
Markup Generation Tools: Modern web development often involves tools that generate HTML from other sources. For example, static site generators and headless CMS platforms might let you write content in Markdown or in template languages, and then they compile it into HTML pages. Similarly, front-end frameworks like React (using JSX) or Angular use HTML-like templates that ultimately render as HTML in the browser. The trend is towards using these abstractions to boost productivity, but a solid understanding of HTML is still crucial to ensure the output is correct, semantic, and optimized.
Automation and AI in HTML Development: By 2025, we see more AI-assisted tools that can help write or improve HTML code. For instance, code editors might suggest accessibility improvements (like reminding you to add an alt attribute), or AI tools might generate boilerplate HTML for a given layout. Additionally, the rise of no-code/low-code platforms means some developers and designers create layouts visually and let the tool generate the HTML/CSS. These trends can speed up development, but they are most effective when you understand HTML fundamentals — you’ll need to review and possibly tweak the generated code for best results.

Even with these new trends and tools, the basics of writing clean, semantic, well-structured HTML remain constant. By following best practices and staying aware of new features, you’ll ensure that your web pages are robust, accessible, and ready for the future.

New web is waiting for you

We turn your website visitors into euros. Contact us and increase your profits today!