HTML Fundamentals

Emmanuel BRUNO

emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2026-10-05

Overview

Topics:
- Basic structure of a web page
- HTML elements and tags
- Hands-on exercise to create simple web pages

What is HTML?

HTML: The Building Blocks of the Web

HTML stands for HyperText Markup Language.
- It’s the standard language for creating web pages.
- It’s only about semantics and structure, not about style.
Key Points:
- Elements: Building blocks of a web page.
  - Example: <p>This is a paragraph.</p>
- Tags: Define the start and end of elements.
  - Example: <h1> and </h1>
- Structure: Provides the basic tree layout of a web page.
  - Example: <ul><li>Item 1</li><li>Item 2</li></ul>
- Content: Contains text but also references images, and other media.
  - Example: <img src="image.jpg" alt="Description">

Minimal HTML Example

This is a simple web page created using HTML.

A document can be validated using the W3C Markup Validation Service

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Minimal HTML Example</title>
</head>
<body>
    <p>This is a simple web page created using HTML.</p>
</body>
</html>

General Structure of an HTML Document

HTML Document Structure:
- An HTML document is structured with a series of nested elements.
- The basic structure includes the <!DOCTYPE>, <html>, <head>, and <body> tags.
Key Components:
- <!DOCTYPE html>:
  - Declares the document type and version of HTML.
  - Ensures the document is parsed correctly by the browser.
- <html>:
  - The root element that contains all other elements.
  - Example: <html lang="en">
  - The lang attribute specifies the language of the document.
HTML is a standard syntax for creating web pages. See https://html.spec.whatwg.org/multipage/

`<head>`

Contains meta-information about the document, such as the title, character set, and links to stylesheets.
Example:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A simple HTML example">
  <title>My First HTML Page</title>
  <link rel="stylesheet" href="styles.css">
</head>

Key Elements in `<head>`:

The <head> section of an HTML document contains meta-information about the document, such as its title, character encoding, and links to external resources like stylesheets.

<meta charset="UTF-8">: Specifies the character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsive design.
<meta name="description" content="A simple HTML example">: Provides a description for search engines.
<title>: Sets the title of the document, displayed in the browser tab.
<link rel="stylesheet" href="styles.css">: Links to an external CSS file.

`<body>`

The <body> section of an HTML document contains all the content that is displayed to the user, such as headings, paragraphs, images, and links.

Welcome to HTML Basics

This is a simple HTML page to demonstrate the structure of a web document.

Item 1
Item 2
Item 3

Visit Example

<body>
    <h1>Welcome to HTML Basics</h1>
    <p>This is a simple HTML page to demonstrate the structure of a web document.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <a href="https://www.example.com">Visit Example</a>
    <img src="path/to/image.jpg" alt="Sample Image">
</body>

Common HTML Elements

Essential Elements for Web Pages

Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- Define the title and structure of the page.
- <h1> is the main heading, and <h6> is the least important heading.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Paragraphs: <p>
- Used for regular text content.
- Example:
```
<p>This is a paragraph of text.</p>
```
Opening Links in a New Tab:
- Use the target="_blank" attribute to open the link in a new tab.
- Example:
```
<a href="https://www.example.com" target="_blank">Visit Example in New Tab</a>
```

Other protocols

Email Links:
- Use the mailto: scheme in the href attribute to create a link that opens the user’s email client.
- Example:
```
<a href="mailto:someone@example.com">Send Email</a>
```
Telephone Links:
- Use the tel: scheme in the href attribute to create a link that initiates a phone call on supported devices.
- Example:
```
<a href="tel:+1234567890">Call Us</a>
```

Images

Images: <img>
- Insert images into the page.
- Use the src attribute to specify the image’s source.
- Use the alt attribute to provide an alternative text description for accessibility.

<img src="path/to/image.jpg" alt="Description of the image">

HTML Tables

Organizing Data with HTML Tables

HTML tables are used to present data in a structured format, with rows and columns. They are often used for displaying tabular information such as schedules, data comparisons, or product catalogs.

Key Elements:

<table>: Defines the table.
<thead>: Contains the table header row.
<tr>: Defines a table row.
<th>: Defines a table header cell.
<tbody>: Contains the table body rows.
<td>: Defines a table data cell.

Basic Table Structure

<table>
<thead>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Laptop</td>
    <td>$999</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>$799</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Tablet</td>
    <td>$499</td>
    <td>15</td>
  </tr>
</tbody>
</table>

Product Name	Price	Quantity
Laptop	$999	10
Smartphone	$799	20
Tablet	$499	15

Additional Table Attributes

colspan: Specifies how many columns a cell should span.
rowspan: Specifies how many rows a cell should span.
border: Sets the width of the table border.

    <table border="1">
        <tr>
            <th colspan="2">Header 1</th>
            <th rowspan="2">Header 2</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td colspan="3">Row 2, Cell 1 (spans 3 columns)</td>
        </tr>
    </table>

Header 1		Header 2
Row 1, Cell 1	Row 1, Cell 2	Header 2
Row 2, Cell 1 (spans 3 columns)

Introduction to Additional HTML Elements

Expanding Your HTML Vocabulary
HTML offers a variety of elements to structure and organize content beyond the basic tags.
These elements help create more semantic and accessible web pages.

Lists

Unordered List (<ul>):

Creates a list of items with bullet points.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List (<ol>):

Creates a list of items with numbers.

Example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

List Item (<li>):
- Defines an item in a list.

Divisions

Divisions (<div>):

Group elements together for styling or layout purposes.
No semantic meaning.

Example:

<div class="container">
  <h2>Section Title</h2>
  <p>This is a paragraph within a div.</p>
</div>

Additional Content

Headers

Headers (<header>):

Contain page-level navigation or branding.

Example:

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

Footers

Footers (<footer>):

Contain page-level information, such as copyright or contact details.

Example:

<footer>
  <p>&copy; 2023 Your Company. All rights reserved.</p>
  <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

Main Content

Main (<main>):

Represents the dominant content of the <body> of a document.

Example:

<main>
  <h2>Main Content Area</h2>
  <p>This is where the main content of the page goes.</p>
</main>

Sections

Sections (<section>):

Represents a standalone section of content.

Example:

<section>
  <h2>Section Title</h2>
  <p>This is a section of content within the main content area.</p>
</section>

Articles

Articles (<article>):

Represents a self-contained composition in a document, page, or site.

Example:

<article>
  <h2>Article Title</h2>
  <p>This is an article within the main content area.</p>
</article>

Asides

Asides (<aside>):

Represents content that is tangentially related to the content around it.

Example:

<aside>
  <h2>Related Information</h2>
  <p>This is some additional information related to the main content.</p>
</aside>

Navigation

Navigation (<nav>):

Represents a section of a page that links to other pages or to parts within the page.

Example:

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Figures

Figures (<figure>):

Represents self-contained content, such as illustrations, diagrams, photos, code listings, etc.

Example:

<figure>
  <img src="image.jpg" alt="Description of image">
  <figcaption>Caption for the image.</figcaption>
</figure>

Captions

Captions (<figcaption>):

Represents a caption or legend for a figure.

Example:

<figure>
  <img src="image.jpg" alt="Description of image">
  <figcaption>Caption for the image.</figcaption>
</figure>

Summary

Summary (<summary>):

Represents a summary, caption, or legend for the content of a <details> element.

Example:

<details>
  <summary>More Information</summary>
  <p>This is additional information that can be toggled.</p>
</details>

Details

Details (<details>):

Represents a disclosure widget from which the user can obtain additional information or controls.

Example:

<details>
  <summary>More Information</summary>
  <p>This is additional information that can be toggled.</p>
</details>

Key Takeaways

Semantic Structure

Use Semantic Elements:
- Improve readability and accessibility.
- Examples: <header>, <main>, <section>, <article>, <footer>.

Metadata

Include Metadata:

Provide information about the document.

Examples:

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="description" content="Brief description of the page">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Your Name">
</head>

SEO (Search Engine Optimization)

Optimize for Search Engines:

Use descriptive and keyword-rich content.

Examples:

<h1>Main Title</h1>
<h2>Subheading</h2>
<p>Descriptive content with keywords.</p>
<a href="https://www.example.com" title="Example Website">Visit Example</a>
<img src="image.jpg" alt="Description of image">

Questions?

Feel free to ask any questions or share your thoughts.

HTML Fundamentals

Overview

What is HTML?

Minimal HTML Example

General Structure of an HTML Document

<head>

Key Elements in <head>:

<body>

Welcome to HTML Basics

Common HTML Elements

Essential Elements for Web Pages

Other protocols

Images

HTML Tables

Basic Table Structure

Additional Table Attributes

Introduction to Additional HTML Elements

Lists

Divisions

Additional Content

Headers

Footers

Main Content

Sections

Articles

Asides

Navigation

Figures

Captions

Summary

Details

Key Takeaways

Semantic Structure

Metadata

SEO (Search Engine Optimization)

Questions?

`<head>`

Key Elements in `<head>`:

`<body>`