HTML Basic

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

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

<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

<!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