freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 1.3 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

HTML elements, tags, and attributes

Your roadmap for this lesson

  • The anatomy of an HTML element
  • Opening tags, closing tags, and void elements
  • How attributes add extra information
  • Nesting elements in the right order

Short answer

A tag is the label in angle brackets, like <p>. An element is the full package: the opening tag, the content, and the closing tag. An attribute is extra information written inside the opening tag, like href on a link. Learn these three words and you can read almost any HTML.

Anatomy of an element

<p class="intro">Welcome to our shop.</p>
  • <p class="intro"> is the opening tag.
  • class="intro" is an attribute: name, equals sign, value in quotes.
  • Welcome to our shop. is the content.
  • </p> is the closing tag. It has a forward slash.

Together, all four parts make one element.

Void elements

Some elements have no content, so they have no closing tag. These are called void elements or empty elements.

<img src="logo.png" alt="Shop logo">
<br>
<hr>
<input type="email">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

You may see <br /> with a slash in older code. In modern HTML the slash is optional.

Attributes add details

Attributes always go in the opening tag. Some common ones:

AttributeUsed onWhat it does
href<a>The link destination
src<img>The image file
alt<img>Text that describes the image
idAny elementA unique name for one element
classAny elementA group name for styling
lang<html>The page language

Some attributes are boolean. Writing the name alone switches them on, like required or disabled.

Nesting: elements inside elements

Elements can sit inside other elements. This is called nesting. The rule: close the inner element before the outer one.

<!-- Correct -->
<p>This is <strong>very</strong> important.</p>

<!-- Wrong -->
<p>This is <strong>very</p> important.</strong>

The outer element is the parent. The inner one is the child. This family tree is called the DOM, the Document Object Model.

Try it: fix the nesting

One element below is nested wrong and one attribute is missing quotes. Fix both, then add a title attribute to the link.

Live preview

Quick quiz

1. In <a href="/menu">Menu</a>, what is href?
2. Which is a void element?
3. What does a closing tag have that an opening tag does not?
4. Which nesting is correct?

Common mistakes

  • Forgetting the closing tag. A missing </p> or </a> can make the rest of the page behave strangely.
  • Using the same id twice. An id must be unique on the page. Use class for groups.
  • Skipping quotes on attribute values. Values with spaces break without quotes. Always quote them.
  • Putting attributes in the closing tag. Attributes only work in the opening tag.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Element
An opening tag, its content, and its closing tag together.
Opening tag
The tag that starts an element, like <p>.
Closing tag
The tag that ends an element, like </p>.
Void element
An element with no content or closing tag, like <img>.
Attribute
A name and value in the opening tag that adds information.
Boolean attribute
An attribute that is on when present, like required.
Nesting
Placing elements inside other elements.
DOM
Document Object Model, the tree of elements the browser builds.

Questions beginners ask

Are HTML tags case sensitive?

No, but lowercase is the standard. Write <p>, not <P>.

Single or double quotes for attributes?

Both work. Double quotes are the most common choice. Stay consistent.

What is the difference between id and class?

An id names one unique element. A class can be shared by many elements.

What happens if I make a mistake?

Browsers are forgiving and try to guess. The page may still show, but it can break in odd ways. A validator catches these errors, as you will learn in Module 10.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.