HTML and Page Structure

Pages are presentations!

Click the Start Presentation button below to visualize this page as a presentation.

Start Presentation

HTML (Hypertext Markup Language) provides the “skeleton” of your website, the underlying structure and hierarchy for information. Other similar languages like Markdown or RST do the same thing. In essence, it organizes your pages. CSS, on the other hand styles these pages.

Learning Objectives

1. Apply HTML, CSS, Markdown, and basic Javascript to develop well-structured, responsive World Wide Web Consortium (W3C) standards-compliant web sites.
2. Evaluate and implement web accessibility measures consistent with the Web Content Accessibility Guidelines (WCAG) version 2 specification.
3. Design front-end user experiences using accepted web design patterns, methods, and information structures.
4. Identify and use strategies of successful visual rhetoric for the web.
5. Compare and select web technologies such as static site generators or frameworks as appropriate candidates for building web sites. Course Resources

Text

The Coding Workbook, “Getting Started with HTML”

Note

This textbook serves as a good way to gain an approachable entry to learning HTML. While we may do some limited exercises from the book, we will more likely use it purely as a basic element reference.

HTML and Page Structure

Semantics

…refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have?”, or “what purpose or role does that HTML element have” (rather than “what does it look like?”.)

Design

…the process of planning, conceptualizing, and arranging content online to create the look, feel, and functionality of a website

HTML

• provides semantic structure for content
• creates a hierarchy
• divides pages into elements by using tags
• has implications for meaning rather than solely for design

CSS

• provides design and (limited) interactivity for information
• creates a cohesive, visual design languages
• uses selectors to affect particular elements of a page
• is concerned with aesthetic content rather that semantic meaning

The Role of HTML

Proposed in 1980 by the legend Sir Tim Berners-Lee, HTML’s current specification started to emerge in 1991 with the creation of a proposal for 18 elements, though it would take until 1993 for a formal specification.

HTML rests on a few principles:

• HTML creates documents, which have
• limited base interactivity, largely meant to
• connect and provide context for information, rendered
• in a software referred to as a browser

HTML can:

• embed scripting languages such as Javascript
• use Cascading Style Sheets (CSS)
• include media such as images or video
• use interactive forms to provide or change web content

Markup

The Markup portion of HTML means that the language uses tags to annotate information, that is: HTML provides additional information about the information presented. This can include:

• content type
• content role
• information hierarchy
• links to content
• inclusion of additional page resources, including, but not limited to:
  • hypermedia
  • stylesheets
  • scripts

Tags

Tags constitute the method of annotation. In all, there exist 142 distinct tags. Many feature additional properties which provide specific, context-based, information about the information they annotate. Tags are:

• surrounded by < and > symbols
• case-insensitive, though convention dictates lower-case usage, e.g. <title> vs. <TITLE>
• some are “self-closing,” while others require closing tags around information, e.g.:
  • <strong>Text</strong> producing Text
  • <br /> which produces
    a line break

Elements

Tags create elements. The term element, then, refers to both the information included in the element and the tag(s) that characterize that information. For example:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam venenatis libero eget nisl hendrerit,
et elementum nisl cursus.</p>

is refered to as a paragraph element and is rendered:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis libero eget nisl hendrerit, et elementum nisl cursus.

Images are examples of “self-closing” tags that create elements (referred to as void elements in the literature). An example:

<img
    src="https://placecats.com/100/100"
    width = "100"
    height = "100"
    alt = "A pair of cute cats"
/>

Rendered as:

In the case of our img element, we notice several different properties:

• src
• width
• height
• alt

While the kinds of properties available depend largely on the tag/element itself, here:

Property	Meaning
src	Source for image, typically a URL (relative or absolute)
width	Specified image width, in pixels
height	Specified image height, in pixels
alt	Alternative text to display if image doesn’t load and for accessibility tools like screen readers

As for the tags that create elements, it’s unlikely that a developer will ever use all of them, at least in a single page. However, the list below provides a concise view of the most common:

<head>, <title>, <body>, <main>, <header>, <footer>, <section>, <a>, <p>, <div>, <span>, <details>, <img>, <figure>, <figcaption>, <nav>, <ul>, <ol>, <li>

Each has a default representation in a browser, as the brower’s job is to render content, even if it’s not necessarily valid HTML. We override this default view using a stylesheet (CSS), which takes the place of a given browser’s “root” stylesheet.

Most of the above are not void elements, so they require content and closing tags.

Beginning a Page

The first step to creating a given page is to develop it as a document, using a structure like that below. The HTML below includes comments to describe the various parts.

<!-- Set the document type to HTML -->
<!Doctype html>
<!-- Create the root element -->
<html lang="en">
  <!-- Create page metadata, known as the "head" -->
  <head>
    <!-- Add metadata like character set, screen size, and page title -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <!-- Create visible body of the page -->
  <body>
        <!-- Designate the following as the main content of the page -->
        <main>
            <!-- Include a heading on the page -->
            <h1>Astro</h1>
        </main>
  </body>
<!-- Close the root element, end the page -->
</html>

Things to Keep in Mind

While we’re not into how we style pages yet, it’s worth knowing that how you organize the information on your page can affect styling. For example:

<img
    src="https://placecats.com/200/200"
    width = "200"
    height = "200"
    alt = "A cat with a banana"
/>
<img
    src="https://placecats.com/199/199"
    width = "199"
    height = "199"
    alt = "A cat staring directly at the viewer"
/>

Browsers render content like a program’s flow-of-control: top-to-bottom, left-to-right. Repositioning these elements in CSS is possible, but potentially changes the meaning of the page, and might cause some accessibility issues for assistive technologies that don’t render CSS. If the above were two related steps to a process, it’s possible that the reader has gotten them backwards!

Similarly, designers should arrange content in a hierarchical view on a page. For example:

<h1>A major heading</h1>
A really big point.
<h2>A sub-heading</h2>
A medium point related to the big point.
<h1>A sub-sub heading</h1>
A small point, I want to relate to the medium point.
Look, I just wanted it to be big.

A major heading

A really big point.

A sub-heading

A medium point related to the big point.

A sub-sub heading

A small point, I want to relate to the medium point. Look, I just wanted it to be big.

The above would cause problems, as the page says that the second <h1> should be at the same level as a top-level point in the hierarchy. This confuses the information structure.