htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

HTML Basic

Build solid foundations by mastering core HTML structure and essential page-building elements.

Complete working example

Complete starter HTML document

Start with a real document, a heading, a paragraph and a working section link.

HTMLCSSSelf-contained
Edit in playground

Live preview

Original code, no external assets
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  min-width: 0;
  width: min(100%, 600px);
  background: white;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
}
h1 {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  margin: 0 0 16px;
}
h2 {
  font-size: 20px;
  margin: 24px 0 12px;
}
p,
li {
  line-height: 1.65;
}
a {
  color: #2545a8;
  text-underline-offset: 3px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #9eaed0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #eef2fa;
  padding: 16px;
  border-radius: 10px;
}
code {
  font-family: ui-monospace, monospace;
}

</style>
</head>
<body>
<main>
  <h1>Hello, web.</h1>
  <p>This is a complete page you can change.</p>
  <a href="#next-step">Find your next step</a>
  <section id="next-step">
    <h2>Make it yours</h2>
    <p>Change this text, save the file and refresh your browser.</p>
  </section>
</main>
<script>

</script>
</body>
</html>

How it works

Copy HTML includes the doctype, English language, UTF-8 charset, viewport, title and all CSS around the body shown here. The main landmark contains a heading and a named section; the link moves within this same document. Change the language and title for your own page.

Troubleshooting and limits

Save the copied text as example.html, not a .txt file. Open it in a browser, and refresh after saving edits. The editor HTML tab contains the body; the complete document source below includes the head and document wrapper.

Explore more original working examples.

Quick Answer

What is a basic HTML document structure?

A basic HTML document starts with <!DOCTYPE html>, followed by <html> wrapping <head> (metadata like title and meta tags) and <body> (visible content) sections. Every HTML page requires this structure: DOCTYPE declaration, html element, head for metadata, and body for page content.

Every website begins with HTML's fundamental building blocks. This lesson reveals the structural patterns common to all web pages, introducing the essential elements you'll use in every project you create.

HTML Document Architecture

Every valid HTML page begins with a doctype announcement: <!DOCTYPE html>.

Your HTML content lives between opening <html> and closing </html> tags.

Everything visitors see appears within the <body> and </body> boundaries.

Essential Document Structure

<!DOCTYPE html>
<html
  >
<body>

    <h1>Your Primary Headline</h1>
    <p>Your opening paragraph content appears here.</p>

</body>
</html
>

Result:

Your Primary Headline

Your opening paragraph content appears here.

Important: Browsers render only what exists within the <body> tags - everything else remains invisible to visitors.

Try it Yourself

Want to experiment with this code? Try it in our interactive playground!

Open Code Playground

Creating Page Headlines

Headlines use tags ranging from <h1> through <h6>, establishing content hierarchy.

<h1> marks your most critical title. <h6> represents the lowest priority subheading.

Heading Hierarchy Demonstration

<h1>Primary Page Title</h1>
<h2>Major Section Header</h2>
<h3>Subsection Title</h3>
<h4>Topic Heading</h4>
<h5>Minor Subdivision</h5>
<h6>Smallest Subheading</h6>

Result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Try it Yourself

Practice creating different heading levels in our playground!

Try HTML Headings

Formatting Text Blocks

Text paragraphs utilize the <p> tag to organize written content:

Paragraph Structure Examples

<p>Here's your first block of text.</p>
<p>And here's a second distinct paragraph.</p>

Result:

This is a paragraph.

This is another paragraph.

Try it Yourself

Create your own paragraphs and see how they appear!

Try HTML Paragraphs

Embedding Visual Content

Images integrate into pages using the <img> tag.

Essential attributes include the image location (src), descriptive text (alt), plus optional width and height dimensions:

Image Integration Example

Unavailable or blocked: image “logo.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<img src="logo.jpg" alt="Company Logo" width="104" height="142" />

Result:

HTML
Free
Codes
Logo

Sample image representation

Try it Yourself

Add images to your web pages and learn about image attributes!

Try HTML Images

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Tip: Learning HTML is easier when you can see real examples. Visit HTML Free Codes regularly to practice and see more examples!

Complete HTML Document Example

Here's a complete HTML document that demonstrates all the basic elements we've covered:

Complete HTML Page

Unavailable or blocked: image “html-tutorial.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <h1>Welcome to HTML Free Codes</h1>
    <h2>Learn HTML Step by Step</h2>

    <p>HTML Free Codes provides free HTML tutorials and examples.</p>
    <p>Start learning HTML today and build amazing websites!</p>

    <h3>Useful Links</h3>
    <a href="https://www.htmlfreecodes.com">Visit HTML Free Codes</a>

    <h3>Sample Image</h3>
    <img src="html-tutorial.jpg" alt="HTML Tutorial" width="300" height="200">

</body>
</html>

Result:

Welcome to HTML Free Codes

Learn HTML Step by Step

HTML Free Codes provides free HTML tutorials and examples.

Start learning HTML today and build amazing websites!

Useful Links

Visit HTML Free Codes

Sample Image

HTML Tutorial

Try it Yourself

Create your own complete HTML page using all these elements!

Try Complete Example

Test Your Knowledge

5 practice questions are available. Choose Start practice to try them.

Related Articles

Continue your learning journey with these related tutorials:

A smaller starting example and practical notes

A complete HTML file gives the browser both visible content and instructions for interpreting it. Save the following skeleton as index.html, then open it in your browser. Keep the document head for metadata and the body for the content people read.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My little project</title>
</head>
<body>
  <main><h1>My little project</h1><p>Hello, web.</p></main>
</body>
</html>

What each part does

The doctype requests modern standards mode. The lang attribute declares the content language and helps assistive technology choose pronunciation. UTF-8 supports a wide range of characters. The viewport metadata lets a mobile browser use the device width instead of pretending the page is a wide desktop document.

Title and heading have different jobs

The title labels a browser tab and gives search engines a concise page name. The visible h1 introduces the content. They can be similar without being identical. Write a title that identifies this specific page rather than repeating the same generic title throughout a site.

Check the file

Use a .html extension, confirm your editor saved plain text, and reload after saving. Inspect the page source if punctuation appears unexpectedly. Avoid putting visible paragraphs inside head. Keep one primary main region and give each page a clear main heading.