My Web Training

📖 Creating a Web Page

What is HTML?

HTML, or HyperText Markup Language, is the standard language used to create web pages. It structures content by using tags and elements, allowing web browsers to display the content properly.

Here's the difference between tags and elements.

<tag>: These are the building blocks of HTML and are enclosed in angle brackets, such as <p> and </p>. Tags define the type of content.
Element: An element includes the tags and the content inside them. For example, <p>This is a paragraph.</p> is an element where <p> is the opening tag, </p> is the closing tag, and "This is a paragraph." is the content.

Basic Page Structure

Every HTML page starts with the <!DOCTYPE html> declaration, followed by the main structure.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Your Page Title</title>
        </head>
        <body>
            <!-- Page content goes here -->
        </body>
    </html>

This structure is made up of three essential parts:

<html></html>: Defines the beginning and end of the HTML document. All other elements must be contained within these tags.
<head></head>: Contains metadata about the document, such as the character encoding, title, and links to external resources like stylesheets.
<body></body>: Holds all the visible content of the web page, such as text, images, and interactive elements.

HTML5 Semantic Elements

Semantic elements improve the clarity of your code by describing their purpose.

<header></header>: Contains introductory content or navigation links.
<main></main>: Holds the primary content of the page.
<footer></footer>: Contains footer content like copyright or contact information.
<nav></nav>: Groups site navigation links.
<section></section>: Groups related content thematically.
<article></article>: Holds self-contained content, such as a blog post or news article.

Block-Level and Inline Elements

HTML elements can be broadly categorized as block-level or inline.

Block-Level Elements

Elements that create a new line and take up the full width of their container by default are block-level elements.

<div>: A generic container for content, often used with CSS for layout purposes.
<p>: Defines a paragraph of text.
<section>: Groups related content thematically, providing semantic structure.
<article>: Contains self-contained content that can be independently distributed.

Inline Elements

Elements that stay within the flow of text without starting a new line are inline elements.

<a>: Defines a hyperlink, linking to other resources or pages.
<span>: A generic container for inline content, often used for styling.
<strong>: Indicates strongly emphasized text, usually rendered as bold.
<em>: Indicates emphasized text, typically displayed in italics.
<img>: Defines an image with optional attributes for alternative text and hover text.
Example:

Hover for title text; <img src="cat.jpg" alt="Cat with sun glasses" title="Descriptive information on hover.">

While it is technically possible to use generic elements like <div> and <span>, favoring semantic elements provides more meaningful structure and improves accessibility and search engine optimization.

Example

Here is a complete example of a basic HTML5 page:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Example Page</title>
        </head>
        <body>
            <header>
                <h1>Welcome to My Page</h1>
            </header>
            <main>
                <section>
                    <h2>About</h2>
                    <p>This is an example section.</p>
                    <img src="images/mypic.png" alt="Descriptive text for missing mypic.png">
                </section>
            </main>
            <footer>
                <p>Footer Content Here</p>
            </footer>
        </body>
    </html>

Attributes and Their Usage

Attributes provide additional information about an element. Common attributes include:

href: Specifies the URL for links.
Example: <a href="https://example.com">Visit</a>
alt: Provides alternative text for images.
Example: <img src="image.jpg" alt="Description">
id: Specifies a unique identifier for an element, allowing it to be targeted by CSS or JavaScript.
Example: <nav id="top-nav">...
class: Assigns one or more class names to an element, which can be used for styling or scripting purposes.
Example: <p class="intro-text">...
alt: Provides alternative text for images.
Example: <img src="image.jpg" alt="Description">
title: Gives additional information on hover.
Example: <p title="Tooltip info">Text</p>

Accessibility Features

Use ARIA roles and attributes to improve accessibility. ARIA (Accessible Rich Internet Applications) helps to bridge gaps for users with disabilities by providing additional semantics about elements, particularly for assistive technologies like screen readers. For example, roles can define the type of content, while attributes like aria-label can offer descriptive names for navigation or buttons.

The aria-label property enables authors to name an element with text that is not visually rendered. For example, the name of the following button is "Close".

<button type="button" aria-label="Close">X</button>

Validating Your Code

Always validate your HTML to ensure it adheres to web standards. The W3C Validator is an essential tool for identifying errors and ensuring your code meets the required specifications. To use it:

Visit the W3C Validator.
Choose one of the following options:
- Enter the URL of your web page if it is already published.
- Upload an HTML file from your computer.
- Paste your HTML code directly into the text box.
Click the "Check" button to run the validation.

The results will indicate any errors or warnings, along with suggestions for fixing them.

Additional Resources

For students interested in learning more, here are some additional resources: