HTML Basics

Learn the fundamentals of HTML including document structure, elements, attributes, and more.

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display the content.

What is HTML?

  • HTML stands for HyperText Markup Language
  • It is the standard language for creating web pages
  • HTML describes the structure of web pages using markup
  • HTML elements are represented by tags
  • Browsers do not display the HTML tags, but use them to render the content

HTML was created by Tim Berners-Lee in 1991. Since then, there have been many versions of HTML. The most recent version is HTML, which we'll be focusing on in this guide.

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

HTML Document Structure

Every HTML document has a required structure that includes the following declarations and elements:

Basic Structure

  • <!DOCTYPE html> - Declares the document type and HTML version
  • <html> - The root element of an HTML page
  • <head> - Contains meta information about the document
  • <title> - Specifies a title for the document
  • <body> - Contains the visible page content

The DOCTYPE Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must appear once, at the top of the page, before any HTML tags.

The HTML Element

The <html> element is the root element of an HTML page. All other elements must be descendants of this element. It's a good practice to add the lang attribute to specify the language of the document.

<html lang="en">
  <!-- Document content goes here -->
</html>

The Head Element

The <head> element contains meta information about the document that isn't displayed on the page. This includes:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>

The Body Element

The <body> element contains all the content that is displayed on the web page, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
    <img src="image.jpg" alt="Description">
</body>

HTML Elements and Tags

HTML elements are defined by tags. Tags are keywords surrounded by angle brackets like <tagname>. Most HTML elements consist of a start tag and an end tag, with content in between.

HTML Element Syntax

<tagname>Content goes here...</tagname>

The start tag is also called the opening tag, and the end tag is called the closing tag. The closing tag is written like the opening tag, but with a forward slash inserted before the tag name.

Common HTML Elements

Element Description
<h1> to <h6> Headings (h1 is the most important, h6 is the least important)
<p> Paragraph
<br> Line break (empty element without a closing tag)
<hr> Horizontal rule (thematic break)
<div> Division or section
<span> Inline container

Nested HTML Elements

HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

<div>
    <h2>This is a heading inside a div</h2>
    <p>This is a paragraph inside the same div.</p>
</div>

Empty HTML Elements

HTML elements with no content are called empty elements. Empty elements do not have an end tag.

<br>
<hr>
<img src="image.jpg" alt="Description">
<input type="text">

HTML Attributes

HTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag and usually come in name/value pairs like: name="value".

Attribute Syntax

<tagname attribute="value">Content</tagname>

Common HTML Attributes

Attribute Description Example
id Specifies a unique id for an element <div id="header">
class Specifies one or more class names for an element <div class="container highlight">
style Specifies an inline CSS style for an element <p style="color: blue;">
src Specifies the URL of the media file <img src="image.jpg">
href Specifies the URL of the page the link goes to <a href="https://example.com">
alt Specifies an alternate text for an image <img src="image.jpg" alt="Description">

Global Attributes

Global attributes are attributes that can be used with any HTML element.

Common Global Attributes

  • class - Specifies one or more class names for an element
  • id - Specifies a unique id for an element
  • style - Specifies an inline CSS style for an element
  • title - Specifies extra information about an element (displayed as a tooltip)
  • lang - Specifies the language of the element's content
  • data-* - Used to store custom data private to the page or application
  • hidden - Specifies that an element is not yet, or is no longer, relevant

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>smaller</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>

This is bold text.

This is important text.

This is italic text.

This is emphasized text.

This is highlighted text.

This is smaller text.

This is deleted text.

This is inserted text.

This is subscript text.

This is superscript text.

Semantic Text Elements

HTML introduced many semantic elements that provide meaning to the content they contain. This helps search engines and assistive technologies understand the structure of your content.

Semantic vs. Non-Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer:

  • <article>, <section>, <nav>, <header>, <footer>
  • <strong>, <em>

Non-semantic elements don't tell anything about their content:

  • <div>, <span>
  • <b>, <i>

HTML Lists

HTML provides three types of lists:

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
  1. First item
  2. Second item
  3. Third item

Description Lists

A description list starts with the <dl> tag. Each description term starts with the <dt> tag, and each description starts with the <dd> tag.

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink

Nested Lists

Lists can be nested inside other lists.

<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

HTML Links

Links allow users to click their way from page to page. HTML links are defined with the <a> tag.

Link Syntax

<a href="url">link text</a>

Link Types

Absolute URLs

<a href="https://www.example.com">Visit Example.com</a>
Visit Example.com

Relative URLs

<a href="page2.html">Visit Page 2</a>
Visit Page 2

Link to an Email Address

<a href="mailto:[email protected]">Send Email</a>
Send Email

Link to a Phone Number

<a href="tel:+1234567890">Call Us</a>
Call Us

Link to an Element on the Same Page

<a href="#section-id">Go to Section</a>
Go to Links Section

Link Attributes

Attribute Description Example
target Specifies where to open the linked document <a href="url" target="_blank">
rel Specifies the relationship between the current document and the linked document <a href="url" rel="nofollow">
download Specifies that the target will be downloaded when a user clicks on the hyperlink <a href="file.pdf" download>

HTML Images

Images can improve the design and appearance of a web page. In HTML, images are defined with the <img> tag.

Image Syntax

<img src="url" alt="alternative text">

The src attribute specifies the path to the image, and the alt attribute provides an alternate text for the image if it cannot be displayed.

Image Size

You can use the width and height attributes to specify the size of an image. The values are specified in pixels by default.

<img src="image.jpg" alt="Description" width="300" height="200">

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag. 

<a href="https://www.example.com">
    <img src="image.jpg" alt="Description">
</a>

Image Maps

An image map allows you to define areas on an image that act as hyperlinks.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Responsive Images

Responsive images automatically adjust to fit the size of the screen. You can make an image responsive by using CSS or by using the max-width property.

<style>
img {
    max-width: 100%;
    height: auto;
}
</style>

The Picture Element

The <picture> element gives web developers more flexibility in specifying image resources. It contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

<picture>
    <source media="(min-width: 650px)" srcset="img_large.jpg">
    <source media="(min-width: 465px)" srcset="img_medium.jpg">
    <img src="img_small.jpg" alt="Description">
</picture>

Practice Exercises

Now that you've learned the basics of HTML, it's time to practice! Here are some exercises to help you reinforce what you've learned.

Exercise 1: Create a Basic HTML Document

Create a basic HTML document with the following elements:

  • A proper document structure with DOCTYPE, html, head, and body elements
  • A title for the document
  • A heading (h1) with your name
  • A paragraph about yourself
  • An unordered list of your hobbies

Exercise 2: Create a Simple Webpage

Create a simple webpage about your favorite book or movie with the following elements:

  • A heading with the title of the book or movie
  • An image related to the book or movie
  • A paragraph describing the plot
  • An ordered list of your favorite characters
  • A link to more information about the book or movie

Exercise 3: Create a Simple Contact Form

Create a simple contact form with the following elements:

  • Input fields for name, email, and subject
  • A textarea for the message
  • A submit button

Next Steps

Now that you've learned the basics of HTML, you can move on to: