HTML (HyperText Markup Language) is the standard language used to structure the content of web pages. Virtually every website on the internet is built on HTML — it’s the foundation the entire web is built on. This guide explains what HTML is, how it works, its basic tags, and how it fits together with CSS and JavaScript to create the pages you see in your browser.
Table of Contents
What is HTML and how it works?
HTML (HyperText Markup Language) describes the structure and content of a web page — its headings, paragraphs, images, links, lists, and so on. It does not control how the page looks; that’s the job of CSS. A common misconception is that HTML defines the visual appearance of a page, but its real role is to define what the content is and how it’s organized, leaving the styling to CSS and the interactivity to JavaScript.
HTML works through tags: pieces of markup that label each part of the content so the browser knows how to interpret and display it. An HTML file is saved with the .html extension, and the browser reads it to render the page you see. On its own, an HTML document is plain and unstyled — CSS is added to make it look attractive, and JavaScript is used for interactivity and user actions. But HTML is the foundation: it defines the structure everything else builds on.
How to write HTML
HTML is one of the easiest web languages to learn, because it’s a markup language rather than a programming language — there’s no complex logic, just tags that label content. A tag is created by writing the tag name between a less-than sign (<) and a greater-than sign (>). Most tags come in pairs: an opening tag and a closing tag, where the closing tag includes a slash (/) before the name. Here’s the most basic example:
<html>
</html>The first line opens the tag; the second closes it. Tags can also be nested inside one another — but a child tag must always be closed before its parent:
<html>
<body>
</body>
</html>Here the body tag sits inside the html tag, and it’s closed before the html tag is closed. A few tags have no closing tag at all — for example, the img tag (used to insert an image), which is self-contained:
<img src="photo.jpg" alt="A photo">It helps to know three related terms. A tag is the markup itself, like <p>. An element is the whole thing — the opening tag, the content, and the closing tag together, like <p>Hello</p>.
And an attribute is extra information placed inside the opening tag, like src or alt in <img src="photo.jpg" alt="A photo">. Tags mark up the content, elements are the building blocks, and attributes configure them.
The structure of an HTML5 page
Every modern HTML page follows a standard skeleton. Here’s what a complete, minimal HTML5 document looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>
Each part has a role: <!DOCTYPE html> tells the browser this is HTML5; <html lang="en"> wraps the whole document and declares its language; <head> holds information about the page (not shown in the content); <meta charset="UTF-8"> sets the character encoding so text displays correctly; the viewport meta tag makes the page responsive on mobile; <title> sets the name shown in the browser tab; and <body> contains everything the visitor actually sees. This skeleton is the starting point for every web page.
Basic HTML tags
HTML has a large number of tags. It isn’t necessary to memorize them all — the basic tags below are the foundation, and understanding them is enough to start building pages.
HTML tag
The most basic tag is the <html> tag. It tells the browser the document is HTML and acts as the root that contains all other tags. A typical document holds two main sections inside it — the head and the body:
<html>
<head>
..
</head>
<body>
..
</body>
</html>Head tag
The <head> tag comes right after the opening <html> tag. It holds information about the page that isn’t displayed directly in the content area — such as the title, scripts, styles, and links. Common elements placed inside it include <title>, <script>, <style>, and <link>. In the example below, the head contains a title and a style block:
<html>
<head>
<title> This is the title of the page </title>
<style>
body{
background-color: red
}
</style>
</head>
<body>
</body>
</html>In the below picture, look at the top left corner. This is the title I specified inside the head tag. Also, I changed the background color to red by using a style tag inside the head.
Body tag
The <body> tag holds everything visible on the page — paragraphs, images, headings, forms, tables, and more. All the actual content a visitor sees goes inside it. The example below shows a body with two paragraphs and two headings of different sizes:
<html>
<body>
<p> this is the first paragraph </p>
<p> this is the second paragraph </p>
<h1> This is a big heading </h1>
<h4> this is a small heading </h4>
</body>
</html>
Img tag
The img tag inserts an image into an HTML document. It uses the src attribute to point to the image’s path or URL, and the alt attribute to provide alternative text that’s shown if the image fails to load (and read by screen readers, which is important for accessibility). You can set dimensions with the width and height attributes:
<html>
<body>
<img src="room.jpg" width="700px" height="400px" alt="Image description">
</body>
</html>The result:
Note that the img tag has no closing tag.
HTML5 semantic elements
Older HTML used generic <div> tags for everything. HTML5 introduced semantic elements that describe the meaning of each part of the page, which helps both browsers and search engines understand your content (and improves accessibility). The most common ones:
Using semantic elements instead of generic <div>s makes your HTML cleaner, easier to maintain, more accessible, and better understood by search engines — which is why they’re standard practice in modern web development.
CSS: Cascading style sheets
HTML creates the structure of a page, but on its own a page looks plain — black text on a white background. CSS (Cascading Style Sheets) is what makes pages attractive: it controls colors, fonts, sizes, spacing, positioning, borders, and much more.
There are three ways to apply CSS:
- External style sheets: CSS written in a separate
.cssfile and linked to the page. This is the recommended approach for real websites, because it keeps styling separate from content and can be reused across many pages. - Internal style sheets: CSS placed inside a
<style>tag in the page’s<head>. Useful for a single page. - Inline styles: CSS written directly on an element with the
styleattribute. It works, but it’s generally discouraged for anything beyond quick tests, since it mixes styling into the content and is hard to maintain.
Here’s an example using inline styles to illustrate a few common properties:
<html>
<body>
<p style="font-size: 40px"> this is the first paragraph </p>
<p style="color: red"> this is the second paragraph </p>
<h1 style="text-align: center"> This is a big heading </h1>
<h4 style="background-color: blue"> this is a small heading </h4> </body> </html>
</body>
</html>In this example, the font-size property enlarges the first paragraph, the color property turns the second one red, text-align centers the main heading, and background-color gives the last heading a blue background. These are just a few of the many properties CSS offers.
The example below moves the styling into a <style> block inside the <head>, changing the whole page’s background to yellow. This approach is called an internal style sheet.
<html>
<head>
<style>
body {
background-color: yellow
}
</style>
</head>
<body>
<p style="font-size: 40px"> this is the first paragraph </p>
<p style="color: red"> this is the second paragraph </p>
<h1 style="text-align: center"> This is a big heading </h1>
<h4 style="background-color: blue"> this is a small heading </h4> </body> </html>
</body>
</html>
External style sheets are not much different. We use an external file with a .css extension to make CSS changes. Click here to learn more about external style sheets.
A brief history of HTML
HTML was created by Tim Berners-Lee in 1991, originally with just 18 elements. The first website, built at CERN, went online on August 6, 1991. HTML 2.0 followed in 1995, then HTML 3.2 in 1997, and HTML 4.01 later that year, which expanded support for style sheets, scripting, and embedded objects. HTML 4.01 remained the standard for years until HTML5 arrived in 2014. HTML5 was a major leap forward, introducing semantic elements, native audio and video, and many features that power the modern web — and it remains the version in use today, maintained as a “living standard” that evolves continuously.
From HTML file to live website: hosting
Writing an HTML file on your computer is only half the story — to make it visible to the world, that file needs to live on a web server that’s connected to the internet 24/7. That’s what web hosting provides: space on a server where your HTML, CSS, images, and other files are stored and served to visitors who type your address. When someone visits your site, their browser requests those files from the server and renders the page. So once you’ve built your page in HTML, hosting is what actually puts it online. You can learn more in our guide on what web hosting is.
Copahost makes it easy to host your website — upload your HTML files and your site is live, with free SSL, a fast control panel, NVMe storage, and real support included.
Explore hosting plansFrequently asked questions about HTML
Is HTML a programming language? Not exactly. HTML is a markup language — it structures and labels content, but it doesn’t have logic, variables, or functions like programming languages such as JavaScript or Python. It’s often the first language people learn for the web, but technically it’s markup, not programming.
Is HTML hard to learn? No, HTML is one of the easiest web languages to start with. It’s based on simple tags that label content, with no complex logic. Most people grasp the basics in a few hours and can build a simple page quickly.
What is HTML used for? HTML is used to structure the content of web pages — headings, paragraphs, images, links, forms, and more. Every website uses it as its foundation, combined with CSS for styling and JavaScript for interactivity.
What’s the difference between HTML and CSS? HTML defines the structure and content of a page (what’s there); CSS defines how it looks (colors, fonts, layout). They work together: HTML builds the skeleton, CSS dresses it up.
Do I need to know HTML to have a website? Not necessarily. Website builders and CMS platforms like WordPress let you create sites without writing HTML directly. But understanding HTML basics helps you customize and troubleshoot your site.
Conclusion
HTML is the foundation of every web page — the language that structures content so browsers can display it. It’s defined by tags, it’s straightforward to learn, and it’s the first thing anyone building for the web should understand. On its own, HTML handles structure; paired with CSS for styling and JavaScript for interactivity, it forms the three core technologies of the World Wide Web. Whether you’re learning to code or just want to understand how the web works, HTML is where it starts.
