HTML5 - Syntax

HTML5 - Syntax & Structure

HTML5 syntax aims for flexibility and compatibility with existing web content, while also simplifying some aspects compared to older, stricter versions like XHTML.

While HTML5 allows for certain shortcuts (like omitting quotes around some attributes or not closing certain tags), adhering to consistent, clean syntax (like lowercase tags, quoted attributes) is strongly recommended for readability, maintainability, and compatibility with various tools.

The DOCTYPE

Every HTML5 document must start with a Document Type Declaration (DOCTYPE). In HTML5, this declaration is greatly simplified:

<!DOCTYPE html>

This DOCTYPE tells the browser to render the page in ‘standards mode’, ensuring consistent behavior across different browsers. It is case-insensitive, but <!DOCTYPE html> is the conventional form. Unlike older HTML versions, it doesn’t refer to a specific DTD (Document Type Definition).

Character Encoding

Specifying the character encoding is crucial for the browser to correctly interpret the text content of your page. HTML5 simplifies this using a <meta> tag with the charset attribute, placed as early as possible within the <head> section:

<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <!-- Other head elements -->
</head>

UTF-8 is the universally recommended character encoding for web content as it supports virtually all characters and symbols from all languages.

The <script> Tag

In HTML5, the type attribute for JavaScript <script> tags (type="text/javascript") is no longer required. JavaScript is the default scripting language for the web.

<!-- Linking external script -->
<script src="scripts/main.js"></script>

<!-- Inline script -->
<script>
  console.log('Hello from inline script!');
</script>

Consider using the defer attribute (downloads script with HTML, executes after HTML parsing) or async attribute (downloads and executes script asynchronously) for external scripts to optimize page loading.

The <link> Tag

Similarly, when linking CSS stylesheets using the <link> tag, the type attribute (type="text/css") is no longer required. The rel="stylesheet" attribute is sufficient.

<head>
  <meta charset="UTF-8">
  <title>Page with CSS</title>
  <link rel="stylesheet" href="styles/style.css">
</head>

HTML Elements

HTML elements are the building blocks of a web page, marked up using tags.

• Tags: Delimited by angle brackets (< >). Most elements have a start tag (e.g., <p>) and an end tag (e.g., </p>).
• Content: The information between the start and end tags.
• Void Elements: Some elements are ‘empty’ or ‘void’, meaning they cannot have content and consist only of a start tag. Examples include <br>, <hr>, <img>, <input>, <link>, <meta>. In HTML5 syntax, they do not need to be explicitly closed with a / (e.g., <br> is valid), though self-closing (<br />) is also allowed for compatibility.
• Case Insensitivity: Tag names are case-insensitive (<P> is the same as <p>), but lowercase is the standard convention.
• Nesting: Elements can be nested inside others, forming the document structure (DOM tree). Nesting must be done correctly (e.g., <p><em>Text</em></p> is correct, <p><em>Text</p></em> is incorrect).

HTML Attributes

Attributes provide additional information or configuration for elements. They appear in the start tag.

• Name-Value Pairs: Most attributes consist of a name and a value, separated by = (e.g., id="main-nav", href="index.html").
• Quoting Values: Attribute values should generally be enclosed in double (") or single (') quotes. HTML5 allows omitting quotes for simple, unspaced values, but quoting is recommended for clarity and robustness.
• Boolean Attributes: Some attributes are boolean; their presence implies true, and absence implies false. Examples include required, checked, disabled, readonly, controls. They can be written as just the attribute name (e.g., <input required>) or with an empty value (<input required="">) or the name as the value (<input required="required">). The first form is most common.
• Case Insensitivity: Attribute names are case-insensitive, but lowercase is conventional.

<!-- Example with various attributes -->
<a id="homeLink" class="nav-link active" href="/index.html" title="Go to Homepage">Home</a>

<input type="checkbox" name="subscribe" value="yes" checked>

<img src="images/logo.png" alt="Company Logo" width="150">

Basic HTML5 Document Structure

A typical HTML5 document follows this fundamental structure, often incorporating semantic elements for better organization:

<!DOCTYPE html>
<html lang="en"> <!-- Specify document language -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design meta tag -->
    <title>My Semantic HTML5 Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header> <!-- Page or section header -->
        <h1>Website Title</h1>
        <nav> <!-- Navigation links -->
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main> <!-- Main content of the page -->
        <article> <!-- Self-contained content (e.g., blog post) -->
            <h2>Article Title</h2>
            <p>This is the main content of the article...</p>
            <section> <!-- Thematic section within the article -->
                <h3>Subsection Title</h3>
                <p>Details within the subsection...</p>
            </section>
        </article>

        <aside> <!-- Sidebar content (related but separate) -->
            <h3>Related Links</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </aside>
    </main>

    <footer> <!-- Page or section footer -->
        <p>&copy; 2024 Your Website Name. All rights reserved.</p>
    </footer>

    <script src="script.js"></script> <!-- Scripts often placed before closing </body> -->
</body>
</html>

Using semantic elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> makes the document structure more meaningful for both browsers (especially assistive technologies) and developers.