Category: HTML Revisited

Most text stylizing (font size, color, alignment) is defined using CSS rules within cascading style sheets, however, HTML provide a few inline elements that can be used to stylize text.

<strong>

Text contained between opening and closing strong tags is displayed in bold and is emphasized by screen readers in a different audible tone of voice.  Use deliberately if you want to emphasize text for those that are hearing impaired.

<b>

Text contained between opening and closing b tags is displayed in bold without emphasizing it by screen readers.

<em>

Text contained between opening and closing em tags is displayed in italics and is emphasized by screen readers in a different audible tone of voice.  Use deliberately if you want to emphasize text for those that are hearing impaired.

<i>

Text contained between opening and closing i tags is displayed in italics without emphasizing it by screen readers.

<u>

Text contained between opening and closing u tags is displayed underlined.  Be deliberate when underlining text as most people interpret underlined text with links.

Below we discuss hyperlinks.  For more information, please consult Mozilla’s terrific documentation on links.

Hyperlinks are a staple for developing interactive web pages.  This tutorial discusses how to use links to:

• navigate to another web page
• navigate to a particular element of the current or another web page

Hyperlinks are created using the inline anchor (<a>) element.  The href attribute of the anchor element specifies a URL to a resource that is opened when the content (e.g. text) that is between the opening and closing anchor tags is clicked.

For example:

<a href="https://protonmail.com">Proton Mail</a>

produces the following link:  Proton Mail

The title Attribute

The title attribute’s value contains text that is displayed as a tooltip when the cursor hovers over the link.

<a href="https://protonmail.com" title="Secure Email">Proton Mail</a>

The code above produces the following link: Proton Mail

The href Attribute

The href attribute must contain one of the following:

• the absolute path to a resource
• a relative path to a resource
• a path to an element on the current page or some other page
• a request to create an email with the users default email client

An absolute path must include the protocol and domain name as shown in the example above.  Absolute paths must be used to link to resources on other domains.

A relative path can be used to specify the path to a resource on the same domain for which the HTML page containing the link is located.  The path is relative to the location of the web page containing the link.  Suppose, for example, a web site has the following files:

.../index.html                    
.../csci240/index.html
.../csci240/structured_text.html
.../csci240/images/cartoon.png

The following are anchors elements assumed to be in .../csci240/index.html.

<!-- Link to a file in the parent directory -->
<a href="../index.html">Home</a>

<!-- Link to a file in the same directory -->
<a href="structured_text.html">A3 - Structured Text</a>

<!-- Link to a file in a sub-directory -->
<a href="images/cartoon.png">xkcd cartoon</a>

When linking to a web page, we can request the browser scroll to a particular element in the web page.  In order to do so, the element must have an id attribute set.  The href attribute in the anchor tag should then include, after the file name, a hash-mark (#) followed by the value of the id attribute of the element.  Below are link examples that link to particular in a web page.

<a href="#top">Top of page</a>
<a href="#titleAttribute">Title Attribute Section</a>

The code above code produces the following links.

Top of page
Title Attribute Section

Note that the second link works because the H3 element in this page that is used for the heading The title Attribute contains an id attribute that is set to the string titleAttribute.

Anchor Content

We’ve seen above many examples that have text between the opening and closing anchor tags.  The content between the opening and closing anchor tags can contain almost any HTML content (including block elements) making the entire content clickable.  For example, to make an image clickable we use the following code.

<a href="https://xkcd.com/610/"><img src="https://imgs.xkcd.com/comics/sheeple.png"></a>

The code above produces the following HTML.

A web page usually has the following components:

• A header
• A navigation menu
• A main section that holds the main content for the page
• Sidebars
• A footer

HTML provides elements that are intended to hold these and other sections of a web page.  They are called semantic elements because their names imply their functionality.

Some of the semantic elements in HTML 5 are:

Besides the fact that semantic elements help organize the contents of an HTML file, they are especially useful to visually impaired individuals that use screenreaders.  Through these screenreaders, users can instruct the reader to read specific parts of the web page like the navigation menu or the main content.

Screen readers and other assistive technology can provide their users with outlines of a webpage.  The body, nav, main, section, article, and aside elements define sections within a page that can be parsed to produce an outline. See Using HTML sections and outlines for a complete discussion.

Non-semantic Elements

HTML also includes non-semantic elements that can be used to define portions of code that need to have the content within them stylized but that don’t have an appropriately named semantic element.  These are called div and span. The div element is a block-level element and span is an inline element.

Example

<section>
    <h2>Notes</h2>
    <article>
        <h3>Getting Started</h3>
        In this course you’ll learn how to create a dynamic website
        on the Internet using HTML, CSS and JavaScript.
        <a href="http://www.n0code.net/wp/csci240/getting-started/">Read more</a>
    </article>
</section>

The above code produces the following HTML.

We can embed an image in a web page using the inline img element and its src attribute.  The src attribute is set to the location of the image file with an absolute path or a relative path.  Below are two examples.  The first displays the CSS3 logo that is stored on the host machine.  The second displays the HTML5 logo using a URL to a resource on another server.

Notice the img element doesn’t include a closing tag.  The image element is an empty element, that is, they cannot contain content.  Therefore it is often an error to include a closing tag.

<img src="images/css3.png" width="64">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" width="64">

The height and width Attributes

As shown above, the width attributes can be used to resize the images, different from their original sizes, however it is recommended to avoid using the width and height attributes and use an image editor to resize an image to the size that you want displayed.

The alt Attribute

The alt attribute can be set alternative text which is displayed when the image cannot be displayed.

<img src="images/nonexistent_file.png" alt="CSS 3 Logo">

The title Attribute

The title attribute can provide text that is displayed as a tooltip when the user hovers the cursor over the image.

<img title="CSS 3 Logo" src="images/css3.png">

Attribution

The Mozilla documentation on embedding images has an important warning about using images created by others.  I’ve copied it below.

figure and figcaption elements

HTML5 provides a semantic block element named figure that can contain img elements and figcaption elements.  The figcaption element is used to hold text that is displayed with the image.  The text can be used to provide a title, description, or attribution.

<figure>
    <img title="CSS 3 Logo" src="images/css3.png">
    <figcaption>By Rudloff [CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons</figcaption>
</figure>