HTML (HyperText Markup Language) is the foundation of web development. It lets you structure content on the web—headings, paragraphs, links, images, and more.
Understanding HTML is essential for anyone interested in building websites. Every page you visit is built on HTML, even when CSS and JavaScript add style and interactivity on top.
Document layout.
Opening & closing.
Extra properties.
Headings & lists.
Links & images.
Build a page.
HTML is a markup language used to create web pages. It uses tags to structure text, multimedia, and other elements. HTML files are plain text—browsers read them and render the content for users to see.
Think of HTML as the skeleton of a website. CSS adds visual style; JavaScript adds behavior. But without HTML, there is nothing for those technologies to work with.
You do not compile HTML. Save a .html file and open it in any browser. That is your first web page—no server required for local practice.
An HTML document has a predictable layout. Here is the smallest useful HTML5 page:
<!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>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html><!DOCTYPE html> — Declares the document type as HTML5.<html> — The root element wrapping the entire document. Use lang="en" for accessibility and SEO.<head> — Metadata the browser needs but visitors do not see on the page (title, charset, stylesheets).<body> — Everything visible to users: text, images, links, and more.The meta charset and viewport lines help browsers display text correctly and scale the page on phones. You will use them on almost every real page.
Attributes provide extra information about an element. They appear in the opening tag as name="value" pairs.
For example, the src attribute on an <img> tag tells the browser which image file to load:
<img src="photo.jpg" alt="A sunset over the ocean">src — Specifies the URL or path of the image.alt — Describes the image for screen readers and when the image cannot load.href — Used on <a> links to set the destination URL.class and id — Hook elements to CSS and JavaScript (you will use these soon).Explore the full HTML Attributes reference when you need a specific property.
Links and images are essential on almost every web page.
The <a> element creates a clickable hyperlink. Set the destination with href:
<a href="https://example.com">Visit Example</a>The <img> element embeds an image. Always include src and alt:
<img src="image.jpg" alt="An example image">The alt text describes the image for people who cannot see it—never leave it empty on meaningful images.
<header>, <main>, <footer>)alt text on images and use proper heading orderlang, charset, and viewport on every pageh1 tags for styling—use CSS insteadp or lidiv for everything when a more specific tag existsalt on informative imagesSix examples from a minimal skeleton to a complete first page. Each includes View Output and Try It Yourself.
Build from a blank page upward.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Every HTML file needs DOCTYPE, html, head, and body. The visible content lives inside body.
<h1>Main Heading</h1>
<h2>Subheading</h2>Browsers render h1 larger than h2 by default. Do not pick heading levels for size—use them for document outline.
<h1>My Favorite Things</h1>
<p>Here are a few things I enjoy:</p>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Walking outdoors</li>
</ul>A paragraph introduces the list. Each li becomes one bullet point inside ul.
Group content and add links and images.
<div>
<p>This is a <span>block of content</span> inside a div.</p>
<p>Spans wrap <span>inline text</span> without a line break.</p>
</div>div groups block-level content; span highlights part of a sentence inline.
<p><a href="https://example.com">Visit Example</a></p>
<p>
<img src="https://placehold.co/200x120/2563eb/ffffff?text=Photo"
alt="A placeholder example image" width="200" height="120">
</p>href makes text clickable; src and alt load and describe the image.
A complete beginner page combining everything from this tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a basic HTML example.</p>
<h2>Things I Like:</h2>
<ul>
<li>Coding</li>
<li>Web Development</li>
<li>Coffee</li>
</ul>
<p>Visit my <a href="https://example.com">website</a> for more information.</p>
</body>
</html>This is a real publishable page: proper head metadata, structured headings, a list, and a link. Save it as index.html and open it in your browser.
Core HTML elements—headings, paragraphs, lists, links, and images—have been supported in every browser for decades. The HTML5 doctype and meta tags work in all modern browsers.
Every browser renders standard HTML tags the same way. You do not need polyfills or fallbacks for the fundamentals covered in this tutorial.
Bottom line: Write HTML once; it works in Chrome, Firefox, Safari, Edge, and mobile browsers.
HTML is the foundation of web development. It provides the structure every page needs. Mastering basic tags and attributes is your first step toward becoming a web developer.
Once you are comfortable with HTML, explore HTML Editors to pick a tool, then dive into HTML Tags and HTML Attributes for deeper reference guides. CSS and JavaScript come next for styling and interactivity.
HTML structures content.
CoreMetadata vs visible.
StructureOpen, close, void.
Syntaxhref, src, alt.
PropertiesMeaningful tags.
QualityTry It editor.
Hands-onThe first version of HTML was created by Tim Berners-Lee in 1991 with about 18 tags. Today’s HTML5 standard has roughly 100+ elements, but beginners only need a dozen to build useful pages. The tags in this tutorial cover most everyday websites.
Open the Try It editor, edit the skeleton, and see your page render instantly.
6 people found this page helpful