CS 1100 Reading 3 HTML

Week 3: A Deeper Look at HTML

This reading draws extensively on a page by David Humphrey.

Block and Inline Elements

Visual HTML elements are categorized into one of two groups:

block-level elements : create a block of content in a page, with an blank line before and after the element. Block elements fill the width of their parent element. They can contain other block elements, inline elements, or text.
inline elements : creates content flows inline with text around it, which is part of a containing block. Inline elements can contain other inline elements or text.

Consider this snippet of HTML:

<body>
  <p>The <em>cow</em> jumped over the <strong>moon</strong>.</p>
</body>

<p> is a block-level element, so the paragraph will fill its container, in this case the <body> element. It will also have empty space added above and below it.

Within this block, we also encounter several inline elements. First, we have simple text. We also see a <em> element and a <strong> elements. Each affects the text it contains, but it does not create a new block. Instead, it continues to flow inline within its container, the <p> element.

Empty Elements

Many of the elements we have seen this far begin with an opening tag and end with a closing tag: <body></body>, <p></p>, and so on. However, not all elements need to be closed. Some elements have no content, and so don't need a closing tag. We call these empty elements (also known as void elements).

One example we've already seen is the <br> element, which causes a line break. We use a <br> when we want to tell the browser to insert a newline:

<p>Knock, Knock<br>Who's there?</p>

Other examples of empty elements include <hr> for a horizontal line, <meta> for including metadata in the <head> element, and a dozen others, of which we will use only one — for the first time, later in this reading.

Grouping Elements

We often need to group several elements into a single unit. HTML includes a number of pre-defined container elements that we can use, depending on what kind of content we are creating and where it is in the document.

These elements enable us to do semantic markup of our documents. Semantic markup helps the browser and other tools, such as screen readers for accessibility, determine important structural information about the document. See this blog post for a great discussion of why we should use semantic markup.

Grouping elements include:

<header> : introductory material at the top of a page
<nav> : content for the purpose of navigating a page, such as a menu, an index, or a table of contents
<main> : the main content of the document
<section> : a group of related elements in a document representing one section of a larger whole
<aside> : a portion of a document whose content is indirectly related to the document's main content
<article> : a self-contained composition, such as a blog post or a news article
<footer> : end material such as the author's name, a copyright notice, or links to related documents

Sometimes there is no suitable semantic container element for a group, so we need something more generic. In these cases we have two options:

<div> creates a generic block-level container
<span> creates a generic inline container

<div>
  <p>
    This is an example of a using a div element. It also includes this
    <span><em>span</em> element</span>.
  </p>
  <p>
    Later we will use a div or span like this to target content in our page
    with CSS styling or JavaScript processing.
  </p>
</div>

We often use <div> or <span> when we want to style text or a set of elements and they are not already in a specific container.

Tables

Sometimes our data is tabular in nature, and we need to present it in a grid known as a table. A number of elements are used to create tables:

<table> : the root element for a table in HTML
<caption> : an optional title for the table
<thead> : one of more rows at the top of the table with information about the table
<tbody> : rows that form the content of the table
<tfoot> : one or more rows at the bottom of the table with summary data

We define rows and columns of data within the above using the following:

<tr> : a single row in a table
<td> : a single cell in a row and column that contains data
<th> : a header or title for a column

We can use the attributes rowspan and colspan to extend table elements beyond their usual bounds. For example, we might want to have an element span three columns (colspan="3"), as in the THANKSGIVING BREAK row of the course homepage. Likewise, we might want to have a cell span two rows (rowspan="3"), as in the Week entries on the course homepage.

Here is an example of a table that uses many of these features. First, click on the link to see the table. Then control-click on the link to download the HTML file that defines it so that you can examine it in VS Code. Try modifying the table in order to get a feel for how the table elements work.

Notice that the default styling for HTMLs is rather unattractive. Later in the course, we will use CSS to create beautiful tables. (If you would like to see the table styled using my stylesheet for this course, delete Lines 6 and 8 in the source file and reload the page in yout browser.)

Multimedia Elements: Images, Audio, and Video

In addition to supporting text, HTML5 has built-in support for including images, videos, and audio. We specify the media source we want to use, and also how to present it to the user via different elements and attributes.

Images

For example, here are two examples that load images. The first loads the image from an external source using an absolute URL and allows the image to use the full width of browser window:

<img
  src="https://images.unsplash.com/photo-1502720433255-614171a1835e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=344dfca9dc8cb137a4b1c2c711752bc5"
  alt="a jazzy photo of downtown Toronto"
>

The second loads a local image from the current directory and limits the image to being 400 pixels wide:

<img
  src="cat.jpg"
  alt="Picture of a cat"
  width="400"
>

The width and height attributes allow us to control the size of the image in the browser independent of any styling. The alt attribute allows us to provide "alt text" for the image, which enables the browser to display something useful in case displaying the image fails. More importantly, alt text helps other tools like screen readers to give their users information about the picture. This makes our pages more accessible to visually-impaired viewers.

Video

To include video in a web page, we use a video element. It uses the same src to specify the file that contains the resource and the same width and height attributes to specify the desired size of the video display.

Here is an example showing external video file in mp4 format, with user controls enabled on the video"

<video
  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls
>
</video>

The video element also supports three empty attributes:

controls, seen above, to show user controls
autoplay, to play the video when the page loads
muted, to mute the video when played on load

Audio

Including audio is very similar to video. The audio element also supports the src, controls, autoplay, and muted attributes.

Here's an example that autoplays an MP3 audio file in the background upon page load, with no user controls:

<audio
  src="https://ia800607.us.archive.org/15/items/music_for_programming/music_for_programming_1-datassette.mp3"
  autoplay
>
</audio>

Note: The source URL for a video or audio element must point to an actual video or audio files, not to a YouTube URL or some other source that is actually an HTML page.

Offering Multiple File Types

Finally, instead of including a src attribute, an audio or video element may contain one or more source elements that specify a sequence of sources, each with a different type. The source elements enable the browser to select an optimal file type based on the types of media it supports.

For example, this HTML instructs the browser to try to play an MP3 file, and an OGG file if the MP3 fails. If both fail, the browser will display a paragraph with a link to the MP3 file:

<audio controls>
  <source src="song.mp3" type="audio/mp3">
  <source src="song.ogg" type="audio/ogg">
  <p>
    Sorry, your browser doesn't support HTML5 audio. Here is
    <a href="song.mp3">a link to the audio file</a>
    instead.
  </p>
</audio>

... and this HTML instructs the browser to try to play an MP4 file first, an OGG file if that fails, and a WEBM file if that fails. If all three fail, the browser will show a paragraph with a message to the user:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <source src="video.webm" type="video/webm">
  <p>Sorry, your browser doesn't support HTML5 video</p>
</video>

HTML5 has also recently added the picture element to enable the browser to select among images of different types as well. We will see it soon when we consider images in more detail.

Conclusion

Always keep in mind that we use HTML elements to mark web content by type and structure. Don't worry yet about how your HTML pages look. We will add style to them soon when we study CSS. For now, get comfortable with what is possible in HTML for describing the structure and content of our documents.

CS 1100: Web Development: Client-Side Coding