HTML Fundamentals

Emmanuel BRUNO
emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2024-10-31

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

Minimal HTML Example

This is a simple web page created using HTML.

<!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/

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 Sample Image 
<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
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>

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>

SEO (Search Engine Optimization)

  • Optimize for Search Engines:

    • Use descriptive and keyword-rich content.

    • Ensure proper use of HTML tags for better indexing.

    • Examples:

      <h1>Main Title of the Page</h1>
<h2>Subheading with Keywords</h2>
<p>This is a descriptive paragraph that includes relevant keywords to improve search engine ranking.</p>
<a href="https://www.example.com" title="Example Website with Keywords">Visit Example Website</a>
<img src="image.jpg" alt="Descriptive Alt Text for Image">
  • Additional Tips:

    • Use semantic HTML tags (e.g., <header>, <footer>, <article>, <section>) to structure content.

    • Ensure all images have descriptive alt attributes.

    • Use meaningful and keyword-rich URLs.

    • Include meta tags for title and description.

      <meta name="description" content="A brief description of the page with relevant keywords.">
<meta name="keywords" content="keyword1, keyword2, keyword3">

    • Ensure the website is mobile-friendly and has a fast loading time.

Key Takeaways

  • Use Semantic Elements:
    • Improve readability and accessibility.
    • Examples: <header>, <main>, <section>, <article>, <footer>.
  • Include Metadata:
    • Provide information about the document.
    • Examples: <title>, <meta charset>, <meta name="description">, <meta name="keywords">, <meta name="author">.
  • Optimize for Search Engines (SEO):
    • Use descriptive and keyword-rich content.
    • Ensure proper use of HTML tags for better indexing.
  • Responsive Design:
    • Ensure your website is mobile-friendly.
    • Use media queries and responsive utilities to create adaptable layouts.
  • Accessibility:
    • Ensure your website is accessible to all users.
    • Use ARIA (Accessible Rich Internet Applications) attributes and semantic HTML.
  • Performance:
    • Optimize images and other media.
    • Minimize CSS and JavaScript files for faster loading times.

Questions?

  • Feel free to ask any questions or share your thoughts.

E. Bruno