DIGI 220 - Semantic Formatting & Images

VIU Media Studies Department - Robin Davies

Lecture Overview

  • Semantic (content-based) formatting elements
  • Deprecated Elements
  • Images

Why Semantics?

a fragment from a manuscript, featuring hard-to-read handwriting, edits, and notes in margins

This document is rich with information, even if we have a hard time reading the text! Once the handwriting is deciphered and digitized, further information about the original document can be encoded in markup surrounding the purely textual content.

The original image was once found here.

Content-Based Inline Elements

  • Content-based elements are designed to structure the content, not to indicate specific physical appearances
  • This is refered to as semantic markup - indicate the meaning, not the presentation
  • A number of content-based inline elements exist, two of which are used to indicate importance or emotion:
    • <em> & <strong>
  • The others are used to give text specific meaning

<b> and <i>

  • The bold <b> and italic <i> elements are intended to be used logically to create semantic markup, not to create presentation
  • These elements are necessary in certain specific contexts, such as legal documents
  • Don't use <b> and <i> elements in this class unless you need to convey the specific meaning of these elements
  • For general emphasis use <em> not <i>
  • For stronger emphasis, use <strong> not <b>

Monospaced Fonts

  • There are three HTML 5 elements that can provide monospaced fonts
  • <code>, <kdb> and <samp>
  • The most commonly used is <code>
  • Remember that each of these should be used semantically, not for presentation
  • For example, these Lectures routinely use <code> to indicate what you might find in an HTML or CSS file, as a monospaced font is very clear about punctuation and specific characters
  • CSS can also be very useful for creating monospaced/preformatted output

Browser Support

  • One of the most important things to know about an element is the browser support it has
  • This refers to what browsers implement the element, and to what degree they implement it
  • Not all browsers (particularly older browsers) implement all elements!
  • <em>, <strong>, <b>, <i>, <code>, <kdb> and <samp> are all supported by all major browsers
  • You can typically find information about browser compatibility for specific elements at w3schools by looking under "Browser Support" for a given element, or using a tool like Can I Use

<pre> Element

  • The <pre> element is an exception to the semantic requirement
  • This element is designed to deal with presentation, specifically preformatting
  • Authors use this tag to lay out text exactly as presented
  • NOTE: <pre> is a block-level element

Quoting Text

  • There are two special elements for marking text as quoted, meaning taken from somewhere or someone else
    • <blockquote>
    • <q>

<blockquote> provides block-level quotation which is indented by most browsers

<q> provides inline-level quotation which is supposed to be enclosed in quotes

There's all sorts of great further reading to be had on blockquote, q, and cite.

<blockquote> element

  • Easily used to create a block-level quote
  • The cite attribute can be used with both <blockquote> and <q> elements
  • The blockquote element can contain other block level elements, such as headings, paragraphs, and lists

<q> element

  • Used to create inline quotes
  • Designed to be used on short quotes (larger quotes should use blockquote)
  • The browser may enclose the quote in quotation marks for you by default
  • As with blockquote, consider using the cite attribute with q

Changed Text

  • Use the <ins> and <del> elements to mark edited or changed text
  • These two are very useful in combination with CSS, where you can change the default behaviour
  • <ins> by default presents with an underline; this should perhaps be updated with CSS (why?)
  • The cite and datetime attributes can be used with <ins> and <del>
  • Though most browsers don't make use of these attributes, some users/clients might, and the document is richer with the additional meta information

Abbreviations & Acronyms

  • <abbr> handles abbreviations and acronyms
  • You can use CSS to change the appearance of this element (and others as well, of course)
  • When you use <abbr>, be sure to use the title attribute as well so folks don't have to google your short forms!
  • <abbr title="Cascading Style Sheets">CSS</abbr>

Deprecated Text Elements

  • The following text formatting elements are deprecated, though you certainly may see them in the code of existing websites
    • <font>
    • <basefont>
    • <center>
  • The effects of these elements are now better created with CSS
  • Do not use these in this class!

Web Graphic Formats

  • Because the needs of the World Wide Web are very exact, specific formats have been developed for use online
  • The most common online formats are:
    • GIF
    • JPG
    • PNG
    • PDF

Web Graphic Compression

  • Because file size is of the utmost importance online, these graphic formats include significant compression (visual and/or data) in their specifications (as opposed to TIFFs or other raw formats)
  • Note that GIF and JPEG are widly used, but are not interchangeable; each is designed to best compress a different type of image

GIF

  • GIF (Graphic Interchange Format) was originally created by CompuServe
  • GIFs work best for images with large, flat areas of color, such as vector-created files, logos, diagrams...
  • GIFs do not work as well with continuous tone images such as photographs
  • GIFs can be used to create simple (notorious and ubiquitous) animations
  • GIF compression is described as lossless, because the visual content of images is not affected
  • Each GIF contains a colour palette of flexible size
  • One of the colours in this palette can be transparent, which afforded transparency in the early web

JPEG

  • Joint Photographic experts Group format
  • Uses 24-bit colour, 8 bits for each RGB channel
  • Designed for the compression of photographic (continuous tone) images
  • Less appropriate for illustrations or images with large flat areas of color
  • The compression system for JPGs is described as lossy, because the visual content of images is affected, to varying degrees
  • The compressor uses perceptual encoding and colour sub-sampling to reduce the amount of information saved

PNG

  • Portable Network Graphic
  • PNG features:
    • Lossless compression, though still better than GIF
    • Support for alpha channels (true transparency)
    • Embedded gamma correction (perceived brightness depending on computer monitor)
    • Superiour interlacing (look here for a neat demo of interlacing)
  • further reading on the PNG format can be found here

Using Images in HTML

  • To insert images, we use the <img> element
  • The <img> element is inline (does not break line or paragraph flow), and should be placed inside a block level element
  • The format for image display is not defined by HTML; the browser is responsible for this
  • Support is quite widespread for GIF, JPG & PNG

The <img> Element

  • The closing tag is forbidden; do not use </img>
  • Therefore, there cannot be any content inside the <img> element (though there are a number of required attributes)
  • <img src="cow.jpg" alt="image of a cow" title="image of a cow" width="50" height="75">

Important Attributes

  • src (required)
    • value is a valid URL to the image you wish to embed in your HTML document
  • alt (required)
    • a text string (up to 1024 characters) displayed if the image is not available or if images have been disabled
    • enclose in quotation marks (like all attribute values)
    • If an image is used for formatting, like a bullet, then the W3C recommends using alt=""
  • <img src="cow.jpg" alt="image of a cow" title="image of a cow" width="50" height="75">

Width, Height & Title

  • Browsers must wait for an image to load to know its full width & height; this delays page layout
  • Include the width & height attributes to speed page layout!
  • You can also use width & height to override the size of the image, but the browser still has to download the full image (think thumbnails?)
  • Officially, we should use the title attribute and not the alt attribute to provide tooltips for browsers; some browsers display the alt text as a tip by default

img and its attributes

Here's an example of img in action, with content provided by Wikipedia; note the image deliberately does not load, but you can see where it's supposed to be.

Whyatt is a 9-year-old olive-skinned, blue eyed, brown-haired boy who wears a polo shirt and khaki pants. Super Why! or The Reading Adventures of Super Why! is a CGI animated show developed by Angela C. Santomero and Samantha Freeman Alpert. The TV series is produced by New York City-based Out of the Blue Enterprises and Toronto-based DHX Media...

Speeding Up Downloads

  • Keep Graphics Simple
  • Reuse Images
  • Divide large documents
  • Isolate necessarily large graphics

Keep Graphics Simple

  • Don't be lazy in your image creation
  • Use software to optimize image dimensions & bit depth
  • Stay away from panoramic backgrounds
  • Avoid gratuitous decorative elements
  • Use large, flat areas of colour, as opposed to image-based gradients
  • Use CSS for visual effects when possible
  • Specify image dimensions

Reuse Images

  • Particularly for icons & GIF animations
  • Browsers cache images
  • For GIF animations, try to keep the image background consistent to increase compression & animation speed

Divide Large Documents

  • This is a general rule which can be applied to images as well
  • Viewers tend to like smaller documents linked together as opposed to single large documents
  • Rule of Thumb: keep your pages and embedded media as small as possible!
  • How to check this?

Isolate Large Images

  • If you must use large images, provide a special link
  • Do not force everyone to download your image; let the viewer decide
  • Use a thumbnail to give the viewer a sense of the image
  • We'll do this in Lab 03 :)