HTML Elements

Elements combine opening tags, content, and closing tags to form the modular components that construct web pages.

HTML elements serve as the core components for assembling web pages. Mastering element syntax and structure unlocks your ability to create properly organized, semantically meaningful documents.

Defining HTML Elements

A complete element spans from its opening tag through its content to its closing tag:

Element Construction Pattern

<tagname>Your content lives between these tags...</tagname>

Practical Element Demonstrations

<h1>Primary Page Headline</h1>
<p>A complete paragraph of text content.</p>
<a href="https://www.htmlfreecodes.com">Clickable hyperlink text</a>

Result:

Primary Page Headline

A complete paragraph of text content.

Clickable hyperlink text
Key Concept: Certain elements require no content (such as the br tag). We call these void elements - they lack closing tags entirely!

Element Nesting Principles

Elements nest inside one another, creating hierarchical structures. Every HTML document relies on this nesting pattern to organize content:

Nesting Structure Illustration

<!DOCTYPE html>
<html>
<body>

<h1>Start Your Web Development Journey</h1>
<p>This paragraph contains <strong>emphasized text</strong> nested within.</p>
<p>Explore our resources: <a href="https://www.htmlfreecodes.com">HTML Free Codes</a></p>

</body>
</html>

Result:

Welcome to HTML Free Codes

This is a paragraph with bold text inside.

Visit our website: HTML Free Codes

Element Breakdown:

  • The <html> element is the root element
  • The <body> element defines the document's body
  • The <h1> element defines a large heading
  • The <p> elements define paragraphs
  • The <strong> element makes text bold
  • The <a> element creates a hyperlink

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag. However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Bad Practice (Missing End Tags)

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Good Practice (With End Tags)

<html>
<body>

<p>This is a paragraph</p>
<p>This is a paragraph</p>

</body>
</html>
Important: Always include end tags for better code maintainability and to avoid potential issues with different browsers.

Empty HTML Elements

HTML elements with no content are called empty elements. The <br> tag defines a line break, and is an empty element without a closing tag:

Empty Elements Examples

<p>This is a <br> paragraph with a line break.</p>
<hr>
<img src="htmlfreecodes-logo.jpg" alt="HTML Free Codes">
<input type="text" placeholder="Enter your name">

Result:

This is a
paragraph with a line break.

HTML Free Codes

Common Empty Elements:

  • <br> - Line break
  • <hr> - Horizontal rule
  • <img> - Image
  • <input> - Input field
  • <meta> - Metadata
  • <link> - External resource link

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>. However, HTML Free Codes recommends using lowercase tags for consistency:

Case Sensitivity Example

<!-- Both work, but lowercase is recommended -->
<P>This paragraph works.</P>
<p>This paragraph is recommended style.</p>

Best Practice

<h1>HTML Free Codes</h1>
<p>Learn web development with our tutorials.</p>
<a href="https://www.htmlfreecodes.com">Visit our website</a>
Best Practice: HTML Free Codes recommends lowercase tag names for consistency, readability, and compatibility with XHTML.

HTML Page Structure

Below is a visualization of an HTML page structure:

Complete HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>HTML Free Codes - Learn Web Development</title>
    <meta charset="UTF-8">
    <meta name="description" content="Free HTML tutorials">
</head>
<body>

    <header>
        <h1>HTML Free Codes</h1>
        <nav>
            <a href="https://www.htmlfreecodes.com/tutorial/">Tutorials</a>
            <a href="https://www.htmlfreecodes.com/examples/">Examples</a>
        </nav>
    </header>

    <main>
        <h2>Welcome to HTML Learning</h2>
        <p>Start your web development journey today!</p>

        <section>
            <h3>What You'll Learn</h3>
            <ul>
                <li>HTML fundamentals</li>
                <li>CSS styling</li>
                <li>JavaScript basics</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2024 HTML Free Codes</p>
    </footer>

</body>
</html>
Structure Overview:
  • <!DOCTYPE html> declaration defines this as an HTML5 document
  • <html> element is the root element of an HTML page
  • <head> element contains meta information about the HTML page
  • <title> element specifies a title for the HTML page
  • <body> element defines the document's body
  • <header>, <main>, and <footer> are semantic elements

Complete Elements Example

Here's a complete example demonstrating various HTML elements working together:

Complete HTML Elements Page

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Element Examples</title>
</head>
<body>

    <h1>HTML Element Examples</h1>

    <h2>Text Elements</h2>
    <p>This is a <strong>paragraph</strong> with <em>emphasis</em> and a <a href="https://www.htmlfreecodes.com">link</a>.</p>

    <h2>Lists</h2>
    <ul>
        <li>HTML tutorials</li>
        <li>CSS guides</li>
        <li>JavaScript lessons</li>
    </ul>

    <h2>Images and Media</h2>
    <img src="tutorial.jpg" alt="HTML Tutorial" width="300" height="200">

    <hr>

    <footer>
        <p>Learn more at <a href="https://www.htmlfreecodes.com">HTML Free Codes</a></p>
    </footer>

</body>
</html>

Try it Yourself

Experiment with different HTML elements and create your own webpage!

Try HTML Elements

Test Your Knowledge

Previous HTML Basic
Next HTML Attributes