Structuring HTML Documents(Page Structure)

Structuring HTML5 Documents for Modern Web Publishing

With the advent of HTML5, web document structure has seen significant advancements, ushering in a new era of clarity, accessibility, and semantic understanding. For modern web publishing, it's paramount to harness the capabilities of HTML5 to ensure web pages are both user-friendly and machine-readable. Here is a comprehensive guide on how to structure HTML5 documents effectively:

DOCTYPE Declaration: Start your document with the HTML5 DOCTYPE to ensure browsers render the page in standards mode.
```
<!DOCTYPE html>
```
The Head Element:
- Character Set: Always define the character set. UTF-8 is the most commonly used and recommended.
```
<meta charset="UTF-8">
```
- Viewport: Ensure your page is responsive and scales properly on all devices.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- Title and Metadata: Include a meaningful title and relevant meta tags for SEO and social media sharing purposes.
- Links: Reference CSS files, favicon, and other resources here.
The Body Element: This contains all the content visible to users. Organize your content using the following structural elements:
- Header (`<header>`): Contains the website logo, primary navigation, and other header elements.
- Navigation (`<nav>`): Encapsulates navigation links. Though often in the header, it can be used elsewhere like sidebars.
- Main (`<main>`): Holds the primary content of the document. Ensure there's only one `<main>` per page and that it's unique from content in the sidebars, footer, or header.
- Articles (`<article>`): Denotes a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or syndicated.
- Sections (`<section>`): Represents standalone sections of content or functionality, which makes sense on its own.
- Aside (`<aside>`): Contains information related to the main content, but which can be considered separate from the main content.
- Footer (`<footer>`): Typically contains information about the author, copyright data, links related to documents, etc.
Proper Use of Other Semantic Elements:
- Figures (`<figure>` and `<figcaption>`): Use these to mark up photos, illustrations, charts, and their captions.
- Details and Summary: Provide interactive disclosure widgets, allowing users to toggle the visibility of content.
Accessibility Enhancements:
- ARIA Roles: Use ARIA (Accessible Rich Internet Applications) roles where applicable to enhance screen reader compatibility.
- Tabindex: Ensure interactive elements have a logical tab order for keyboard-only users.
Script and Style Elements:
- Styles: External styles are recommended. However, if internal styles are necessary, enclose them within the `<style>` element in the `<head>`.
- Scripts: For performance reasons, scripts (external or internal) are typically placed just before the closing `</body>` tag, unless they're asynchronous or need to run before the page renders.
Comments: Use comments judiciously to explain code where necessary, especially in complex sections. However, avoid over-commenting as it can clutter the code.
```

```

Structuring HTML5 documents effectively is paramount in the modern era of web publishing. Properly structured content is not only beneficial for SEO but also ensures accessibility and a cohesive user experience across varying devices. Leveraging the semantic capabilities of HTML5 ensures that content is presented logically and is easily interpreted by both browsers and assistive technologies.

HTML document structure

HTML documents are divided into two sections: the head and the body. The head contains information about the document. The body contains the content to be displayed in the browser. Tags embedded in the document provide instructions for structuring and displaying the header information and content.

Types of HTML tags

HTML tags direct the Web browser to display text in a certain way, for example, bold or centered. Angle brackets (< >) are used to delimit the tags and separate the tags from the content. There are two types of HTML tags:

container tags and
empty tags.

Container tags are used to specify sections of text and to separate the heading from the body. Headings contain the title information. As shown below, an HTML document begins with a simple, but mandatory, framework made up of four sets of nested container tags.

The Emergence of Semantic HTML

Early versions of the HTML standard did not do much to separate the significance of content from the way it was presented. If you wanted to indicate that a span of text was important, you applied an HTML element that made the text bold. It was up to the user to make the association that bold content is important content. This is something that humans do very easily and that automated agents find very hard to do. The automated processing of content has become important in the years since HTML was first introduced, and there has been a gradual effort to separate the significance of HTML elements from the way that content is presented in the browser.

HTML Standard Lags Behind HTML Use

The process for creating a standard is always a long one, especially for something as widely used as HTML. Stakeholders want to influence new versions of the standard to their commercial benefit or particular point of view. Standards are not laws, and standards bodies fear fragmentation of a technology above all else. This leads to a lot of time-consuming reconciliation around how potential features and enhancements may work. The standards body for HTML is the World Wide Web Consortium (known as W3C). They have a difficult job, and it takes a long time for a proposal to become a standard. It takes a very long time for a revision to the core HTML specification to be approved. The consequence of the lengthy standards process is that the W3C has always been following the curve, trying to standardize what has already become accepted practice. The HTML specification has been a reflection of leading-edge thinking about web content from several years ago. This has reduced the importance of the HTML standard because the real innovation was happening away from the W3C, partly in the browsers and plugins.

HTML page framework

Container tags work in pairs. One container tag marks the beginning of an HTML statement; a matching container tag marks the end of that statement.
Empty tags do not refer to specific sections of text and do not require closing tags. Examples of empty tags include tags used to create line breaks and horizontal rules.
In the next lesson, you will learn about the most commonly used HTML tags.

Lesson 4	Structuring HTML documents
Objective	Describe the HTML page structure.