HTML uses basic document structures and tags to present web content. Every web page builds on standard elements like headings, paragraphs, hyperlinks, and images.
Browsers parse basic HTML documents from top to bottom, organizing structural tags into a clear visual layout.
flowchart TD
A["<!DOCTYPE html>"] --> B["<html> Root Container"]
B --> C["<head> Page Settings & Metadata"]
B --> D["<body> Visible Page Content"]
D --> E["Headings, Paragraphs, Links, & Images"]
Here are the primary tags used in almost every basic HTML page:
<!DOCTYPE html> tells the browser to use modern HTML5 rules.<h1> through <h6> create main titles and section headings.<p> wraps text blocks into readable paragraphs.<a href="..."> creates clickable hyperlinks to other pages or resources.<img src="..." alt="..."> displays images on the page.Here is a practical example showing how basic HTML elements fit together inside a standard web page layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic HTML Page Example</title>
</head>
<body>
<!-- Main Title -->
<h1>Welcome to My First Web Page</h1>
<!-- Introductory Paragraph -->
<p>HTML basic tags help structure text and display content clearly in web browsers.</p>
<!-- Hyperlink -->
<p>Read more on <a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a>.</p>
<!-- Image Tag -->
<img src="avatar.jpg" alt="Developer portrait logo" width="120" height="120">
</body>
</html>
href attribute: Specifies the destination URL for links (<a href="https://example.com">).src attribute: Specifies the file path for images (<img src="logo.png">).alt attribute: Provides alternative text for images when they fail to load or when read by screen readers.alt text for images: Missing alt text hurts web accessibility (a11y) and SEO. Screen readers cannot describe the image to visually impaired users without it.images/photo.jpg) for internal site files, and absolute URLs (https://site.com/photo.jpg) for external websites.rel="noopener" to external links: When using target="_blank" on links, always add rel="noopener" to prevent security risks on older browsers.Create a file named basic.html, add one main heading, two paragraphs, a link to your favorite website, and test opening it in your browser!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.