Introduction to HTML5, Elements, and Attributes

Introduction to HTML5, Elements, and Attributes

HTML stands for HyperText Markup Language. It is the standard language used to describe the structure of web pages.

HTML is not a programming language. It does not run logic the way JavaScript does. Instead, it describes content and meaning:

  • headings
  • paragraphs
  • links
  • images
  • forms
  • sections of a page
  • media
  • lists

If a web page were a building:

  • HTML would be the structure and rooms
  • CSS would be the visual design
  • JavaScript would be the behavior and interactions

What HTML5 Means

HTML5 is the modern version of HTML. It improved the language by adding:

  • better semantic elements such as <header>, <main>, <article>, and <footer>
  • richer form controls
  • native audio and video support
  • graphics support such as canvas and SVG
  • stronger support for accessibility and machine-readable content

HTML5 made the web more expressive, more structured, and easier to build without relying on old plugin-based approaches.

What "HyperText" Means

The word HyperText refers to text that connects to other text through links.

That is why anchor tags are so important on the web:

<a href="about.html">Learn more about this site</a>

Links are one of the main reasons the web feels like a connected system instead of a set of isolated documents.

HTML Describes Meaning, Not Just Appearance

A beginner often sees a heading and thinks:

  • "I want this text to look large"

HTML encourages a better question:

  • "Is this text actually a heading?"

That difference matters because browsers, search engines, assistive technologies, and developers all depend on meaning.

For example:

  • use <h1> because something is the main heading
  • use <p> because something is a paragraph
  • use <nav> because something is navigation
  • use <button> because something performs an action

Elements, Tags, and Content

Most HTML is built from elements.

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

In that example:

  • <p> is the opening tag
  • </p> is the closing tag
  • This is a paragraph. is the content
  • the whole thing is the element

Another example:

<h1>Welcome to My Website</h1>

The idea is the same:

  • the tag tells the browser what kind of content this is
  • the content gives the actual information

Opening Tags and Closing Tags

Most HTML elements use both an opening and closing tag:

<section>
    <h2>About Us</h2>
    <p>We build learning websites.</p>
</section>

The closing tag begins with a forward slash:

</section>

Closing tags help show where an element ends.

Void Elements

Some elements are void elements, which means they do not wrap content and do not have a closing tag.

Common examples:

  • <img>
  • <br>
  • <hr>
  • <meta>
  • <link>
  • <input>

Example:

<img src="cat.jpg" alt="A sleeping cat">

There is no </img> because the image element does not wrap text content.

Nesting Elements

Elements can be placed inside other elements. This is called nesting.

Example:

<article>
    <h2>Learning HTML</h2>
    <p>HTML is easier to learn when you practice often.</p>
</article>

Here:

  • the <article> contains the heading and paragraph
  • the <h2> and <p> are children of <article>

Good nesting keeps documents clear and valid.

A Visual Mental Model

You can think of HTML as a tree of nested boxes. Large elements contain smaller ones, and the browser builds a structured document from that tree.

This Wikimedia graphic is often used as a simple symbol of HTML5 on the modern web.

HTML5 logo

Source: Wikimedia Commons, "HTML5 logo resized.svg"

Text description of the image:

  • it shows a shield-like orange HTML5 logo
  • the large number 5 sits in the center
  • it is commonly used to represent modern HTML and the open web platform

The image is symbolic rather than technical, but it helps learners recognize HTML5 as the modern foundation of web content.

Attributes: The Extra Information Layer

Attributes give elements more meaning, behavior, identity, or configuration.

Example:

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

In that example:

  • href tells the browser where to go
  • target="_blank" opens the link in a new tab
  • rel="noopener" improves security for external new-tab links

Attributes appear inside the opening tag.

Common Attribute Parts

An attribute usually has:

  • a name
  • an equals sign
  • a value inside quotes

Example:

<img src="cat.jpg" alt="A sleeping cat">

Here:

  • src is the attribute name
  • "cat.jpg" is the value
  • alt adds alternate text that describes the image

Attributes Are Not All the Same

Different attributes do different jobs.

Some control:

  • identity, such as id and class
  • navigation, such as href
  • accessibility, such as alt, lang, and title
  • form behavior, such as required and placeholder
  • browser behavior, such as loading and controls

That is why later chapters group attributes by category instead of listing them as random extras.

Boolean Attributes

Some attributes are boolean attributes, which means they are either present or absent.

Examples:

  • hidden
  • required
  • checked
  • disabled
  • controls
  • autoplay

Example:

<video controls muted></video>

Here:

  • controls tells the browser to show built-in playback controls
  • muted starts the media without sound

Global Attributes

Some attributes can be used on many different HTML elements. These are called global attributes.

Examples:

  • id
  • class
  • title
  • lang
  • hidden
  • tabindex

Example:

<article id="welcome-card" class="card featured" lang="en">
    <h1 title="Main page heading">Welcome</h1>
</article>

Example: A Small HTML Snippet

<article id="welcome-card" class="card">
    <h1 title="Main page heading">Welcome</h1>
    <p lang="en">HTML gives structure to web content.</p>
    <a href="/learn-more.html">Learn more</a>
</article>

Useful things happening here:

  • id gives one unique identifier
  • class groups elements for styling or scripting
  • title provides extra text on hover
  • lang helps describe language
  • href creates navigation

Why HTML Matters Beyond Appearance

Good HTML improves:

  • accessibility
  • SEO
  • maintainability
  • content structure
  • browser consistency
  • teamwork between developers and designers

Poor HTML can still look correct for a moment, but it often becomes harder to maintain, harder to search, and harder for assistive tools to understand.

Twenty Commonly Used HTML Tags

The tags below appear in a huge number of websites. Learning them early gives you a strong practical foundation.

1. <html>

Purpose:

  • wraps the full HTML document

Common attributes:

  • lang

Possible values:

  • en
  • en-US
  • fr
  • hi

Example:

<html lang="en">

2. <head>

Purpose:

  • holds metadata and linked resources

Common children rather than normal attributes:

  • <title>
  • <meta>
  • <link>
  • <script>

Example:

<head>
    <title>My Page</title>
</head>

3. <body>

Purpose:

  • contains visible page content

Common attributes:

  • global attributes such as class, id

Example:

<body class="home-page">

4. <h1>

Purpose:

  • marks the main heading of a page or section

Common attributes:

  • id
  • class
  • title

Example:

<h1 id="page-title">Learn HTML5</h1>

5. <p>

Purpose:

  • marks a paragraph of text

Common attributes:

  • class
  • lang

Example:

<p lang="en">HTML gives structure to content.</p>

6. <a>

Purpose:

  • creates a hyperlink

Common attributes:

  • href
  • target
  • rel
  • download
  • title

Possible target values:

  • _self
  • _blank
  • _parent
  • _top

Common rel values:

  • noopener
  • noreferrer
  • external

Example:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Visit Example
</a>

7. <img>

Purpose:

  • displays an image

Common attributes:

  • src
  • alt
  • width
  • height
  • loading

Possible loading values:

  • lazy
  • eager

Example:

<img src="photo.jpg" alt="Students learning HTML" width="800" height="500">

8. <div>

Purpose:

  • creates a generic block-level container

Common attributes:

  • class
  • id
  • data-*

Example:

<div class="card">Card content here</div>

Use <div> when no more meaningful semantic element fits.

9. <span>

Purpose:

  • creates a generic inline container

Common attributes:

  • class
  • id
  • title

Example:

<p>Learn <span class="highlight">HTML</span> step by step.</p>

10. <ul>

Purpose:

  • creates an unordered list

Common attributes:

  • class
  • id

Example:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

11. <ol>

Purpose:

  • creates an ordered list

Common attributes:

  • start
  • reversed
  • type

Possible type values:

  • 1
  • A
  • a
  • I
  • i

Example:

<ol start="3" type="1">
    <li>Plan</li>
    <li>Build</li>
</ol>

12. <li>

Purpose:

  • represents one item inside a list

Common attributes:

  • value in ordered lists

Example:

<li value="10">Special list item</li>

13. <header>

Purpose:

  • marks introductory content for a page or section

Common attributes:

  • class
  • id

Example:

<header>
    <h1>My Blog</h1>
</header>

14. <nav>

Purpose:

  • marks major navigation links

Common attributes:

  • aria-label
  • class
  • id

Example:

<nav aria-label="Main navigation">
    <a href="/">Home</a>
</nav>

15. <main>

Purpose:

  • marks the primary content of the page

Common attributes:

  • id
  • class

Example:

<main id="content">

16. <section>

Purpose:

  • groups related content under a shared theme

Common attributes:

  • id
  • class
  • aria-labelledby

Example:

<section id="features">
    <h2>Features</h2>
</section>

17. <article>

Purpose:

  • marks a self-contained piece of content

Common attributes:

  • id
  • class

Example:

<article>
    <h2>New Lesson</h2>
    <p>Today we learn forms.</p>
</article>

18. <form>

Purpose:

  • wraps controls that send user input

Common attributes:

  • action
  • method
  • autocomplete
  • novalidate
  • enctype

Possible method values:

  • get
  • post

Common enctype values:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Example:

<form action="/submit" method="post">

19. <input>

Purpose:

  • creates many kinds of form controls

Common attributes:

  • type
  • name
  • id
  • value
  • placeholder
  • required
  • checked
  • disabled
  • min
  • max
  • step

Common type values:

  • text
  • email
  • password
  • number
  • checkbox
  • radio
  • date
  • file
  • search

Example:

<input type="email" name="email" id="email" required>

20. <button>

Purpose:

  • creates a clickable button

Common attributes:

  • type
  • name
  • value
  • disabled

Possible type values:

  • submit
  • button
  • reset

Example:

<button type="submit">Send</button>

A Quick Pattern to Notice

Many commonly used tags rely on a few repeated attribute ideas:

  • id for unique identity
  • class for grouping and styling
  • href for navigation
  • src for external resources
  • alt for image meaning
  • name for submitted form data
  • type for control behavior

If you understand those repeated patterns, HTML becomes much easier to read and write.

Common Beginner Mistakes

  • choosing tags only because of how they look
  • forgetting closing tags
  • putting attributes outside the opening tag
  • using unclear file paths in src or href
  • treating HTML as only visual formatting instead of meaning

Best Beginner Mindset

When you use a tag, ask:

  • what is this content?
  • what is the most meaningful HTML element for it?
  • which attributes does it need to work correctly?
  • is the content structured clearly for both people and machines?

Good HTML is not only about making the page appear. It is about describing the page clearly and usefully.

PreviousNext Chapter