Introduction to Web

Interaction Design
With HTML and CSS
Introduction to Web
Interaction Design
With HTML and CSS

Michael Macaulay
CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2018 by Taylor & Francis Group, LLC
CRC Press is an imprint of Taylor & Francis Group, an Informa business
No claim to original U.S. Government works
Printed on acid-free paper
Version Date: 20170407
International Standard Book Number-13: 978-1-1389-1185-7 (Paperback)
This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to publish reliable
data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use.
The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to
copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write
and let us know so we may rectify in any future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any
electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any
information storage or retrieval system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, please access www.copyright.com (http://www.copyright.com/) or
contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a not-for-profit
organization that provides licenses and registration for a variety of users. For organizations that have been granted a photocopy license by the
CCC, a separate system of payment has been arranged.
Trademark Notice: Registered trademark of products or corporate names are used only for explanation and identification without intent to
infringe.

Library of Congress Cataloging.in.Publication Data

Names: Macaulay, Michael, author.

Title: Introduction to Web interaction design : with HTML and CSS / Michael
Macaulay.
Description: Boca Raton, FL : CRC Press, [2017] | Includes bibliographical
references.
Identifiers: LCCN 2016031177| ISBN 9781138911857 (pbk. : acid-free paper) |
ISBN 9781317432814 (web pdf) | ISBN 9781317432807 (epub) | ISBN
9781317432791 (mobipocket/Kindle) | ISBN 9781315692333 (master)
Subjects: LCSH: Web sites--Design. | Web site development. | Human-computer
interaction. | Computer software--Human factors.
Classification: LCC TK5105.888 .M25 2017 | DDC 006.7--dc23
LC record available at https://lccn.loc.gov/2016031177

Visit the Taylor & Francis Web site at

http://www.taylorandfrancis.com
and the CRC Press Web site at
http://www.crcpress.com
Contents

Preface
Author
1. The Internet and the Web
1.1 Introduction
1.2 Learning Outcomes
1.3 Fundamentals of the Internet and the Web
1.4 How the Web Works
1.5 Requirements for Creating Websites
1.6 Useful Info
1.6.1 Web Links
1.6.2 Free Software
Part I HTML
2. Introduction to HTML
2.1 Introduction
2.2 Learning Outcomes
2.3 About HTML
2.3.1 The Structure of an HTML Document
2.3.1.1 The Contents of the Head Section
2.3.1.2 The Contents of the Body Section
2.3.2 Creating a Web Page
2.3.2.1 Creating a Web Page with a Text Editor
2.4 Useful Info
2.4.1 Web Links
3. Text
3.1 Introduction
3.2 Learning Outcomes
3.3 Headings
3.3.1 Headings in Design
3.4 Paragraphs
3.4.1 Paragraphs in Design
3.5 Line Breaks, Thematic Breaks, and Comments
3.5.1 Specifying Word-Break Opportunities
3.6 Superscript and Subscript
3.7 Importance, Emphasis, and Relevance
3.8 Quotations and Citations
3.9 Definitions and Abbreviations
3.10 Small Text
3.11 Text Edit
3.12 Displaying Computer Code and Output
 3.13 Displaying Preformatted Text
3.14 Authors’ Details and Publication Dates
3.15 Providing Hidden Additional Information
3.16 Displaying a Dialog Box
3.17 Menu Bar and Drop-Down Menus
3.18 Displaying Special Characters
3.18.1Non-Breaking Spaces
3.19 Language Information and Text Directionality
3.19.1lang
3.19.1.1Benefits of Using the lang Attribute
3.19.2dir
3.20 Ruby Text
3.20.1<ruby>, <rb>, <rt>, and <rp>
3.20.2<rbc> and <rtc>
3.21 Acquiring Text for Use
3.22 Useful Info
3.22.1Web Links
4. Lists, Tables, and Links
4.1 Introduction
4.2 Learning Outcomes
4.3 Lists
4.3.1 Common List Attributes
4.3.2 Nested Lists
4.4 Tables
4.4.1 Basic Tables
4.4.1.1 <table>, <caption>, <th>, <tr>, and <td>
4.4.1.2 Columns’ Grouping
4.4.2 Table Cells’ Merging
4.4.2.1 <rowspan> and <colspan>
4.4.3 Long Tables
4.4.3.1 <thead>, <tbody>, and <tfoot>
4.4.4 Tables and Accessibility
4.4.4.1 The scope Attribute and Accessibility
4.4.4.2 The id and headers Attributes and Accessibility
4.5 Links
4.5.1 Linking to Another Website
4.5.2 Linking to Another Page on the Same Website
4.5.3 Linking to Another Part on the Same Page
4.5.3.1 Using the id Attribute
4.5.3.2 Using the name Attribute
4.5.3.3 Within-Page Links in Web Design
4.5.4 Linking to a Specific Part on Another Page
4.5.5 Linking to an E-Mail Program
4.6 Useful Info
4.6.1 Web Links
5. Forms
 5.1 Introduction
5.2 Learning Outcomes
5.3 Form Element
5.4 Form Controls
5.4.1 <input>
5.4.1.1 Input Types for Collecting Text
5.4.1.2 Input Types for Offering Options
5.4.1.3 Input Types for Starting an Action
5.4.2 Multipurpose Button
5.4.2.1 <button>...</button>
5.4.3 Multiple Lines Text Input
5.4.3.1 <textarea>...</textarea>
5.4.4 Drop-Down List
5.4.4.1 <select>...</select>
5.4.4.2 <datalist>...</datalist>
5.4.5 Showing Task Progress
5.4.5.1 <progress>...</progress>
5.4.6 Displaying Measurement
5.4.6.1 <meter>...</meter>
5.4.7 Outputting Calculation Result
5.4.7.1 <output>...<output>
5.4.8 Labeling Form Controls
5.4.8.1 <label>...<label>
5.4.8.2 Labeling and Accessibility
5.4.9 Grouping Form Controls
5.4.9.1 <fieldset>...</fieldset>/<legend>...</legend>
5.4.10An Example Form
5.5 Form Design Guidelines
5.6 Useful Info
5.6.1 Web Links
6. Images
6.1 Introduction
6.2 Learning Outcomes
6.3 Adding Images with HTML
6.3.1 <img>, <source>, and <picture>
6.3.1.1 Specifying a Single Image Source
6.3.1.2 Making an Image a Link, and Linking to an Image
6.3.1.3 Containing and Captioning Images Properly
6.3.1.4 Specifying Multiple Image Sources
6.3.2 <canvas>...</canvas>
6.3.3 <svg>...</svg>
6.3.4 <map>...</map> and <area>...</area>
6.4 Document Embedding
6.4.1 <iframe>...</iframe>
6.5 Types of Images
6.5.1 Bitmapped Images
 6.5.1.1 Image Resolution
6.5.1.2 Pixels per Unit Length
6.5.1.3 Color Depth
6.5.2 Vector Images
6.5.3 Image File Formats and Image File Size
6.5.5 Calculating File Size Generated from Scanned Documents
6.5.5 Calculating File Size Generated from Digital Camera
6.5.6 Calculating File Transmission Time
6.6 Guidelines for Effective Use of Images
6.6.1 Decorative Images
6.6.2 Large Images
6.6.3 Images with Text
6.6.4 Images and Captions
6.7 Acquiring Images for Use
6.7.1 Stock Images
6.7.2 Graphics Editors
6.7.3 Photography
6.7.4 Image Scanning
6.7.5 Web Coding Languages
6.8 Useful Info
6.8.1 Web Links
6.8.2 Free Software
7. Audio, Video, and Animation
7.1 Introduction
7.2 Learning Outcomes
7.3 Delivering Dynamic Media
7.4 Audio
7.4.1 Linking to Audio
7.4.2 Embedding Audio
7.4.2.1 <audio>.. .<audio>
7.4.2.2 <embed>
7.4.2.3 <object>.. .</object>
7.4.3 Audio in Web Design
7.4.3.1 Audio File Formats and Audio File Size
7.4.3.2 Guidelines on Effective Use of Sound
7.4.4 Acquiring Audio for Web Design
7.4.4.1 Stock Audio
7.4.4.2 Ripping Tracks from Discs
7.4.4.3 Digitizing Tracks from Vinyl Records
7.4.4.4 Creating Audio from Scratch
7.5 Video
7.5.1 Adding Video via Hosted Video Services
7.5.2 Adding Video to Web Page
7.5.2.1 Linking to Video
7.5.2.2 Embedding Video
7.5.3 Video in Design
 7.5.3.1 Video File Size
7.5.3.2 Video File Formats and Codecs
7.5.3.3 Guidelines on Effective Use of Video
7.5.4 Acquiring Video for Design
7.5.4.1 Stock Videos
7.5.4.2 Ripping Video from DVD Video/Blu-Ray Disc
7.5.4.3 Video from Video Devices
7.5.4.4 Producing Video from Scratch
7.5.4.5 Video Screen Capture
7.6 Animation
7.6.1 Animation in Design
7.6.1.1 Guidelines on Effective Use of Animation
7.6.2 Acquiring 2D Animation for Design
7.6.2.1 Stock 2D Animation
7.6.2.2 2D Animation Programs
7.6.2.3 Coding
7.7 Useful Info
7.7.1 Web Links
7.7.2 Free Software
Part II CSS
8. Introduction to CSS
8.1 Introduction
8.2 Learning Outcomes
8.3 Introduction to CSS
8.3.1 Anatomy of CSS Rules
8.3.1.1 CSS Selector Types
8.3.1.2 Pseudo-Elements
8.3.1.3 Pseudo-Classes
8.3.1.4 nth Selectors
8.3.2 CSS Cascading Properties
8.3.2.1 Last Rule Principle
8.3.2.2 Specificity Principle
8.3.2.3 Inheritance
8.3.3 Methods of Specifying CSS Rules
8.3.3.1 Inline CSS
8.3.3.2 External CSS
8.4 Useful Info
8.4.1 Web Links
9. Color
9.1 Introduction
9.2 Learning Outcomes
9.3 Specifying Color in CSS
9.3.1 RGB Values
9.3.2 HSL Values
9.3.3 Foreground and Background Color
9.3.3.1 Color Transparency
 9.4 Anatomy of Color and Color Models
9.4.1 Determining Color Values
9.5 Color in Design
9.5.1 Choosing Color Combinations
9.5.1.1 Monochromatic
9.5.1.2 Analogous
9.5.1.3 Complementary
9.5.1.4 Split Complementary
9.5.1.5 Double Contrast
9.5.1.6 Triadic
9.5.2 Color Proportions
9.5.3 Color in Content Organization
9.5.4 Color and Aesthetics
9.5.5 Color and Physiological Considerations
9.5.6 Color and Psychological Considerations
9.5.7 Color Preferences
9.5.8 Color and Accessibility
9.6 Useful Info
9.6.1 Web Links
10. Boxes: Size and Border
10.1 Introduction
10.2 Learning Outcomes
10.3 Box Dimensions
10.3.1width and height
10.3.1.1Specifying Logical Width and Height
10.3.2min-width and min-height and max-width and max-height
10.3.2.1Handling Content Overflow
10.3.2.2Specifying Minimum and Maximum Logical Width and Height
10.3.3calc()
10.4 Border, Padding, and Margin
10.4.1Border
10.4.1.1border-style
10.4.1.2border-width
10.4.1.3border-color
10.4.1.4border-top and border-bottom and border-right and border-left
10.4.1.5border
10.4.1.6border-image
10.4.1.7border-radius
10.4.2padding
10.4.2.1Specifying Padding for Logical Edges
10.4.3margin
10.4.3.1Specifying Margin for Logical Edges
10.4.3.2Margins in Design
10.5 Controlling Box Sizes
10.5.1Specifying How Boxes Are Rendered
10.5.2Making Boxes Resizable
 10.6 Adding Shadows to a Box
10.7 Applying Outline to an Element
10.7.1outline-offset
10.8 Changing between Inline and Block Elements
10.9 Hiding Content
10.9.1Hiding Content by Using the display Property
10.9.2Hiding Content by Using the visibility Property
10.10Useful Info
10.10.1Web Links
11. Boxes: Transform and 3D
11.1 Introduction
11.2 Learning Outcomes
11.3 Transforming Elements
11.3.1 transform-origin
11.3.2 transform
11.3.2.1Applying Rotation and Skewing
11.3.2.2Applying Perspective
11.3.3 perspective
11.3.3.1Example Application of the perspective Property
11.3.4 transform-style
11.3.5 backface-visibility
11.3.5.1Full Explanation of the Cube Example
11.4 Useful Info
11.4.1 Web Links
12. Positioning Elements
12.1 Introduction
12.2 Learning Outcomes
12.3 CSS Positioning Methods
12.3.1Static Positioning
12.3.2Relative Positioning
12.3.2.1Specifying Offset for Logical Edges
12.3.3Absolute Positioning
12.3.4Fixed Positioning
12.3.4.1An Application of Fixed Positioning
12.3.5Sticky Positioning
12.3.5.1Sticky Global Navigation
12.3.6Using Element Positioning in Drop-Down Menus
12.3.6.1Drop-Down Menu Using List Elements
12.3.6.2Drop-Down Menu Using the <button> Element
12.3.7Ordering Overlapping Elements
12.3.8Floating Elements
12.3.9Clearing Obstructed Floated Elements
12.3.9.1A Common Problem with Non-Floated Parent Elements
12.3.9.2Multi-Column Content with Floats
12.4 Multi-Column Layout
12.4.1columns and column-span
 12.4.2column-count, column-rule, and column-gap
12.4.3column-fill
12.5 Useful Info
12.5.1Web Links
13. Text: Typefaces and Fonts
13.1 Introduction
13.2 Learning Outcomes
13.3 Anatomy of Type
13.4 Typefaces and Fonts
13.4.1font-family
13.4.2@font-face
13.4.2.1Providing Broad Browser Support
13.4.3Fonts in Design
13.4.3.1Typeface Classifications
13.4.3.2Choosing a Typeface
13.5 Size of Text
13.5.1font-size
13.5.2font-size-adjust
13.5.3Font Size in Design
13.5.3.1Font Size and Typeface
13.5.3.2Font Size, Operating Systems, Resolution, and Screen Size
13.5.3.3Type Size and Target Audience
13.5.3.4Type Size and Visual Hierarchy
13.6 Weight of Text
13.6.1font-weight
13.6.2Font Weight in Design
13.7 Text Style
13.8 Useful Specialized Font Properties
13.8.1font-feature-settings
13.8.2font-synthesis
13.8.3font-variant
13.8.4font-stretch
13.9 Specifying Multiple Font Properties
13.10Useful Info
13.10.1Web Links
14. Text: Formatting and Decoration
14.1 Introduction
14.2 Learning Outcomes
14.3 Content Alignment
14.3.1text-align
14.3.1.1Text Alignment in Design
14.3.2vertical-align
14.3.3Centering Blocks of Text
14.3.3.1Horizontal Centering
14.3.3.2Vertical Centering
14.3.3.3Vertical and Horizontal Centering
 14.4 Text Indenting and Outdenting
14.5 Text Spacing
14.5.1letter-spacing, font-kerning, and word-spacing
14.5.2text-rendering
14.5.3Text Spacing in Design
14.6 Line Spacing
14.6.1line-height
14.6.2Line Height in Design
14.7 Specifying Lowercase or Uppercase
14.7.1Text Capitalization in Design
14.8 Specifying Content Directionality
14.8.1direction
14.8.2writing-mode
14.8.3text-orientation
14.8.4text-combine-upright
14.9 Text Decoration
14.9.1text-decoration
14.9.2text-decoration-skip
14.9.3text-underline-position
14.9.4text-emphasis
14.9.5text-shadow
14.10Styling with Pseudo-Elements
14.10.1::first-letter, ::first-line, ::before, ::after, ::selection
14.10.2Using content Property Values
14.11Styling Text with Pseudo-Classes
14.11.1Styling Links
14.11.2:target
14.11.2.1Lightbox Display and the :target Pseudo-Class
14.11.3:not(X)
14.11.4:empty
14.12Ruby Properties
14.12.1Ruby Properties for Styling and Formatting
14.12.1.1ruby-position
14.12.1.2ruby-align
14.12.1.3ruby-merge
14.12.2Converting Elements to Ruby Elements
14.13Useful Info
14.13.1Web Links
15. Images: Content and Background Images
15.1 Introduction
15.2 Learning Outcomes
15.3 Sizing Images
15.3.1Specifying the Quality of Resized Images
15.3.2Specifying Size for Responsive Images
15.4 Clipping Images
15.5 Aligning Images
 15.6 Positioning and Fitting Images in Element’s Box
15.6.1object-position
15.6.2object-fit
15.7 Background Images
15.7.1Adding Background Images
15.7.2Repeating Background Images
15.7.2.1repeat-x and repeat-y
15.7.2.2space and round
15.8 Specifying Background Image Position Area
15.9 Clipping Background Images
15.10Sizing Background Images
15.10.1background-size with Keywords
15.11Multiple Background Images
15.12Fixing the Position of Background Images
15.13Positioning Background Images
15.14Shorthand Background Property
15.14.1Multiple Background Images with background Property
15.15Useful Info
15.15.1Web Links
16. Images: Effects
16.1 Introduction
16.2 Learning Outcomes
16.3 Image Sprites
16.3.1Using Image Sprites with the <input> Element
16.4 Gradients
16.4.1Linear Gradients
16.4.1.1Repeating Linear Gradients
16.4.2Radial Gradients
16.4.2.1Example Application of Radial Gradient
16.4.2.2Repeating Radial Gradient
16.5 Filters
16.6 Blending Images
16.6.1background-blend-mode
16.6.2mix-blend-mode
16.6.3isolation
16.7 Useful Info
16.7.1Web Links
17. Lists, Tables, and Forms
17.1 Introduction
17.2 Learning Outcomes
17.3 Lists
17.3.1list-style-type
17.3.2list-style-image
17.3.3list-style-position
17.3.4list-style
17.3.5Styling Lists with Generic Properties
 17.3.5.1Styling <ol> and <ul> Elements with Generic Properties
17.3.5.2Styling Definition Lists
17.3.6Converting Other Elements to list-items
17.4 Tables
17.4.1Styling Tables with Generic Properties
17.4.2Styling with Table-Specific Properties
17.4.2.1border-collapse
17.4.2.2border-spacing
17.4.2.3empty-cells
17.4.2.4table-layout
17.4.3Converting Other Elements to Table Elements
17.4.4Guidelines for Designing Effective Tables
17.5 Forms
17.5.1Images in Input Fields
17.5.2Styling Form Elements
17.5.2.1Styling Form Buttons
17.5.2.2Styling Default Button
17.5.3Specifying Cursor Shape
17.5.4Validating Form Inputs
17.5.4.1:in-range and :out-of-range
17.5.4.2:valid and :invalid
17.6 Useful Info
17.6.1Web Links
18. Animation
18.1 Introduction
18.2 Learning Outcomes
18.3 About Animation
18.4 CSS 2D Animation
18.4.1@keyframes
18.4.2Animation Properties
18.4.3Using @keyframes and Animation Properties
18.4.3.1Applying Multiple Animations to an Element
18.4.3.2Animated CSS Lightbox Display
18.4.4CSS Transitions
18.5 3D Animation
18.5.1CSS 3D Animation
18.5.1.1An Example Application of 3D Animation
18.6 Animation in Design
18.6.1Animation in Attracting Attention
18.6.2Animation in Providing Feedback
18.6.2.1Depiction of Transition
18.6.2.2Rollover Effect
18.6.3Animation in Providing Explanation
18.6.4Animation in Providing Entertainment
18.6.5Animation in Setting Mood
18.6.6Animation in Providing a Sequence of Items
 18.7 Beyond CSS-Only Animation
18.8 Useful Info
18.8.1Web Links
19. Layout with Flexible Box
19.1 Introduction
19.2 Learning Outcomes
19.3 Anatomy of Flexible Box Layout
19.4 Controlling Flow Direction of Flex Items
19.5 Controlling the Wrapping of Flex Lines
19.6 Specifying Flex Direction and Wrapping Together
19.7 Controlling the Size of Flex Items
19.7.1Specifying Flex Items Sizing Factors Individually
19.7.2Specifying All Flex Items Sizing Factors with One Property
19.7.2.1Vertical Space Example
19.8 Aligning Flex Items
19.8.1Aligning All Flex Items in a Flex Container
19.8.1.1justify-content
19.8.1.2align-content
19.8.1.3align-items
19.8.2Aligning Flex Items Individually
19.9 Ordering Flex Items
19.10Useful Info
19.10.1Web Links
20. Layout with the Grid Model
20.1 Introduction
20.2 Learning Outcomes
20.3 About Layout Grids
20.4 Anatomy of the Grid Layout Model
20.5 Properties for Creating Grid Layout
20.5.1Specifying Grid Columns, Rows, and Areas
20.5.1.1grid-template-columns and grid-template-rows
20.5.1.2Specifying Multiple Names for a Grid Line
20.5.1.3Handling Repeating Values
20.5.1.4grid-template-areas
20.5.1.5grid-template
20.5.2Controlling Implicit Tracks and Items’ Auto-Placement
20.5.2.1grid-auto-columns and grid-auto-rows
20.5.2.2grid-auto-flow
20.5.3Specifying Gutters between Grid Columns and Rows
20.5.3.1grid-column-gap, grid-row-gap, and grid-gap
20.5.4Specifying All Grid Structure Properties Together
20.5.4.1grid
20.5.5Specifying Grid Item Placement within the Grid
20.5.5.1Specifying Grid-Placement Values Separately
20.5.5.2Specifying Column and Row Grid-Placement Values Separately
20.5.5.3Specifying All Grid-Placement Values Together
 20.6 Aligning Grid and Grid Items
20.6.1Aligning All Grid Items in a Grid Container
20.6.1.1justify-content and align-content
20.6.1.2justify-items and align-items
20.6.2Aligning Grid Items Individually
20.6.2.1justify-self and align-self
20.7 Ordering Grid Items
20.7.1Ordering Grid Items Display Sequence
20.7.1.1order
20.7.2Specifying Layer Positions for Stacked Grid Items
20.7.2.1z-index
20.8 Example Application of Grid
20.9 Useful Info
20.9.1Web Links
21. Responsive and Adaptive Web Design
21.1 Introduction
21.2 Learning Outcomes
21.3 Screen Size and Resolution Issues
21.4 Fixed and Liquid Layouts
21.4.1Fixed Layouts
21.4.2Liquid Layouts
21.5 Responsive vs. Adaptive Design
21.6 Creating Responsive Design
21.6.1Steps for Creating a Responsive Design
21.6.1.1Creating the Layouts for Different Screen Sizes
21.6.1.2Creating Fluid Media Assets
21.6.1.3Creating CSS Rules for Changing between Layouts
21.6.2Implementing Responsive Design via Flexbox
21.6.3Implementing Responsive Design via Grid
21.7 Creating Adaptive Design
21.8 Useful Info
21.8.1Web Links
22. Beyond HTML and CSS
22.1 Introduction
22.2 Learning Outcomes
22.3 Enhanced CSS
22.4 Using Scripting Languages with HTML
22.4.1Client-Side Scripting
22.4.1.1Embedding Client-Side Scripts
22.4.1.2External Client-Side Scripts
22.4.2Server-Side Scripting
22.4.2.1Using Server-Side Script with AJAX
22.4.2.2Server-Side Script, AJAX, and Database
22.4.2.3Storing Data in Database
22.4.2.4Retrieving Data from Database
22.5 Optimizing Website Performance
 22.5.1Optimizing Text-Based Assets
22.5.2Optimizing Image-Based Assets
22.5.3Optimizing Web Font
22.6 Useful Info
22.6.1Web Links
Part III Web Design Principles and Practices
23. Design: The Fundamentals
23.1 Introduction
23.2 Learning Outcomes
23.3 Visual Aesthetics in Design
23.4 Design Elements and Principles
23.4.1Basic Elements of Design
23.4.1.1Point
23.4.1.2Line
23.4.1.3Shapes
23.4.1.4Size/Scale
23.4.1.5Space
23.4.1.6Hue and Value
23.4.1.7Texture
23.4.2Principles of Design
23.4.2.1Balance
23.4.2.2Emphasis
23.4.2.3Rhythm
23.4.2.4Proportion
23.4.2.5Unity
23.5 Useful Info
23.5.1Web Links
24. Designing for the Web
24.1 Introduction
24.2 Learning Outcomes
24.3 User Experience
24.4 Website Credibility
24.4.1Show Usefulness
24.4.2Show Professionalism
24.4.3Manage Adverts Properly
24.4.4Show Trustworthiness
24.5 Designing Website Interfaces
24.5.1Designing Website Navigation
24.5.1.1Tabs Metaphor
24.5.1.2Drop-Down Menus
24.5.1.3Site Map
24.5.1.4Footers
24.5.2Designing Content Area
24.5.2.1Homepage Content
24.5.2.2Content Display Size
24.5.2.3Content Length
 24.5.2.4Line Length
24.5.2.5Content Layout
24.5.2.6Managing Content Amount
24.5.2.7Writing Content for the Web
24.6 Designing for Different Ages
24.7 Useful Info
24.7.1Web Links
25. Designing for Mobile Devices
25.1 Introduction
25.2 Learning Outcomes
25.3 Designing for Smartphones
25.3.1Designing Content for Smartphones
25.3.1.1Content Structuring
25.3.1.2Number of Columns
25.3.1.3Amount of Text Entry
25.3.1.4Registration
25.3.2Designing Navigation for Smartphones
25.3.2.1Designing Touch Targets
25.3.2.2Designing Touch Gestures and Animations
25.4 Designing for Tablets
25.5 Useful Info
25.5.1Web Links
Part IV Web Development Process
26. Web Development Process
26.1 Introduction
26.2 Learning Outcomes
26.3 User-Centered Design Process
26.3.1Task Analysis Phase
26.3.1.1Field Studies
26.3.1.2Hierarchical Task Analysis
26.3.2Requirements-Gathering Phase
26.3.3Design Phase
26.3.3.1Card Sorting
26.3.3.2Prototypes
26.3.4Evaluation Phase
26.3.4.1Usability Testing
26.3.4.2Evaluating Websites for Accessibility
26.3.4.3Evaluating Your Website for SEO
26.3.4.4Data Collection for Evaluation
26.3.4.5Observational Techniques
26.3.4.6Delivering an Application on the Web
26.4 Useful Info
26.4.1Web Links
27. Managing Web Development
27.1 Introduction
 27.2 Learning Outcomes
27.3 Introduction to Web Development Management
27.3.1Web Project Management Tools
27.3.1.1Brainstorming
27.3.1.2Work Breakdown Structure
27.3.1.3Critical Path Method
27.3.1.4Gantt Chart
27.4 Web Project Management Phases
27.4.1Initiation Phase
27.4.1.1Project Definition Process
27.4.1.2Proposal Process
27.4.1.3Contract Process
27.4.2Preproduction Phase
27.4.2.1Project Team Selection
27.4.2.2Content Gathering and Clearance Process
27.4.2.3Website Design Process
27.4.2.4Media Objects Design Process
27.4.2.5Media Production Tools Selection
27.4.3Production Phase
27.4.4Postproduction Phase
27.4.4.1Final Evaluation
27.4.4.2Delivery and Final Sign-Off
27.4.4.3Closure
27.5 Useful Info
27.5.1Web Links
27.5.2Free Software
28. Introduction to Intellectual Property
28.1 Introduction
28.2 Learning Outcomes
28.3 Intellectual Property
28.3.1Copyright
28.3.1.1When Copyright Protection Begins
28.3.1.2Duration of Copyright
28.3.1.3Rights Protected by Copyright Laws
28.3.1.4Limitations on Rights
28.3.1.5Related Rights
28.3.2Industrial Property
28.3.2.1Patents
28.3.2.2Industrial Designs
28.3.2.3Trademarks
28.3.3Seeking Permission to Use People’s Works
28.3.4Dealing with an Infringement
28.4 Intellectual Property in Web Design
28.4.1Rights in Text
28.4.2Rights in Images and Photographs
28.4.3Rights in Music and Speech
 28.4.4Rights in Video and Animation
28.4.5Rights in Codes and Database
28.5 Industrial Property in Web Design
28.6 Useful Info
28.6.1Web Links
Bibliography
Index
Preface

About This Book

Much of what is in this book can be found on the Web in one form or another, but not together in one place
and not in as concise and structured manner that enhances learning as in this book. The book introduces
the basic Web technologies, design principles and processes, and management practices used in Web
design as well as how to use all of them in the designing and building of a working interactive website
that is easy to use and accessible to those with disability. There are ample examples on how all
commonly used HTML elements, attributes, and CSS properties are used and design guidelines about best
practices. There are also ample theoretical and practical exercises to ensure continued involvement and
interest of the reader in the topics introduced, and all that is required to do the exercises or implement the
examples are a Web browser and a text editor such as Notepad on Windows, TextEdit on Mac, or Gedit
on Linux. For further reading and newer materials, Web addresses for the relevant sources are also
provided to enable readers to check the sources for updated materials.
A companion website is available at www.routledge.com/cw/Macaulay which contains code
snippets, interactive exercises and further reading and resources.

Target Audience
This book is intended for:
Those with no prior knowledge of Web design who wish to learn how to design and build
websites of professional quality.
Someone who already knows how to design and build a website using Web tools, such as content
management systems, e-commerce platforms, or blogging software, that allow him or her to build
websites without the knowledge of coding, but wants more control over the design offered.

Structure of This Book

This book is divided into four parts: HTML (HyperText Markup Language), CSS (Cascading Style
Sheets), Web Design Principles and Practices, and Web Development Process.

Part I: HTML
This part presents chapters that introduce the functionalities supported by HTML. It shows how to use
them to add various elements to a page, including text, links, lists, tables, forms, images, audio, video, and
animation. It also shows how to use them to structure the content of a Web page, such as into headings,
sections, paragraphs, and quotations.

Part II: CSS

This part explains the role of CSS in the styling and layout of Web pages, and the chapters introduce the
functionalities that CSS supports such as the control of the font, size and style of text, color of elements,
arrangement of elements, and the use of images for background.

Part III: Web Design Principles and Practices

This part comprises chapters on the fundamental principles of visual design and their applications to Web
design. It discusses how these principles can enhance the aesthetics of a design, and also the role of
aesthetics in user-satisfaction as well as in how usable users judge a website to be and its credibility; all
of which play important roles in user experience and acceptance.

Part IV: Web Development Process

This part presents chapters that deal with the stages of Web design and development and how they are
managed to ensure the smooth running and timely completion of a project. An extra chapter is also
included that presents various useful practical information, including how scripts are used with CSS to
realize more advanced interactive designs, how various other common Web-programming languages are
used with HTML, and how to set up a Web server on a home computer to try them out.
Author

Michael Macaulay, PhD, is a freelance educator, developer, and user-experience designer and evaluator.
Formerly, he was a senior lecturer and course director for multimedia courses at London South Bank
University, United Kingdom. He earned his PhD in 2000 in the effects of human–computer interaction and
multimedia in learning from Loughborough University, United Kingdom. In the past, he had also been a
computer systems administrator, computer systems programmer and analyst, and desktop publisher.
1
The Internet and the Web

1.1 Introduction
It is useful to know a little about the technical aspects of the Internet and the Web in order to better
understand the various terminologies used in this book and also how what you produce will generally
work. If you find that something is too technical in this chapter, you can skip it and then come back to it
when you feel more comfortable with the subject or feel the need to know it.

1.2 Learning Outcomes

After studying this chapter, you should:
Be aware of the basic anatomy of the Internet and the Web and terminologies.
Know how the Web works.
Be aware of the technologies required to create different types of websites.

1.3 Fundamentals of the Internet and the Web

The Internet is the technological framework on which the Web, also known as World Wide Web
(WWW), runs. It is a global network of interconnected computer networks that comprises millions of
different types of networks, such as home, private, academic, business, public, and government networks,
linked through various types of connection technologies, such as fiber optic cable and wireless. The Web
is only one of the applications that the Internet supports. Other applications include e-mail, telephony, and
file sharing.
Central to how computers or devices on the Internet communicate with each other and send data around
are the relationship between them and the system they use to communicate with each other. There are
broadly two models of relationship: client-server model and peer-to-peer model. In the client-server
network model, one computer is the server and the others are clients. The clients request data from the
server and the server provides the data to clients. In contrast, a peer-to-peer network is one in which all
computers have equal responsibilities; that is, every computer in the network works as both a server and a
client. In essence, the snippets of a single file are distributed across the computers of multiple users, so
that when there is a request for the file, it is compiled from these sources. This is the model that file-
sharing services, such as Freenet, typically use.
In order for the computers on the Internet to communicate successfully, the Internet uses a suite of
protocols, the most important of which, as of time of writing, are Transfer Control Protocol (TCP) and
Internet Protocol (IP). IP is used for transmitting packets of data from one computer to another, using the
computers’ unique addresses, and TCP is used to verify the accuracy of the data being transmitted.
Internet protocol suite is often generally referred to as TCP/IP.
The unique address of a computer on the Internet, or indeed any network, is known as IP address, and
it is the unique number that makes it possible to identify a computer on the Internet. The original IP
address format, known as IPv4, is a four-part number written, for example, as 208.132.59.234. However,
the enormous growth of the Internet has led to the introduction of IPv6, which is a six-part number. To
make an IP address easy to remember, it is normally associated with a name, called domain name, for
example, bbc.co.uk. Like any protocol, Internet protocols impose rule and order on how things are done.
Basically, they specify rules and encoding specifications for sending data from one computer to another.
Without these protocols, it would be impossible for so many computers to communicate successfully at
the same time. It would be like having no queues at a crowded supermarket.
In contrast to the Internet, the Web is a system that enables files on various servers to be linked to each
other. This is made possible through a technology known as hypertext, invented by Ted Nelson. The term
refers to both the technology and the principle that enables the linking of a text element to another on a
computer. It makes it possible to construct a dynamic information network by using hyperlinks, so that
when a text is clicked, for example, with a mouse, it leads a user to another textual piece of information.
When different types of media objects, such as text, images, sound, and video, are linked together instead
of just text, the concept is referred to as hypermedia. Figure 1.1 shows an illustration of a basic
hypermedia system. It shows documents containing hyperlinks to other documents and media objects. The
documents and media objects could be on the same Web server or on different ones that are miles apart.
A hypermedia system can be made to behave in different ways. For example, clicking a hyperlink could
open a document or a media file to which it is linked; and the document and media could both be on one
computer or on separate computers located far apart. These computers are known as Web servers. They
are powerful computers that run special programs and are permanently connected to the Internet.
Although, in theory, people can have their website on their own Web server at home, it is usually not
practical for various reasons, such as cost. Therefore, only big companies usually have their own Web
servers. For everyone else, it is more practical to use Web hosting services. These are companies that
own and maintain big powerful Web servers and charge a fee to host people’s websites on them. For mere
surfing of the Web, no more than an Internet service provider (IPS) is required. An Internet service
provider essentially connects you to the Internet; however, some also provide Web hosting.

FIGURE 1.1 An illustration of a hypermedia concept.

The files on Web servers are usually accessed using a Web browser (technically known as Web
client). Popular Web browsers include Internet Explorer, Microsoft Edge, Firefox, Chrome, Safari, and
Opera. Technologies, such as Web browsers, that render files into Web pages in one form or another are
generally referred to as user agents. For each file or document (i.e., resource) on a Web server, there is
a unique address, known as Uniform Resource Locator (URL) or Web address, which describes its
location. You may also come across the terms URI and URN. The relationship between these terms is
clarified further shortly in the NOTE box. The format of a URL is as follows:
URL = protocol + IP address of server + location of file on server
The syntax is: protocol://host.domain [:port]/path/filename
Therefore, the URL for a file situated on a Web server on the Internet might be written as shown in
Figure 1.2.
In the example, the name of the file is “bolts.html.” It is located in the “bits” folder (or directory),
which itself is in the “products” folder on a server called “example.com,” which is a WWW server (i.e.,
a Web server). HyperText Transfer Protocol (HTTP) is the protocol used by the Web for data
communication, and 80 is the port that the browser typically uses to establish connection with a Web
server, and assumed, so it is normally omitted when an address is specified. In order to access a file on a
Web server, a user would typically enter the Web address in a Web browser, click a link to it on a Web
page that is already opened, or choose it from the bookmark, which is a list of previously stored visited
Web addresses.

FIGURE 1.2 The anatomy of a URL or Web address.

NOTE: URI versus URL versus URN

A Uniform Resource Identifier (URI) is a sequence of characters that identifies a resource,
typically over a computer network such as the World Wide World. When information is included
in a URI, such as a protocol (e.g., http://), that makes the location of a resource more specific, the
URI is also known as a Uniform Resource Locator (URL). Therefore, for example,
“example.com” is a URI, whereas “http://example.com” is a URL. A Uniform Resource Name
(URN) is another type of URI.It is the name that identifies a resource and is rarely used.

How the browser delivers a requested file depends on the type of file. If it is a Web page, it is
automatically displayed as a Web page, but if it is another type of file, such as a Word document, you may
be given various other options, such as the option to save or open it. For files that are not Web pages, the
browser may use other types of software, which are categorized as plug-ins and helper applications. A
plug-in is embedded within a Web page, while a helper application is separate from the browser and
operates independently of it, once the browser initiates it. Different types of files require different types
of plug-ins or helper applications.
Although the Web is still most commonly accessed via desktop and laptop computers as of time of
writing, it is increasingly accessed via a wide range of mobile devices, such as tablets and mobile
phones, the capabilities and screen sizes of which vary widely. In addition, the Web is accessed by a
wide range of people, including those with disabilities. The implication of this is that in order to reach as
many people as possible, a website needs to be created in a way that allows viewing on a variety of
devices and supports assistive technologies, which are the technologies that people with disabilities use
to access Web pages. A common example is the screen reader, used by blind and visually impaired
people to read out the contents of a Web page. Indeed, in many countries, some types of websites are
required by law to be accessible to those with disabilities.

1.4 How the Web Works

When a user that is connected to the Internet types a website address in the browser or clicks on a link to
the address, in order for the browser to know the location (i.e., IP address) of the Web server hosting the
site and so be able to connect to it and request the site, it connects to the nearest Domain Name System
(DNS) server to request the IP address. A DNS server (or name server) is a computer that manages a
huge database that stores and maps domain names (Web addresses) to IP addresses, and there are many
such servers located all over the world on every continent. They are basically like phonebooks. If the
DNS server does not have the requested IP address, it requests it from another DNS server, which
requests it from yet another one if it too does not have it, and so on, until options run out. If the IP address
is found, it is sent to the browser. The browser uses it to connect to the Web server that hosts the required
website and requests it. The Web server sends it and the browser displays it. Figure 1.3 shows an
illustration.

FIGURE 1.3 An illustration of what happens when a user requests a Web page.

1.5 Requirements for Creating Websites

Different types of websites require different levels of complexity in their creation, and level of
complexity determines the range of languages necessary. Some languages are easy to learn and use, while
others are relatively difficult. Most websites use HyperText Markup Language (HTML) and Cascading
Style Sheets (CSS), because they are responsible for the look and feel of a page. In the case of static
websites (i.e., websites in which content is not generated dynamically, such as personal websites), these
two technologies are usually all that is required.
For dynamic websites containing a lot of interaction, it is usually necessary to use an additional
technology known as JavaScript, which is a programming language that is typically run on the browser
side. For more complex dynamic websites that require the storing and retrieval of users’ data, such as e-
commerce and dating sites, the use of a database is necessary, and so is the use of programming, to help
the Web server carry out complex decision-making processes at the backend. Typically used programming
languages include PHP, ASP.Net, Java, and Ruby. Of course, these languages in the end are still used to
generate HTML and CSS, which the browser then uses to structure and style what it displayed on the
screen. Most Web development authoring tools, which are graphical user interface (GUI) tools, allow
you to use all these languages. An example is Dreamweaver.
For the types of websites that are updated regularly but do not necessarily involve a lot of interaction,
programming is typically not required. They are often built using tools such as Web content management
systems (WCMSs), e-commerce software, and blogging tools. These tools allow the creation of websites
through simply selecting design templates and options for various pre-defined functionalities. Again, what
they output and send to the browser are HTML and CSS.

1.6 Useful Info

1.6.1 Web Links
Internet and Web: en.wikipedia.org/wiki, internetsociety.org, webopedia.com, internetlivestats.com, and
howstuffworks.com

1.6.2 Free Software

Multiple download sites can be found for the following software by doing a search:
Web authoring tools: Google Web Designer (Cross Platform), Mobirise Website Builder (Win, Mac),
ToWeb (Cross Platform), KompoZer (Cross Platform), OpenElement (Win).
HTML editors: Coffee Free HTML Editor (Cross Platform), Komodo Edit (Cross Platform),
PageBreeze (Win), Bluefish (Cross Platform), Brackets (Cross Platform), BlueGriffon (Cross Platform),
PSPad (Win), SynWrite (Win).
CMS: WordPress (Cross Platform), Joomla (Cross Platform), Drupal (Cross Platform), SilverStripe
(Cross Platform), CushyCMS (Cross Platform), Frog CMS (Cross Platform), Concrete (Cross
Platform), Radiant CMS (Cross Platform), MODx (Cross Platform), TYPOlight CMS (Cross Platform),
ExpressionEngine (Cross Platform).
Part I
HTML
2
Introduction to HTML

2.1 Introduction
HyperText Markup Language (HTML) is the standard markup language for creating Web pages. Although,
the knowledge of HTML is, in theory, not necessary to create Web pages, because there are tools that
allow you to do this without having to write any code, knowing HTML enables you to customize or refine
outputs from these tools, where necessary. Naturally, to be a serious Web designer, the knowledge of
HTML could be considered a mandatory skill.

2.2 Learning Outcomes

After studying this chapter, you should:
Understand the concept of producing a Web page from an HTML document.
Be familiar with the basic structure of an HTML document.
Know how to create an HTML document with a text editor and render it in a Web browser.

2.3 About HTML

Imagine that you have a hand-written document that you want typed out and you do not know how to type
or have access to a typewriter, but you know a typist. You would probably annotate (or markup) the
document to show how you want it structured and styled, using an agreed convention between you and the
typist, and then give the hand-written document to the typist to type. This is the basic principle behind
how the Web page creation works, except that in the case of Web page creation, the document to be
structured and styled is not hand-written but produced with a computer, the convention used to mark up the
document is HTML, the Web browser is the typist, and the finished document is a Web page. Therefore,
given an HTML document that is properly marked up, the Web browser parses it and produces the
intended Web page. In the past, HTML was used for both the structuring and styling of a document, but this
practice is now obsolete. The need for more flexibility and efficiency in the way Web pages are create
and maintained has since led to limiting HTML’s role to just structuring a document, while CSS is used
for styling and scripting or programming languages are used for more complex functionalities.
HTML is a collection of elements that are used to define various parts of a document, such as header,
footer, heading, and body of text. Essentially, when a document is parsed, the browser creates a hierarchal
representation of the elements in it, known as a document object model (DOM), and it is this model that
enables the document to be properly rendered into a Web page. The model also enables the use of
scripting languages, such as JavaScript, to manipulate the elements of a page to create dynamism. How
JavaScript is used with HTML is discussed in Chapter 22.
An HTML element comprises a start tag and a ​closing tag, except an empty element, which
comprises only a start tag and therefore encloses no content. A start tag comprises a left angle bracket
(<), the name of the element, and a right angle bracket (>); a closing tag comprises a left angle bracket
(<), a forward slash (/), the name of the element, and a right angle bracket (>). This is illustrated in Figure
2.1.
An element can also take attributes, which provide extra information about how to treat the contents of
the element. An attribute comprises two parts: an attribute name and a value, which are separated by
“=“. The value is enclosed in quotation marks. Attributes are placed in the start tag. Figure 2.2 shows
an illustration.

FIGURE 2.1 The structure of an HTML element.

FIGURE 2.2 How attributes are used with an element.

Some attributes can only be used with some elements, while some are global attributes, which means
that they can be used with any element. Commonly used global attributes include title, id, and class. These
attributes are used in various examples given in this book. The title attribute is used to provide extra
information about an element. If the element is displayed, then the value of the attribute is usually
displayed when the cursor is over the element. The id attribute is used to give an identity that is unique in
a document to an element, and class is used to identify a group of elements as being different from others,
using a name. The same class name may be assigned to multiple elements, and vice versa. Where an
element belongs to multiple classes, the class names are space-separated. For instance, in Figure 2.2,
if the element that belongs to the “art” class also belongs to “modern” class, then the value of class
attribute will be “art modern.”
In addition to attributes that transform the contents of elements, there are others that represent the events
generated by various HTML elements, such as global events attributes (generated by any element), ​
window events attributes (generated by window objects), form events attributes (generated by form
elements), keyboard events attributes (generated by keyboard activities), mouse events attributes
(generated by mouse activities), and media events attributes (generated by media playback activities).
All of these attributes are used in conjunction with a scripting language, typically JavaScript, to produce
dynamic interaction with the user. Although HTML5 is not case-sensitive, it is good practice to always
use uppercase and lowercase consistently for better understanding of a code.
 NOTE: Representation of HTML elements
When the functions of elements are formally ​introduced and defined, the formats <element
name>...</element name> (e.g., <p>...</p>) or <element name> (e.g., <base>) are used. The
former means that the element can contain content between the tags, while the latter means that it
is an empty element and cannot have content and can only take attributes.

2.3.1 The Structure of an HTML Document

An HTML document comprises two main parts: header section and body section, and they are defined
by the <head> and <body> elements, respectively. The whole HTML document is defined by the <html>
element. In addition, an HTML document typically starts with a document type declaration, which
specifies that the document is an HTML document. In HTML5, it is !DOCTYPE html. Figure 2.3 shows
the basic structure template of an HTML document.
An element that is inside another one is known as a child element of that element and the outer element
is known as the parent or containing element. This means that the <head> and <body> elements are both
child elements of the <html> element. In Figure 2.3, notice the difference between the correct and
incorrect nesting conventions. Correct nesting is necessary for a code to work properly, meaning that if an
element starts inside another element, it must also end inside that element. Also, notice the vertical
alignment of the start and end tags of each element and the indentation of child elements. Although doing
these things are not necessary to make a code work correctly, they are good practice, as they make it
easier to read and understand what a code does. Indentation of lines is possible because the Web browser
renders only one space by default. This means that irrespective of the number of consecutive spaces put
between words, this will be rendered as one space. This is known as white space collapsing. Table 2.1
describes the functions of the elements used in the illustration.

FIGURE 2.3 The basic elements used to structure an HTML document.

TABLE 2.1
The Primary Elements for Structuring an HTML Document
Element Function
<!DOCTYPE html> Specifies that a document is an HTML document.
<html>...</html> Specifies the start and end of an HTML document.
<head>...</head> Specifies the start and end of the document header section.
<body>...</body> Specifies the start and end of the body of the document.
2.3.1.1 The of the Head Section
The HTML elements placed in the head section (i.e., in the <head> element) are meta-related elements, in
that they provide metadata (i.e., data that provide information about other data). More specifically, they
provide information about a document, including information about other documents that they need (if
relevant). The information is only for the browser and is not displayed in the browser window. These
elements typically include <title>, <meta>, <base>, <link>, <style>, and <script>. The <style> element is
used to embed CSS rules and discussed under CSS accordingly. The <script> element is used to embed or
link to an executable script, such as JavaScript, and is introduced in Chapter 22 where it is more relevant,
such as under Flash video in Chapters 7 and 22. The rest of the elements are discussed here.

2.3.1.1.1 <title>...</title>
The <title> element allows you to define the title of a Web page, which is displayed in the bar at the top
area of the browser. Figure 2.4 shows how to use it, and Figure 2.5 depicts the result. Title description is
one of the pieces of information used by search engines to index Web pages; therefore, making it reflect
closely the content of a page improves the chances of search engines ranking the page highly (i.e., placing
it as near to the top as possible of their search results). This ensures that the page can be found by those
looking for the type of information it provides. Ideally, it should be the same as the main heading for a
page. The practice of doing things to ensure high search engine ranking for a page is known as search
engine optimization (SEO), and more about it is discussed later under other page features used for
realizing it, such as page description, image description, headings, and link text. It is also discussed in
Chapter 21 in relation to how it is affected by how mobile-friendly a layout is and in Chapter 26 in
relation to its evaluation.

FIGURE 2.4 How elements are used in the <head> element and the result.

FIGURE 2.5 result of figure 2.4.

CHALLENGE 2.1
 Visit a few websites, navigate through the pages, and see how closely their titles match the
headings and what the page is about.

2.3.1.1.2 <base>
The <base> element allows you to define the base URL (Uniform Resource Locator) for relative paths
specified in a document. URL, as explained in Chapter 1, is the description of the location of a resource
(e.g., document or media) on the Internet. Once a base URL is defined, any relative URL specified in the
body section of a document is appended to its end to describe the full URL. This saves having to specify
absolute paths (i.e., full paths) for all links. Only one base element may be used in a document, and it
must have either an href attribute, a target attribute, or both. In the example in Figure 2.6, the href attribute
defines the base URL, which means that the value of the src attribute in the <img> element (i.e., settee.jpg,
which is an image filename) is appended to its end to derive the full path,
“http://www.example.com/images/settee.jpg,” which is the location of settee.jpg. The <img> element is
used to display images and is discussed fully in Chapter 6. The value of the target attribute (i.e., _blank)
specifies that the image file should be displayed in a new browser window or tab.
Other possible values for the target attribute and their functions are listed in Table 2.2. These values
are sometimes called browsing context names or keywords. This is because they describe the
environment in which a document object is presented.

FIGURE 2.6 Example use of the <base> element and the href and target attributes.

TABLE 2.2
The Values for the target Attribute
Attribute’s Value Function
_blank Opens a linked document in a new window or tab.
_self Opens a linked document in the current window. This is default.
_parent Opens a linked document in the parent frame.
_top Opens a linked document in the top-level frame (i.e., whole window).

CHALLENGE 2.2
If in the example in Figure 2.6, the value of the href attribute is “http://www.example.com/” and the
“settee.jpg” file is still in the same location, how would you write the value of the src attribute?

2.3.1.1.3 <link>
The <link> element allows a document to be linked to resources external to it. Table 2.3 lists the
attributes that it supports, and Figure 2.7 shows how the element is used with the commonly used ones.
TABLE 2.3
Common Attributes Used with the <link> Element
FIGURE 2.7 example use of the <link> element and the rel and type attributes.

In the example, the linked resource is a document and “style.css” specifies its location and name. In this
case, the location is specified implicitly as a relative address (i.e., relative to the location of the current
document). It essentially says that the “style.css” file is in the same folder as the document that is linking
to it. The other type of address is an absolute address, in which full path is specified. The difference
between the two is explained in Figure 2.8.
FIGURE 2.8 Explanation of absolute and relative addressing

Back to the example in Figure 2.7, the relationship of “style.css” to the current document is specified as
“stylesheet,” and “text/css” says that its content is CSS code. More than one <link> element can be used
in a document, for example, for specifying multiple stylesheets. See “Methods of specifying CSS rules” in
Chapter 8.

CHALLENGE 2.3.
If an HTML file named “index.html” is located in a folder called “home” and a CSS file called
“main_styles.css” is located in a subfolder of the subfolder of the folder, write a <link> element
code to place in the head section of the HTML file that points to the CSS file.

2.3.1.1.4 <meta>
The <meta> element allows you to describe various kinds of information about a document that cannot be
described using other meta-related elements, such as <title>, <link>, and <base>. The kinds of
information it can be used to describe range from those used by search engines in ranking their search
results to those about the creator of a document and the technologies, such as software, used to create the
document. The element uses four attributes: name, http-equiv, content, and charset, which are combined in
different ways to describe different kinds of metadata. Table 2.4 lists the functions of these attributes and
the commonly used values.
While the charset attribute can be set alone, when either name or http-equiv is used, the content
attribute must also be used in a name-value pair fashion. Essentially, the property to be defined is
specified by the value of the name or http-equip attribute, and the value to give to the property is specified
by the value of the content attribute. When the http-equiv attribute is used, a <meta> element is known as a
pragma directive, which is an instruction to the compiler; a compiler is a computer language that
interprets one computer language into another. Figure 2.9 shows examples of the various ways you can
use the <meta> element and its attributes.
In the example, charset says that the character encoding used for the page is UTF-8. Character
encoding is the allocation of a unique code to a character, using a character set. The technique predates
computers, or the Internet and the Web, and goes back, for example, to the use of Morse code for
telegraphing messages. The first internationally accepted character-​encoding system to be used in
computers was the American Standard Code for Information Interchange (ASCII) encoding standard,
which is adequate for encoding all the characters in English text. Because it was unsuitable for non-​-
English languages in its original form, various variants were later developed for different languages,
leading to compatibility problems. To streamline everything, Unicode, a multilingual character set, was
developed, and UTF-8 is one of the Unicode Transformation Format (UTF) standards for encoding the
characters. It is also currently the most commonly used standard for the Web. Alternatives include UTF-
16 and UTF-32. Knowing the character encoding used for a Web page enables the browser to correctly
display the textual content of the page. Figures 2.10 and 2.11 demonstrate this. The default character
encoding for HTML5 is UTF-8.
TABLE 2.4
Defined Attributes for the <meta> Element
Attribute Function Commonly Used Values
name Defines a property name. author (specifies creator of Web page), description (provides a 155-character maximum
description of a page that is useful for SEO), robots (specifies whether or not search engine
should index page), language (provides the natural language used), and keywords (defines
keywords for a page).
http-equiv Defines an HTTP header property that For example content-type (specifies MIME type), default-style (specifies the default
is used as an alternative to the stylesheet to use), refresh (specifies document refresh interval), pragma and cache-control
response header sent with an HTML (specify whether or not a page should be cached, and expires (specifies when a cached
document by the Web server. page should expire and a new version downloaded).
content Specifies the value associated with the Depends on the value of http-equiv or name attribute. See Figure 2.5.
http-​equiv or name attribute.
charset Specifies character encoding. Character set (e.g., UTF-8).

FIGURE 2.9 How the attributes of the <meta> element are used.

FIGURE 2.10 A Japanese page without correct encoding system.

FIGURE 2.11 The same page as Figure 2.10 but with correct encoding system

NOTE: Text in the <head> element

Although text placed in the head section, but not in meta-related elements, is displayed as if it has
been placed in the <body> element, content should not be placed there.

Back to the example in Figure 2.9, the value, keywords, gives the words that people might use to find
the page; description says what the page is about and is used by search engines; author provides the name
of the page creator; the first robots says search engines should not add page to their search results and the
second robots says that it is all right to index page, but the pages to which the page is linked should not be
indexed; expires says that page should be removed from the browser’s cache at the specified date, which
must be in the format shown, although “0” could be used to specify now, meaning that the page will not be
cached at all and a new version is downloaded every time; pragma and cache-control say not to cache
page; and the first refresh says to reload the page after 15 seconds and the second refresh says to redirect
user to “http://www.newsite.com” after 3 seconds.

CHALLENGE 2.4
In what type of Web application do you think it would be necessary to refresh the page as frequently
as a few seconds and why?

2.3.1.2 The of the Body Section

The contents of a Web page are placed in the body ​section (i.e., inside the <body> element), and in order
for them to be displayed in a structured manner (i.e., with headings and sections), they must be marked up
with appropriate HTML elements. Therefore, for example, if a body of text is inserted in the <body>
element but without markup, it will simply be displayed without structure. This means that in addition to
HTML ​document’s structure, there is Web page structure (i.e., how the contents placed in the <body>
element are displayed in the browser window).
Although different HTML elements can be used to mark up content to achieve the desired page
structure, the recommended practice is to use structural markup, which basically means to use HTML
elements that describe only the purpose of their contents and leave the appearance to be decided by the
browser. For example, instead of using an element to make text bold in order to give it emphasis, an
element that says to give it emphasis should be used. It is then left to the relevant user agent to render the
text and give it emphasis in whatever way possible. For example, a Web browser might very well display
the text in bold or in a different contrasting color, and a non-visual user agent, such as a screen reader,
might express the emphasis in a way that is aurally appropriate. This means that the elements used for
page structuring should be able to convey both visual and semantic meaning. Semantic meaning enables
user agents to recognize an element as what it is intended to represent and renders its content in the most
useful way to the user. This is especially useful because it makes contents more accessible to users with
disability who use assistive technologies.
In theory, the structure of a typical Web page comprises the header, navigation menu, main content, one
or more sidebars, and the footer. Whereas it was not possible in older versions of HTML to define these
design components in a way that also conveyed semantic meaning, because there were no dedicated
layout HTML elements to define them, HTML5 provides these elements and more. Figure 2.12 shows the
difference between how layout used to be defined in older versions of HTML (typically HTML 4.01) and
how HTML5 layout elements are used to do the same thing. In the HTML 4.01 example, each <div>
element used to create a container and the id attribute used to give it a unique identity. The <div> element
will be discussed further shortly with other generic HTML container elements.
Table 2.5 shows the applications of layout elements, and Figures 2.13 and 2.14 show them in use and
the rendered result.

FIGURE 2.12 Comparison between how page layout components might be defined.

TABLE 2.5
HTML5 Layout Elements and Their Functions
FIGURE 2.13 Example of how the html5 layout elements is used.

FIGURE 2.14 Result of Figure 2.13.

In Figure 2.14, notice how the rendered elements are not laid out. The only bit of structuring included is
with the <figure> element, which, by default, is displayed with default margins (space) around it. What
this shows is that in order to create a page layout, such as the one illustrated earlier in Figure 2.12, the
layout elements need to be positioned and styled accordingly. They need to be given, for example,
dimensions, border, and background color, all of which is done using CSS. Indeed, even though the
browser might recognize the HTML layout elements for what they are, without the text descriptions in the
example, it would have been impossible to know that they are there, since they are essentially containers.
 CHALLENGE 2.5
Sketch the structure for the home page of your personal website on paper and then write the HTML
code to describe the structure, using HTML5 layout elements and indenting the code as appropriate
to make it easy to read.

2.3.1.2.1 Block-Level and Inline Elements

Once the general layout of a page is established with the layout elements, the contents of each element
(e.g., text, lists, links, tables, and images) need to be structured in order for the desired visual page design
to be achieved, and this is done using various other elements, which can be either block-level or inline
elements. Block-level elements (or block elements) are elements that always start on a new line, and
inline elements are those that always start on the same line. Figure 2.15 shows an illustration. Whether an
element is a block-level element or an inline element will be noted when it is introduced later.
Figure 2.16 shows a block-level element and an inline element in use, and Figure 2.17 depicts the
result. Notice in the rendered page that the content of the block-level element starts on a new line, while
that of the inline element follows the existing text (i.e., the second “This content is not marked up”) on the
same line. The element used to create the heading (i.e., <h3>) is explained shortly.

FIGURE 2.15 representation of block-level and inline-level elements.

FIGURE 2.16 An example usage of block-level and inline elements.

FIGURE 2.17 The rendered result of Figure 2.16.

CHALLENGE 2.6
Write an HTML code that does what the following statements describe:
This text is in a div element.
 This text is in a span element inside a div element.
This text has no markup, but this part is in a span element.

2.3.1.2.2 Grouping Elements and Content

Elements are also typically grouped within the layout elements. This is done to enable the same operation
to be applied to contents or elements in unison and can be at block or inline level. For example, a number
of paragraphs (block-level elements) or some words on a line (inline elements) may be grouped to
enable, for example, the same color to be applied to them. Block-level grouping is typically done with
the <div> element, while inline grouping is done with the <span> element. Figure 2.18 shows example of
usage, and Figure 2.19 shows how the code is rendered. The <style> element is used to include CSS in an
HTML document, which is discussed fully later, under CSS in this book. The element is used here to only
show the effects of grouping. The <p> element is also discussed shortly. In the first <div> element, notice
how the two lines in it are given the color specified for the element (i.e., blue), and how the <span>
element is used to give only some of the words on a line a specific treatment. The second <div> element
illustrates a block-level element being used to group together inline elements, in which all the content of
the <div> element is given blue color, after which the content of <span> element is made red.

FIGURE 2.18 Grouping block-level and inline HTML elements.

FIGURE 2.19 The result of Figure 2.18.

CHALLENGE 2.7
Write an HTML code to create a content that is rendered the same way as below, using the elements
and attributes used in Figure 2.18:
Roses are red,
Violets are blue.
 But these are not the only things that are red or blue.

NOTE: About the remaining HTML elements

The rest of the HTML elements used to mark up content do not fall neatly into clear categories as
the layout elements just discussed, since the same elements can be used with different types of
contents and in different contexts. However, the functions of most elements can be explained by
how they are used with text. Therefore, elements used with different types of contents and in
different contexts are presented under text and the more context-specific elements are discussed
under the relevant media object types (e.g., image and video) and context.

NOTE: Brief history of HTML

HTML, whose development has been handled since 1996 by World Wide Web Consortium
(W3C), has evolved over many years and spans several versions, including HTML, HTML 2.0,
HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01, and, the latest as of time of writing, HTML5. At
the point HTML reached version 4.01, it was rewritten in XML to extend it to produce XHTML
1.0. XHTML 2.0, which was not backward compatible with HTML 4.01 or XHTML 1.0, was
supposed to supersede both but was dropped because of considerable opposition to its goals. At
the same time, another group, called Web Hypertext Application Technology Working Group
(WHATWG), which considered XHTML 2.0 unsuitable for creating essential dynamic Web
applications, such as forums and e-commerce site, was working on a project that was later
adopted by W3C under the name of HTML5. HTML5 is more compatible with HTML 4.01 and
XHML 1.0 than XHTML 2.0 and adds new functions. The commonly used of these new functions
are discussed in this part of the book.

2.3.2 Creating a Web Page

At this point, it is useful to show how to create an HTML document and render it into a Web page, so that
you can use the knowledge in trying out the examples presented in this book. How to create a Web page
varies according to the type of tool used. Tools are generally categorized under text editors, HTML
editors, WYSIWYG (What You See Is What You Get) HTML editors, and Web content management
systems. When using text editors or plain HTML editors, HTML code needs to be typed or pasted into the
editor. HTML editors typically color code elements, attributes, and values differently in order to
distinguish between them and make the reading of a document easier. In a WYSIWYG HTML editor, you
can type in code, in which case, the editor immediately renders the code to show the design, or you can
enter content directly, as in a word processor, in which case, the editor automatically creates the
corresponding code.
Web content management systems (WCMSs) are like more elaborate versions of WYSIWYG HTML
editor. They typically do not require you to enter HTML code to create a Web page; this is done behind
the scene by the system. The author usually needs to select one of the available page design templates,
complete various forms, import contents onto pages, and specify parameters. Editors that behave in a
similar way as a word processor are also usually provided to enter and style text, add links, and insert
images. The codes produced by the systems can, of course, also be edited. WCMSs are suitable for wide
range of Web applications, including blogs, forums, web stores, photo galleries, and wiki, and commonly
used ones include WordPress, Drupal, and Joomla. The tools are available for all major platforms, such
as Windows, MAC OS, and Linux, and there are free ones. Here, only how to create a page by using a text
editor is discussed.

2.3.2.1 Creating a Web Page with a Text Editor

Whatever the computer platform (PC, Mac, or Linux), the steps followed to create a Web page with a text
editor are generally the same:
1. You open the editor and type the HTML code in it. Different computer platforms have their own
native text editor. For example, Windows has Notepad and MAC has TextEdit. There are also
various free text editors on the Web. How a text editor is opened depends on the relevant
operating system, but it usually can be opened in the same way as any other application.
2. Once HTML code is typed or pasted into the editor, you save it with .html extension in the
desire folder. Therefore, assuming that the name of the file is “index,” the name typed in the
dialog for saving would be “index.html.” In windows, it may also be necessary to select All
Files from the Save as type drop-down menu in the dialog to prevent .txt from being appended
to the end of the specified file name. It is useful to note that HTML editors are used in the same
way.
3. Once the HTML file is saved, it can be opened as a Web page in a Web browser in various
ways. One is by right-clicking it and choosing the preferred browser from the context menu;
another is by going to the File menu of the browser, selecting Open, navigating to the file in the
Open window, selecting it, and clicking the Open button.

NOTE: Looking at the code for other Web pages

One of the best ways to learn HTML is to study other authors’ code, and the most accessible way
of doing this is by studying the codes for the page on the Web. This is possible because every
browser allows you to view the source code for the currently opened page. This can usually be
achieved via the menu, but the exact procedure varies between browsers. For example, in Internet
Explorer, it is View>Source, and in Firefox, it is Tools>Web Developer>Page Source.
However, page source can also be accessed in most browsers by right clicking a page and
choosing the option to view it from the menu that appears.

CHALLENGE 2.8
Search the Web for a Web page that is not too complex, and open the source code for the page, as
described in the NOTE box above, and then, copy the code (e.g., via pressing Ctrl + A to select all
the code and Ctrl + C to copy). Then, paste and save the file with a .html extension. Next, open the
file in a browser. You will see that what is displayed does not look like the original page. This is
because the resources used by the page, such as CSS and images files, are not available on your
computer.
2.4 Useful Info
2.4.1 Web Links
HTML specifications: w3.org/TR/html51, w3.org/standards
Web development documents: webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
HTML5 support testing: html5test.com
HTML tutorials (Here are just a few free tutorial sites on HTML and other Web languages ):
w3.org/wiki, html5rocks.com, sitepoint.com, w3schools.com, ​codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Web ​tutorialspoint.com, whatwg.org, htmlgoodies.com,
htmldog.com, ​htmlcodetutorial.com, echoecho.com, learn.shayhowe.com, html.net, tizag.com, html-5-
tutorial.com
3
Text

3.1 Introduction
Text is the most commonly used element to communicate on the Web, and one of the factors central to its
ability to communicate effectively is how well it is structured. This chapter presents the HTML elements
that can be used to accomplish this.

3.2 Learning Outcomes

After studying this chapter, you will know about HTML elements used to do the following:
Describe the structure of the content of a Web page (e.g., with headings and paragraphs).
Create superscript and subscript text, such as the text used in mathematical formula.
Provide semantic information about content.
Give some content more importance, emphasis, or relevance than others.
Create definitions, quotations, citations, abbreviations, and small prints.
Show edited content, so that people can see the information that has been changed.
Display computer code and preformatted text and provide details about the author and ​publication
of a Web page.
Hide information until user requires it, and create dialog boxes and drop-down menus.
Include special character, such as HTML characters, and extra white space in content.
Provide language information and text directionality for content and create ruby text.

3.3 Headings
HTML provides six levels of headings, which are represented by <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6> elements. The contents of the elements are displayed in different sizes and in bold. The content of
<h1> is displayed in the largest size and that of <h6> in the smallest size. <h1> is used for main headings,
<h2> for subheadings, <h3> for sub-subheadings, and so on. Although the displayed sizes may vary
between browsers, the relationship between them is still maintained. The default text size set by users can
also affect the displayed sizes of these elements. Figure 3.1 shows how the headings’ elements are used,
and Figure 3.2 depicts the rendered result.
FIGURE 3.1 Example usage of the headings elements.

FIGURE 3.2 The result of Figure 3.1 in a browser.

3.3.1 Headings in Design

The use of different levels of headings creates a visual hierarchy of importance, which aids in the
scanning and navigation of content. It essentially gives structure to a page, thereby helping users determine
how to navigate it. Using headings effectively involves breaking up content and organizing it logically and
predictably at the appropriate levels, so that one level leads as seamlessly as possible to the next. This
means that the hierarchy should be meaningful. Ideally, a page should start with level 1, which might be
the main heading, and no level should be skipped. Figure 3.3 shows an example structure.
The styling of headings should not be achieved through any means other than through marking them up
with the heading elements, as the elements hold specific meanings that user agents (e.g., browsers and
screen readers) recognize and use to treat their contents accordingly. This ensures that people who do not
use the mouse, such as blind users, who can only use the keyboard and the screen reader, can navigate
easily from one heading to the next.
Like page title, headings are one of the pieces of information used by search engines to index Web
pages, and so, they should closely reflect content. They should also be short and meaningful in order to
help improve text scanability. Figure 3.4 illustrates the visual hierarchy that can be created by breaking up
text into sections and by using section headings. Notice how even without visible text, the breaks and the
contrast in the right image seem to create a vision of structure and order.
FIGURE 3.3 Example of headings’ structure.

FIGURE 3.4 Illustration of the effects of heading levels.

CHALLENGE 3.1
Write the HTML code to implement the example hierarchical structure shown in Figure 3.3.

NOTE: Headings and accessibility

Headings play a very important role in the easy navigation of content by screen reader users, in
that they allow users to easily skip from heading to heading and go to the desired part of a page,
without having to go through the entire document. Most screen readers are capable of reading out
a list of headings and allow users to go from heading to heading. This means that using headings
properly when designing a page can make the page more accessible.

3.4 Paragraphs
Paragraphs are defined with the <p> element, which you have already seen in some examples in Chapter
2. To create a paragraph of text, the text is enclosed between the tags of the element. Since it is a block-
level element, its content is always placed on a new line by default. Some space is also placed between
it and the element directly above and below. Figures 3.5 and 3.6 illustrate how it is used and show its
effect.

FIGURE 3.5 Example usage of the paragraph element.

FIGURE 3.6 The result of figure 3.5 in a browser.

3.4.1 Paragraphs in Design

Paragraphs are used for dividing a body of running text into smaller, logical, and more easily digestible
blocks of text, with the number of ideas per paragraph typically limited to one. How they are styled varies
widely, depending on the look and feel that is being communicated. Typical layout features used to
achieve various paragraph styles include indent (which is the nudge to the right of the first line of the
paragraph that is not the first paragraph), outdent/hanging indent (which is the nudge to the right of every
line in a paragraph, except the first one), initial (which is the first letter of the first word in a paragraph
when it is larger than the rest of the text), and a space (which is the space between paragraphs). Figure
3.7 illustrates these features, which are achieved using CSS. How to do this is shown in Chapter 14.
As shown in the illustration, first-line indents or outdents and spaces are used to delimit (separate)
paragraphs, while initial is used just for decoration. Although first-line indent is most commonly used in
printing, space is the most common in Web design. Unlike in printing, there are no rigid rules in Web
design for styling paragraphs, and any of those illustrated in the figure, and more, are used. However, the
typical default style used by browsers is to present content in paragraphs that are separated by space and
are left-aligned.

FIGURE 3.7 Common features of paragraph styles.

CHALLENGE 3.2
As you may know, the <p> element, like the <div> element, is a block element, which means that
they both start on a new line. However, you should not use one in place of the other, because they
 have different semantic meanings to user agents. To compare the visual differences between the two,
enter the following HTML code in a text editor and render it.
This text is followed by a paragraph element.
<p>This content is in a block element.</p>
This text is followed by a div element.
<div>This content too is in a block element.</div>

3.5 Line Breaks, Thematic Breaks, and Comments

The elements used for line breaks and theme breaks are <br> and <hr>, respectively, and the element used
for adding comments is <!–...–>. The <br> element allows you to insert a line break (i.e., carriage return)
and is especially useful for producing line break in text (such as addresses and poems), where block-
level elements like <p> and <div> are not suitable, because they insert additional space between lines.
The <hr> element was formerly used to simply draw a horizontal line to separate contents to, for example,
visually convey to users a change of topic (such as in an article) or a change of scene (such as in a
narration). However, now, it also carries corresponding semantic meaning in HTML5, which is referred
to as a paragraph-level thematic break. This means that user agents are also able to recognize the
meaning and render it as appropriate.

FIGURE 3.8 Line break, horizontal rule, and comment elements in use.

FIGURE 3.9 The result of figure 3.8 in a browser.

In contrast, the <!–...–> element does not affect or display anything and is only used to annotate HTML
code to make it easy to understand what different parts do. Adding comments to describe what various
parts of a code do is good practice for the benefits of both authors and others who might have to work
with the code at a later date, for example, for the purpose of maintenance. Figures 3.8 and 3.9 illustrate
how these three elements are used and show their effects.

3.5.1 Specifying Word-Break Opportunities

In addition to specifying where a line must break, using the <br> element, it is possible to specify where
the browser may break a line, even when its line-breaking rules do not support it. This is specified by
using the <wbr> element. This is especially useful for preventing a long word or expression, such as
URL, from being wrapped to the next line even when most of it fits into the current line, leaving a big gap
as a result. Figure 3.10 shows example of its usage, and Figure 3.11 depicts the result. Notice that in the
first paragraph, the joined sentence is wrapped to the next line in its entirety, while in the second
paragraph, it is wrapped based on the points specified with the <wbr> element.

FIGURE 3.10 Example usage of the <wbr> element.

FIGURE 3.11 The result of Figure 3.10.

NOTE: Other ways of breaking words

Where to break a line can also be specified by using CSS. Ways of doing this are shown in in
Section 10.3.2, under “Handling content overflow.”

CHALLENGE 3.3
Where would you insert line and theme breaks in the following and why?
“Orange is a fruit of the citrus species. It is a hybrid between pomelo and mandarin. It is very old.
For example, sweet oranges were mentioned in Chinese literature in 314 BC. Banana is an edible
fruit that is botanically classified as a berry and is produced by several kinds of large herbaceous
flowering plants. Plantains are a type of banana. The universe, according to Wikipedia, is all of time
and space and its contents. It includes planets, stars, galaxies, the content of intergalactic space, the
 smallest sub-atomic particles, and all matter and energy.”

3.6 Superscript and Subscript

Superscript and subscript present information in certain ways that make it more easily understandable and
are useful for communicating some specific types of information. A superscript is text that is higher and
often smaller than the main text. It is used for suffixes of dates (such as in 21st June) and in mathematics
for representing the power to which a number is raised (such as in 210). A subscript, in contrast, is text
that is lower and also often smaller than the main text. It is used in a number of different representations,
such as chemical formulas (such as in CO2), mathematical expressions (such as in log10), and footnotes.
The HTML elements used to create them are <sup> and <sub>, respectively. Figure 3.12 shows how they
are used, and Figure 3.13 depicts the result.

FIGURE 3.12 Example usage of the <sup> and <sub> elements.

FIGURE 3.13 The rendered result of Figure 3.12.

CHALLENGE 3.4
Write the HTML code to display the content below, at least the chemical equation:
The universe is about 91 billion (28 × 10 9 ) light-years wide and still expanding. Inside it, many
chemical reactions are going on all the time, some of which we understand and can represent with
equations. For example, the following chemical equation shows what happens when methane (CH
4 ) burns in oxygen (O 2 ): CH 4 + 2O 2 = CO 2 + 2H 2 O

3.7 Importance, Emphasis, and Relevance

In a body of text, it is often necessary to make certain words or phrases look different from others for
various reasons, because, for example, they are more important and you want to draw attention to them,
just different, or related. The elements used to achieve goals like these are <strong>, <em>, and <mark>,
respectively. The <strong> element gives text strong importance. Browsers typically render its content
in bold. The <em> element gives text stress emphasis, and its content is typically displayed in italic
type. It can be nested. When nested, each level of nesting indicates a greater level of emphasis, each of
which is conveyed differently by a user agent. The <mark> element is used to highlight text to indicate
its relevance to a context. This can be, for example, in the form of highlighting the instances of a search
term in search results. Figure 3.14 shows how these elements are used, and Figure 3.15 depicts the
rendered result.
Like with all HTML elements that have specific meanings, the <strong> or <em> elements should not
be used for any purposes other than specifying importance and emphasis, respectively, as user agents will
interpret this wrongly. For example, they should not be used to simply make text bold or italic. Also, the
<b> element (which makes text boldfaced) and <i> element (which makes text italic) should not be used
for giving importance or emphasis, as they have no semantic meaning and therefore are not recognized as
conveying these meanings by user agents. However, you can use the elements where some part of text only
needs to be presented in a different way from the rest and without any additional meaning, such as to
attract attention. For example, the <b> element can be used for summary, keywords, and product names in
a body of text (e.g., review) and the <i> element can be used for differentiating text such as foreign
words, technical terms, and names of edifices (such as ships and buildings) from the rest. Figure 3.16
shows example usage, and Figure 3.17 depicts the rendered result.

FIGURE 3.14 Example usage of the strong, emphasis, and highlight elements.

FIGURE 3.15 The result of Figure 3.14 in a browser.

FIGURE 3.16 Example usage of the bold and italic elements.

FIGURE 3.17 The result of Figure 3.16.

 Just like the <b> or <i> elements should not be used to communicate importance, emphasis, or
relevance, underlining should not be used, as this can be problematic in a number of ways. For example,
underlined words can be confusing and frustrating to users, because they can be mistaken for links. The
<u> element, which was used for underlining in earlier HTML, is not supported by HTML5. However,
CSS provides means of underlining text, but this is only for the purpose of decoration. This is
appropriately discussed in Chapter 14.

CHALLENGE 3.5
For which of the following would you use <strong>, <em>, <b>, or <i> in a body of text?
The new name for a process.
The name of a body organ.
A word that forcefully instructs.
The name of a ship.
The English name for a rare plant.
The word “Warning!”
A phrase to which you want people to pay attention.

3.8 Quotations and Citations

Quotations and citations are typically displayed in a way that differentiates them from the rest of the text.
HTML provides elements that automatically do this. The two commonly used elements for quotations are
<blockquote> and <q>, and the one used for citations is <cite>. Table 3.1 gives the functions of these
elements, and Figures 3.18 and 3.19 illustrate how they are used and show the effects.
TABLE 3.1
Elements for Quotations and Citations
Element Function
<blockquote>... Used for block quotes (i.e., those that take up many lines), and its content is usually indented by the browser; however, the
</blockquote> element should not be used for indenting. The URL for the source of the quote can be included by using the cite attribute.
<q>...</q> Used for inline shorter quotes. Its content is usually enclosed in quotation marks.
<cite>...</cite> Used to represent the reference to a creative work and must include the title of a work (e.g., book, paper, film, and song) or
the name of the creator. Its content is usually rendered in italic type.

FIGURE 3.18 The block quotation and quote elements in use.

FIGURE 3.19 The result of Figure 3.18.

CHALLENGE 3.6
Why should you not use the <cite> element to make text italic type?

3.9 Definitions and Abbreviations

The elements used for creating definitions and abbreviations are <dfn> and <abbr>, respectively. The
<dfn> element is used to identify the term to be defined, while the definition of the term is placed outside
the element. The content of the element (i.e., the term) is usually ​rendered in italic type by browsers. The
<abbr> element is used to identify an abbreviation, while the description of the abbreviation is provided
with the title attribute. This description is usually displayed as a pop-up by browsers when the cursor is
on the abbreviation. In some browsers, such as Firefox, the abbreviation may also be underlined with a
dashed or dotted line. The element should be used instead of the obsolete <acronym> element. Figure
3.20 shows how these elements are used, and Figure 3.21 shows the result.

FIGURE 3.20 Example usage of the definition and abbreviation elements.

FIGURE 3.21 The rendered result of Figure 3.20.

 CHALLENGE 3.7
Even though the content of the <dfn> element is rendered in italic, why is it not right to use it to
simply make text italic or to use other elements, such as the <em> element, that make text italic in its
place?

3.10 Small Text

Small (or fine) prints and side comments on a page, such as disclaimers, copyrights, licensing
information, and legal restrictions, should not be achieved by reducing the size of font, using CSS, as this
gives them no semantic meaning, which means that they will not be recognized as such by user agents. In
order to give them semantic meaning and therefore make the meaning accessible to more users, the
<small> element, which makes text small, should be used. It is important to note that the element should
not be used for main texts, such as multiple paragraphs and a whole page, as these are not side comments
to a page; rather, it should be used for short runs of text. Figure 3.22 shows how it is used, and Figure
3.23 depicts the rendered result. Small text may also be marked up as important by using the <strong>
element.

FIGURE 3.22 Example usage of the small text element.

FIGURE 3.23 The result of Figure 3.22.

CHALLENGE 3.8
Why should you not reduce font size to achieve small text instead of using the <small> element?
3.11 Text Edit
Sometimes, it is useful to show both old and new content together in order to communicate some types of
messages more effectively. This is done, for example, when you want to show people what the previous
information was, whether for comparison (as in when showing price cuts in sales) or cross-checking (as
in when people might be looking for the old information). The elements used to do this are <ins>, <del>,
and <s>. Table 3.2 shows the functions of the elements. Figure 3.24 shows their usage, and Figure 3.25
depicts the result.
TABLE 3.2
Insert, Delete, and Strikethrough Elements
Element Function
<ins>...</ins> Inserts a span of text and underlines it. Again, the <u> element should not be used for this, as it is obsolete.
<del>...</del> Deletes a span of text, which is usually indicated with strikethrough text.
<s>...</s> Renders text with a line through it (i.e., strikethrough text).

FIGURE 3.24 Example usage of the insert, delete, and strikethrough elements.

FIGURE 3.25 The result of Figure 3.24.

It is useful to note that even though both the <del> and <s> elements draw a line through their text
content, user agents interpret each according to its meaning. A screen reader, for example, will say which
it is, so that a blind user can understand.

CHALLENGE 3.9
Write the HTML code to produce the following:

3.12 Displaying Computer Code and Output

Text relating to computer input and output codes are displayed using a set of elements designed for the
purpose, which usually renders the text in the browser’s default ​monospaced font. This is a font in
which letters and characters occupy the same amount of space. It is different from variable-width fonts,
such as the one used in this text, in which the widths of letters vary. The elements include <code>,
<samp>, and <kbd>, which are listed in Table 3.3. Figure 3.26 shows how they are used, and Figure 3.27
depicts the result.
TABLE 3.3
Elements Used for Computer Input and Output
Element Function
<code>...</code> Used to display a fragment of computer code in monospace font.
<samp>...</samp> Used to present sample output from a computer program in monospace font.
<kbd>...</kbd> Used to present required user input in monospace font.

FIGURE 3.26 The code, sample, and keyboard input elements in use.

FIGURE 3.27 The result of Figure 3.26.

CHALLENGE 3.10
Which of the following elements would you use to present the sequence required to perform a
word-​processing task: <code>, <kbd>, or <samp>?

3.13 Displaying Preformatted Text

Sometimes, it is useful to display text the way you have formatted it. The <pre> element allows you to do
this. It supports global attributes, and the content can be styled using CSS. It is a block-level element, and
its content is rendered by default in monospace font, with leading space preserved and a margin of about
1 em added at the top and bottom edges. Figure 3.28 shows how the element is used, and Figure 3.29
depicts the result.
FIGURE 3.28 Example usage of the <pre> element.

FIGURE 3.29 The result of Figure 3.28.

Notice in the example that the content of the <pre> element is as it is in the HTML source. Also, notice
that the element is inside the <p> element. However, it does not have to be; the text above and below it
can be in separate <p> elements. Moreover, note that even though the <code>, <kbd>, and <samp>
elements are, by default, rendered in monospace font, they should not be used in place of the <pre>
element, as the element is recognized by user agents to have a specific meaning and is treated
appropriately.

CHALLENGE 3.11
Use the <pre> element in the same body of text as the <code>, <kbd>, and <samp> elements to
compare the outputs.

3.14 Authors’ Details and Publication Dates

The elements used for providing authors’ details and the publication time for a page are <address> and
<time>. The <address> element is used to provide contact information and nothing else, and its content is
usually rendered in italics. The <time> element is used to present time in a 24-hour format, date, and time.
In reality, anything can be put in the element (i.e., between the tags), and this will be rendered verbatim.
However, to include machine-readable information, the datetime attribute must be used. This information
is essentially designed for use by user agents in, for example, scheduling users’ calendar, rather than to
provide information directly to users, so it is not visibly rendered by browsers. Figure 3.30 shows how
the elements and attributes are used, and Figure 3.31 depicts the rendered result.
Notice that the value of the datetime attribute is not displayed, since it is only for use by the user agent.
The way it is formatted is to use the complete or precise time format. However, the use of imprecise dates
is also permitted. For example, “2015” is read as Year 2015, “2015-12” is read as December 2015, “12-
25” is read as 25 December of any year, and “2015-W15” is read as Week 15 of 2015.

FIGURE 3.30 The example usage of the address and time elements.

FIGURE 3.31 The result of Figure 3.29.

CHALLENGE 3.12
Why is the <br> element used in the <address> element in the example to place the address lines on
separate lines, instead of the <p> or <div> element, since these elements too begin on a new line?

3.15 Providing Hidden Additional Information

Sometimes, it is desirable to provide additional information but have it hidden, so that it is displayed only
when users want it. HTML provides the <details> element, with which this can be done. The <summary>
element can be used with this element to provide a visible heading for it, which, when users click, reveals
the hidden content. Figure 3.32 shows how the elements are used, and Figures 3.33 and 3.34 depict the
effect in the Chrome browser.
FIGURE 3.32 Example usage of the <details> and <summary> elements.

FIGURE 3.33 The result of Figure 3.32 before clicking.

FIGURE 3.34 The result of Figure 3.32 after clicking.

In the example, the <details> element contains the hidden text and the <summary> element provides the
heading for the element. If the <summary> element is not used, the name of the element is used for the
heading.

CHALLENGE 3.13
Implement the example, but without the <summary> element, to see what happens. Also, can you
think of an example of when you might use the technique of hiding text until it is requested in a
document, and say what the pros and cons of the technique are?

3.16 Displaying a Dialog Box

HTML provides the <dialog> element for displaying content in a dialog box (or modal window) that can
also be made interactive, typically using JavaScript. The element takes the open attribute, which says to
display the box and make it active. When the attribute is not specified, the box is not displayed. A form
can also be integrated in the element, so that the form is displayed inside it. How to create forms is
explained in Chapter 5. Figure 3.35 shows how the element is used, and Figure 3.36 depicts the result.
The <button> element is used to display a button for the user to use to close the dialog box. However,
scripting is needed to make it perform this function. The ​<button> element is also discussed further in
Chapter 5.

FIGURE 3.35 Example usage of the <dialog> element.

FIGURE 3.36 The result of Figure 3.35.

CHALLENGE 3.14
In the example, what difference would it make if the message is not placed in a <p> element and
when it is placed in a <div> element?

3.17 Menu Bar and Drop-Down Menus

Menu bars and drop-down menus are common features in Web design. Traditionally, implementing them
requires the use of CSS and/or scripting. However, HTML now provides elements that make this more
straightforward. The downside is that, as of time of writing, they are yet to be supported by any of the
major browsers. These elements are <menu> and <menuitem> and are typically used in combination with
other elements, such as the <button> element. The <menu> element is used to specify the menu bar, and the
<menuitem> element is used to specify the menu items on the drop-down menu. The <button> element,
which again is introduced more fully in Chapter 5, is used for interactivity. Figure 3.37 uses part of the
example given in the W3C draft specification to explain how these elements are intended to work
together. It should display a menu bar that contains a single button (i.e., a menu) that has a “File” label,
which when clicked displays a drop-down menu that lists three menu items (“New...,” “Open...,” and
“Save...”). In order to make something happen when a menu item is clicked, other attributes are used on
each <menuitem> element to specify an action. No doubt, when the elements are supported and it is clear
how they work, there will be ample examples on the Web.
FIGURE 3.37 Example usage of the <menu> and <menuitem> elements.

NOTE: Other ways of creating drop-down menus

The drop-down menu described in Figure 3.37 can be achieved through combining list elements
or the <button> element and the CSS properties that are used for controlling the display and
positioning of elements. List elements are introduced in Chapter 4, the <button> element in
Chapter 5, properties for displaying elements in , and those for positioning in Chapter 12.

3.18 Displaying Special Characters

Sometimes, it is necessary to include HTML characters, such as <, > and &, in a page. This may be, for
example, because you are building an HTML tutorial Web page. In order to ensure that the browser does
not interpret the characters as HTML code, character entity references or numeric character
references (also known as escape characters or escape codes) are used. These references also enable
characters that are not available on the computer keyboard, such as copyright symbol, to be displayed in a
Web page. Character entity references are case-​sensitive and take the format &name;. Therefore, a left-
angled bracket, for example, is written as &lt; and a right-angled bracket is written as &gt;. This means to
output <html>, for example, &lt;html&gt; is written.
Numeric character references are specified in decimal or hexadecimal numbers; however, decimal
numeral system is the most commonly supported by browsers. The decimal numeral system is a system of
counting in 10s, while the hexadecimal numeral system is a system of counting in 16s, in which after
counting from 0 to 9, the rest of the count is done with letters (i.e., A to F). Therefore, a count from 0 to 16
is 0–9 A–F, that is, 0 1 2 3 4 5 6 7 8 9 A B C D E F. In decimal numeral system, numeric character
references take the format ​&#number;, and in hexadecimal numeral system, they take the format
&#xnumber;. For example, the copyright symbol, ©, is “&#169;” in decimal and “©” in hexadecimal
numeral system (which is also the Unicode). Because not all typefaces support all character references, it
is important that one that supports the required characters is used. Table 3.4 lists a range of characters.
For more references, you can do a quick search for “Character entity references” on the Web, and the
Unicode codes for various ​characters can be found at unicode.org/charts. Figure 3.38 shows how the
references are used, and Figure 3.39 depicts the rendered output. Notice how in the output, &POUND is
not converted to the pound sign. This is because it is in all uppercase, when it should actually be in all
lowercase.
TABLE 3.4
A Range of Examples of Special Characters and Their Entity and Decimal References
FIGURE 3.38 Example usage of special characters.

FIGURE 3.39 The result of Figure 3.38.

CHALLENGE 3.15
Write an HTML code to display the following content as it is:
Item Price: €59.99
<div id=“character”>
Gigabyte > Kilobyte < Megabyte

3.18.1 Non-Breaking Spaces

As mentioned in Chapter 2, the Web browser collapses multiple consecutive spaces to one by default
when it renders an HTML document. This means that irrespective of how many consecutives spaces you
put between words, this will be rendered as one space. In order to have more than one space rendered,
the non-breaking space entity (&nbsp;) has to be used for each space required. Figure 3.40 shows how
this is done, and Figure 3.41 depicts the result.

FIGURE 3.40 Example usage of the non-breaking space entity.

FIGURE 3.41 The result of Figure 3.40.

CHALLENGE 3.16
Write an HTML code to display the content within the quotes:
“Fill in the blanks:
The browser only displays space.
Browsers and screen readers are types of agents.”

3.19 Language Information and Text Directionality

Specifying the language in which a document is written and text direction (e.g., left to right and right to
left) are essential in ensuring that the browser renders the document correctly and as intended. This is one
aspect of the internationalization of documents, in that it makes documents accessible to as many
international users as possible. The attributes primarily used accomplish these tasks are the lang and dir
attributes.

3.19.1 lang
The lang attribute specifies the base language of the attribute values and content of an element. It is
intended to make browsers render a Web page meaningfully, based on the accepted usage for a specified
language. It is inherited, and the value it takes is a language code that represents a natural language. A
language code comprises a ​primary code and a possible sub-code. The primary code is a two-letter
code that represents a language abbreviation, and the sub-code represents a country code. In the language
code “en-US,” for example, “en” is the primary code and represents English, and “US” is the sub-code
and represents USA. The entire language code means US version of English. Most languages require only
the primary code. Common primary codes include fr (French), it (Italian), de (Germany), nl (Dutch), es
(Spanish), el (Greek), pt (Portuguese), ja (Japanese), zh (Chinese), ru (Russian), and he (Hebrew).
Relevant language codes can be found in IANA Language Subtag Registry at iana.org. Figure 3.42
shows examples of how the attribute is used.

FIGURE 3.42 Example usage of the lang attribute.

Notice in the example that the lang attribute is used on the <html> element and then on the child
elements, as necessary. You should always use the attribute on the <html> element, not on the <body>
element, to ensure that the text inside the <head> element is covered.

3.19.1.1 Benefits of Using the lang Attribute

Providing language information in your document has several benefits. It allows you to provide language-
dependent styling and behavior. Situations in which providing language information in your content is
helpful include:
Helping search engines identify words, based on users’ language preferences.
Helping speech synthesizers, such as screen readers, pronounce words properly.
Assisting the browser in making decisions on ​language-dependent matters, such as where to place
hyphens; where to place line breaks; how to justify; when to convert the case of letters; and which
font variants, quotation marks, ligatures, and spacing to use.
Helping in the checking of spelling and grammar, for example, of the user’s input.
Helping you to set different styles for different ​languages in a multilingual document. You can see
example of this in Section 14.9.4 of Chapter 14.

CHALLENGE 3.17
Using the lang attribute on the <head> and <body> elements instead of using it on the <html> element
will not work; True or False? Give reasons for your answer.

CHALLENGE 3.18
If you have a phrase in a paragraph that is in a different language from the one used in the rest of the
paragraph, how do you isolate it, so that you can specify its language code and also give it a different
color?
3.19.2 dir
The order in which browsers display text depends on the base direction set for, or inherited by, the
element that contains it. The attribute used to set base direction is the dir attribute, and the values it takes
are ltr (left to right), rtl (right to left), and auto (which leaves it to the user agent to decide). The default is
ltr. It is inherited and can be overridden. It is useful to note that the attribute does not actually affect the
order in which the characters of text are displayed, but it affects only the order of the words. It only helps,
in combination with other processes, determine how the browser handles the display of text. In some
cases, it only visually aligns text left or right.
The way the determination of text direction works in browsers is that each character in Unicode
(introduced in Chapter 2) has a directionality property associated with it. Some characters are designated
as ltr (left to right) and others as rtl (right to left). In addition, Unicode provides the Unicode
bidirectional (bidi) algorithm, which is used to display these characters, using their directionality
properties. Browsers, by default, determine the direction in which to display a sequence of characters
(e.g., a word), using the bidi algorithm, and do this automatically, independently of the current base
direction. For example, for a sequence of Latin characters, it displays one after the other from left to right,
and for a sequence of Arabic or Hebrew characters, it displays one after the other from right to left.
Therefore, the word “forward” in English, for example, is displayed from left to right, while the same
word in Arabic is displayed from right to left.
This means that the base direction set with the dir attribute is used only to determine the direction in
which the words are displayed. Basically, it makes the word that is displayed first in left-to-right
direction display last in right-to-left direction, and vice versa. Incidentally, the bidi algorithm can be
turned off, using the <bdo> element (or bidirectional override element), which overrides the current
directionality properties of characters. Sometimes, it is necessary to do this when the algorithm does not
produce the desired result. This usually happens when different languages are mixed in the same text. The
use of the dir attribute is mandatory for the <bdo> element. Another element that can be used to resolve
problems from mixing languages is the <bdi> element (or bidirectional isolation element), which can be
used to isolate text that needs to be formatted differently from the surrounding text. However, this element
is not supported by all major browsers. An alternative way of resolving the same issue is to use an inline
element (such as the <span> element) to isolate the relevant text and then use the dir attribute. Figures
3.43 and 3.44 show some examples of how these attributes and elements are used and the effects.

FIGURE 3.43 Examples of how the dir attribute and <bdo> element are used.
FIGURE 3.44 The result of Figure 3.43.

In the example, the content of the first <p> element is displayed using the default ltr base direction. In
the second, specifying ltr does not make a difference. In the third, rtl starts the text from the right. In the
fourth, the Hebrew text is not displayed from the right, as it should be, because the default ltr base
direction is used. Note that the bidi algorithm still ensures that the characters of each word are displayed
correctly. In the fifth <p> element, specifying rtl makes the text display correctly from the right. In the
sixth, two different languages are displayed using default base direction. This makes the Hebrew text to
display improperly from right to left. In the seventh, the <bdo> element overrides the bidi algorithm for
the Hebrew text and sets the base direction to rtl. The <bdi> element is also used to isolate W3C to
ensure that it is displayed from left to right, since it is English. In the eighth <p> element, the <bdo>
element is used to override the bidi algorithm and set the direction to rtl, even though the correct direction
for displaying the text is from left to right.

NOTE: Document language

You should always specify the language of a document, using, for example, the lang attribute,
where the dir attribute is used, as this can further enhance the correct display of text.

NOTE: The dir attribute and tables

The dir attribute can also be used to specify the flow of columns in a table. For example, when
dir=“rtl” is used on the <html> element, the content of table cells is aligned to right, the content of
each cell flows from right to left, and so do the columns.

CHALLENGE 3.19
What does the dir attribute do in relation to the characters in a word, and why is it not necessary to
specify it for text that is displayed from left to right?

CHALLENGE 3.20
 In terms of their effects on the direction of text, what are the differences between the dir attribute and
the <bdo> element?

3.20 Ruby Text

Ruby text is the term that is commonly used to describe a run of text that appears alongside another run of
text that is known as the ruby base text to annotate or provide pronunciation guide to that run of text. It is
typically placed above or to the right of the base text but can also be placed below or to the left. An
example is shown in Figure 3.45, rendered in Microsoft Edge, in which ruby text is used to provide the
pronunciation of the Chinese characters. The translation in, for example, English, could also be given
instead of, or with, pronunciation.

FIGURE 3.45 Illustration of ruby text.

Ruby text is usually smaller and thinner than the base text, and its use is especially common in East
Asian text, such as Chinese, Japanese, and Korean (CJK) text. The elements used to implement it are
listed in Table 3.5.
The elements in the table can be combined in various ways to produce the same result. For example,
each pair of <rb> element and the corresponding <rt> element can be placed in <ruby> elements, or a
sequence of <rb> elements and a sequence of corresponding <rt> elements can be placed in the same
<ruby> element. Some examples of usage are presented next.
TABLE 3.5
Ruby Elements
3.20.1 <ruby>, <rb>, <rt>, and <rp>
Figure 3.46 shows how the <ruby>, <rb>, and <rt> elements are used, and Figure 3.47 depicts the result,
using the Chinese text for “Red Dragon is Alive!” The base text is in simplified Chinese, while the ruby
text gives the traditional Chinese equivalence.
In Figure 3.46, notice that there are equal numbers of <rb> and <rt> elements in the <ruby> element.
Each <rt> element is associated with the corresponding <rb> element and is displayed above it or to the
right of it. However, in Figure 3.47, notice that some ruby characters are missing above some base
characters. This is because the ruby characters are the same as the corresponding ruby base characters,
and it is redundant to show them twice. In cases where there is no ruby character for a ruby base, an
empty <rt> element must still be included in order to ensure correct matching between the base and ruby
characters. It is also worth noting that a space can be put between the characters by having a space
between the <rb> elements or having them on separate lines.

FIGURE 3.46 Example usage of <ruby>, <rb>, and <rt>.

FIGURE 3.47 Result of Figure 3.46.

Note: Base text without the <rb> element

You can also specify base text without using the <rb> element, as shown below:
<ruby><rt></rt><rt></rt></ruby>
or as shown below, although there will be spaces between the base-ruby character pairs in this
case.
<ruby><rt></rt></ruby>
<ruby><rt></rt></ruby>

FIGURE 3.48 Using the <rp> element to enclose <rt> elements.

Figure 3.48 shows the same code as in Figure 3.46, but with the <rp> element used to add parentheses
to enclose the <rt> elements, so that browsers that do not support ruby text can ignore them. Notice how
this is done (shown in bold). The left parenthesis is added with <rp>(</rp>, and the right parenthesis is
added with <rp>)</rp>. The code produces the same result as Figure 3.47, in browsers that support ruby
text.

CHALLENGE 3.21
In Figure 3.46, what will be displayed if the ruby markup is not used?

CHALLENGE 3.22
In the examples, what will happen if the <rb> elements are placed on different lines?

CHALLENGE 3.23
The <span> element can be used in place of the <rb> element. Given this, replace the <rb> elements
 in Figure 3.46 to see the effect. Also, can you think of the pros and cons of using either element?

CHALLENGE 3.24
Using Figure 3.46 as guide, create the following with ruby elements.

3.20.2 <rbc> and <rtc>

Apart from its use for containing <rb> elements so that they can be treated as one, the <rbc> element
seems useful for little else as of time of writing. Even then, its use for containing <rb> elements can cause
alignment problem with ruby text. On the other hand, being able to group <rt> elements with the <rtc>
element makes it possible to provide more than one set of ruby text for the same base text, with the ruby
texts stacked on top of the other. This means that you could, for example, provide more than one type of
information for the same base text, such as pronunciation and meaning in another language. Figure 3.49
shows how the element is used, and Figure 3.50 shows the effect. It adds another layer of ruby text to
provide pronunciation guide.

FIGURE 3.49 Example usage of the <rtc> element.

FIGURE 3.50 Result of Figure 3.49.

 CHALLENGE 3.25
In the example in Figure 3.49, use the <rbc> element to see its effect in a browser that supports ruby
text, such as Firefox.

NOTE:Positioning and aligning ruby text

It is possible to specify the position and alignment of ruby text relative to the ruby base, using
CSS properties. The properties are introduced in Chapter 14.

3.21 Acquiring Text for Use

There are various ways to obtain text for use in Web design, all of which allow text to be created and the
characteristics to be manipulated. Here are some of the commonly methods used:
Text can be typed in directly into the relevant development tool. It may also be created first in a
text editing or word processing program and then cut and pasted into the relevant development
tool.
Printed text can be scanned or photographed and an Optical Character Recognition (OCR)
program can then used to convert the printed text image into digital text and saved in the desire
format. All major operating systems, such as Windows, Mac, and Linux, provide such a program
and the help information for using it. Free programs, as well as professional ones, are also
available on the Web.
Speech can be converted to text by using speech-recognition technology, which involves a
program that converts words spoken into a microphone into text. Recorded speech audio files can
also be converted in this way. Most operating systems offer this functionality too.
Handwriting can be converted to text by using a digital pen (or stylus) to write on a digitizing
tablet, as if writing on a paper, and the writing can be converted to text by using handwriting-​-
recognition software. Again, most operating systems offer this functionality.

3.22 Useful Info

3.22.1 Web Links
HTML specifications: w3.org/TR/html51, w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
HTML5 support testing: html5test.com
HTML tutorials (Here are just a few free tutorial sites on HTML and other Web languages):
w3.org/wiki, html5rocks.com, sitepoint.com, w3schools.com, codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Webtutorialspoint.com, whatwg.org, htmlgoodies.com,
htmldog.com, htmlcodetutorial.com, echoecho.com, learn.shayhowe.com, html.net, tizag.com, html-5-
tutorial.com, docs.webplatform.org, developers.google.com, webdesignermag.co.uk
4
Lists, Tables, and Links

4.1 Introduction
Traditionally, lists and tables are essential tools in print media for imposing structure on content. Their
application in Web design is no different. They can also be combined with links, especially lists, to
extend their application. This chapter discusses the HTML elements used to create them.

4.2 Learning Outcomes

After studying this chapter, you will know about HTML elements used to do the following:
Create different types of lists.
Describe the structure of tables and populate them with data.
Define links to other parts of the same page, other pages within the same site, and external pages.

4.3 Lists
HTML allows you to create three different types of lists:
Unordered lists, which are lists in which items begin with bullet points.
Ordered lists, which are lists in which items start with numbers or alphabets and are in numeric
or alphabetical order. Naturally, this is used only where the order of list items matters to meaning.
Definition lists, which are lists made up of terms and the definitions for each of the terms.
The general principle that underlies how any of these lists is created is to first specify type of list and then
the items of the list. Table 4.1 lists the relevant elements.
TABLE 4.1
The List Elements

Figure 4.1. demonstrates how the elements are used, and Figure 4.2 shows the rendered result. It is
useful to know that lists are indented by browsers by default, and all the elements are block-level
elements. In addition, the list elements add space at the top and bottom by default and the size of the space
is about the default font size used by the browser.
FIGURE 4.1 Example usage of all the list elements.

FIGURE 4.2 The result of Figure 4.1.

CHALLENGE 4.1
State the type of list that you would use for the content in the following document in order to
communicate it effectively and explain why? Then, write an HTML code to implement it.

4.3.1 Common List Attributes

The <ol> element can take a number of attributes to influence numbering or lettering of the list items. The
most commonly used attributes are the start attribute, which specifies the start value for numbering or
lettering items, and the type attribute, which specifies the kind of marker to use for numbering or lettering,
which must be 1, a, A, i, or I. Figure 4.3 shows both attributes in use, and Figure 4.4 depicts the result.
Note that the type attribute should be used only where the type of marker plays an important role, such as
in legal documents, where items are referred to from elsewhere in a document by their number or letter;
otherwise, the CSS list-style-type property, which is used to specify list-item markers, should be used,
since specifying list-item markers is considered styling in Web design. List-item markers for the <ul>
element can also be changed using this property. For example, it can be used to specify custom bullets
points made from images. The property is discussed more fully in Chapter 17.

FIGURE 4.3 Example usage of start and type attributes.

FIGURE 4.4 The rendered result of Figure 4.3.

4.3.2 Nested Lists

Sometimes, it is necessary to create nested lists, which are lists that have lists as list items. To achieve
this, a list element is simply placed in a list-item element. Figure 4.5 shows how this is done in the
unordered and ordered lists, and Figure 4.6 shows the result. Notice that in the nested ordered list, the
type ​attribute is used to specify lowercase lettering. As mentioned earlier, if specifying marker type is just
to order a list and the items are not to be referenced, then CSS should be used.

FIGURE 4.5 Example of nested unordered and order lists.

FIGURE 4.6 The rendered result of Figure 4.5.

CHALLENGE 4.2
Write the HTML code to insert another list after the first list item in the second-level list of both the
unordered and ordered lists in the example to see how the browser handles a three-level list by
default.
4.4 Tables
Various types of information benefit from being presented by using a table. Tables are especially crucial
for representing complex data, such as stock reports and time tables. The typical properties of a table are
illustrated in Figure 4.7, all of which can be represented using HTML, except width, height, cell padding,
cell spacing, and various other types of styling, which are defined by using CSS.

FIGURE 4.7 The typical properties of a table.

Table 4.2 describes the HTML table elements used for defining the structural properties of a table.
TABLE 4.2
Some Commonly Used Table Elements

4.4.1 Basic Tables

4.4.1.1 <table>, <caption>, <th>, <tr>, and <td>
The table, caption, table heading, table row, and table data elements are common to almost any table, as
they describe the essence of a table. For this reason, they are being discussed together. Figure 4.8 shows
how they are used, and Figure 4.9 shows the table that is created.
As you should be able to see in the example, everything about a table goes between the opening and the
closing tags of the <table> element and the contents of every row are placed inside the <tr> element. The
contents can be table headings or table data, as well as information about the table, such as caption,
included by using the <caption> ​element. Caption may be made strong or emphasized, using the <strong>
or <em> element, and should not be wider than a table’s width to avoid being clipped. The ​summary
attribute is usually used to provide additional information about a table. Although browsers do not
display the information, providing the information improves ​accessibility, because it is used by user
agents that do not render HTML into visual information, such as screen readers, to adequately inform
visually impaired users.

FIGURE 4.8 Example usage of table elements.

FIGURE 4.9 The rendered result of Figure 4.8, with and without border.

Notice that even when a cell is empty, an empty <td> element is still used to represent it; otherwise,
the table will not look properly when put together. Also notice that the contents of the <th> elements are
displayed in bold. They are also displayed in the middle of the cell. Using the <th> element for headings
(instead of using the <td> element and making the contents bold manually through CSS) is especially good
practice, as user agents, such as screen readers, recognize the element and are therefore able to render it
in the way that best communicates the contents of a table to the user. The element also enables pages to be
indexed more effectively by search engines. In the example, there are both row headers (i.e., apples,
bananas, and grapes) and column headers (i.e., item, bought, sold, and balance).

CHALLENGE 4.3
 Write the code for creating the following table. You can ignore the border, since it is supposed to be
implemented by using CSS.

4.4.1.2 Columns’ Grouping

As introduced in Table 4.2, the element used to group columns is the <colgroup> element. When used, it
should be placed after caption but before any other table element. It can either contain <col> elements
(each of which can represent one or more columns) or take the span attribute, but not both. The <col>
element, too, may take the span attribute. The attribute specifies the number of consecutive columns
spanned by an element. Figure 4.10 shows how the <colgroup> and <col> elements are used together, and
Figure 4.11 shows how the <colgroup> element is used without the <col> element. Both produce the same
result, shown in Figure 4.12. In both examples, the span attribute specifies to group the next two columns
and give the group a class name of “first_two”, which is then used to make the group’s background color
gray by using CSS. The next <​colgroup> or <col> element specifies to give the next column the class
name of “next_col”, which is used to make column’s background color yellow. Note that the colors have
been used here to only show the effects of the grouping elements. How this is done is shown in Chapter 17
under Section 17.4.

FIGURE 4.10 Example usage of the <colgroup> element with the <col> element.
FIGURE 4.11 Example usage of the <colgroup> element without the <col> element.

FIGURE 4.12 The result of Figures 4.10 and 4.11.

CHALLENGE 4.4
Create the following table and group the columns that have the same color. Again, you don’t need to
implement the border.

4.4.2 Table Cells’ Merging

4.4.2.1 <rowspan> and <colspan>
The merging of table cells is crucial in extending the application of tables beyond just using them to
present basic information. In HTML, this is achieved with the rowspan and colspan attributes in the <th>
and <td> elements. Figure 4.13 shows how it is done, and Figure 4.14 depicts the rendered result.
In the example, notice that the table has a border. This has been done by using CSS, and it is necessary
to use it at this point to show the effects of rowspan and colspan, which otherwise will not have been
apparent without a border. In the first table row element, the first rowspan attribute specifies that the
cell should span one column (the default) and two rows; the colspan specifies that the cell should span
one row (the default) and two columns. Like the first, the second rowspan specifies to span one column
and two rows. In the second table row element, the two <th> elements are used to put content in the
second row of the table, which has only two columns, bearing in mind that the first cells of the first and
fourth columns belong to the first row. The last two <tr> elements are used to fill the cells of the
remaining rows, as normal.

FIGURE 4.13 Example usage of rowspan and colspan attributes in cells merging.

FIGURE 4.14 The result of Figure 4.13.

CHALLENGE 4.5
Write the HTML code for the table below. You can again ignore the border. The centering of the
content of the data cells is left as another exercise in Chapter 17, after the property for centering
content has been introduced.

4.4.3 Long Tables

4.4.3.1 <thead>, <tbody>, and <tfoot>
Long tables can make it difficult to use a table and also make it inaccessible to users with disability who
use assistive technologies, such screen readers. For example, when a table is longer than what can fit into
one screen and scrolling is required, the header usually disappears, making it difficult to figure out what
goes under which column. The elements intended to solve problems caused by long tables are <thead>,
<tbody>, and <tfoot>. However, as of time of writing, the functionality of these elements is yet to be
implemented enough in most browsers to fully realize the goals for which they have been designed. Their
functions have been described in Table 4.2, and Figure 4.15 shows how they can be used.
The effects of the <thead>, <tbody>, and <tfoot> are not usually visible; therefore, the code in Figure
4.15 will produce just an ordinary table, similar to the one in Figure 4.9. This is because these elements
merely enable a table to be divided into header, body, and footer parts. It is recommended when the
elements are used and a table is very long that the <tfoot> element is placed before the <tbody> element
to enable the browser to render the footer before all rows of data are received, which can take time.
When the elements are used, it is possible for users to scroll through the body of a table independently of
the header and footer. With a long table, it may also be possible to have the header and the footer printed
on every page of data, instead of just on the first and last pages, respectively.

FIGURE 4.15 Example usage of the <thead>, <tbody>, and <tfoot> elements.

4.4.4 Tables and Accessibility

Even when tables look well structured to the eyes, assistive technologies can still interpret their contents
inaccurately, causing problems for visually impaired users. For example, screen readers might read out
their contents in the wrong order. This is especially likely when tables are complex, are simple but have
unusual structure, or are created by using unusual practices. Providing information about the relationship
between table cells is one of the ways in which the problem is minimized, and the attributes most
commonly used to achieve this are scope, id, and headers. The scope attribute can be used by itself, while
id and headers must be used together.

4.4.4.1 The scope Attribute and Accessibility

The scope attribute is used for defining the scope of a header (i.e., the cells that are affected by a header).
It defines whether the header defined in the <th> element is for a row, column, or a group of rows or
columns. Situations in which using it is recommended include when the header of a table is not in the first
row or column and where a data cell that is marked up with the <td> element is used as a header. The
attribute takes any of the four values: col, row, rowgroup, or colgroup. Table 4.3 describes their function,
and Figure 4.16 shows how they are used.
TABLE 4.3
The Values Taken by the scope Attribute
Scope Function
Attribute
Value
col Means that the header applies to all the cells in the same row as the element.
row Means that the header applies to all the cells in the same column as the element.
rowgroup Means that the header applies to all remaining cells in the row group to which header belongs, which are either to the left or to the
right of the <th> element; however, it is to the right by default, since table directionality is left to right by default. Different table
directionality can be specified by the value of the dir attribute in the <table> element. It is a global attribute, whose value can be
“ltr” (i.e., left to right, and the default), “rtl” (i.e., right to left), or “auto” (i.e., the browser decides, based on content).
colgroup Means that the header applies to all remaining cells in the column group to which header belongs.

FIGURE 4.16 Example usage of the scope attribute to aid accessibility

Notice that the code in the example is the same as that in Figure 4.8, except for the addition of the scope
attribute to the cell of each row that is a header (but not in the first column) and the cells of the first row
that are headers. Basically, as a general rule, all <th> elements and <td> elements that act as headers
should have a scope attribute. The attribute does not affect the appearance of a table, so the code in the
example produces the same result as in Figure 4.9.
4.4.4.2 The id and headers Attributes and Accessibility
As introduced in Chapter 2, the id attribute is a global attribute used to give a unique identity to an
element. The headers attribute, on the other hand, is used to associate one or more header cells with a
table cell. Its value must correspond to the id attribute of the <th> element with which it is associated.
When multiple values are specified, the values are space-separated, each value again corresponding to
the id attribute of the <th> element with which it is associated. The technique is usually suitable for the
situation when the use of the scope attribute is not enough to describe the relationships between table
headers and data cells, such as when data cells are associated with more than one row and/or column
header. Figure 4.17 shows how the attributes are used together, and Figure 4.18 shows the created table.
Notice that as with the scope ​attribute, the id and headers attributes do not affect the display of a table.
Again, note that the border has been added by using CSS, and this has been done just to make the table
clearer to see. In the first table row element, the <th> elements are given c, t, and e identities,
respectively. In the second table row element, each <th> is given an id and is also associated with the
corresponding <th> element defined in the first <tr>, using the headers attribute. In the third table row
element, the headers attribute is used to associate each <td> element with the appropriate <th> element.

FIGURE 4.17 Example usage of id and headers attributes to aid accessibility.

FIGURE 4.18 The rendered result of Figure 4.17.

CHALLENGE 4.6
Add id and headers, as appropriate, to the example in Figure 4.13 to make the table more accessible.
 NOTE: Designing tables
Tables are ideal for presenting specific values intended for easy and efficient access and
comprehension. However, in order for them to perform these functions effectively, they need to be
designed properly in a way that is logical and aesthetically pleasing. Guidelines on how to
achieve these are presented in Chapter 17, where how to style tables is discussed.

4.5 Links
Links, technically known as hyperlinks, are the very essence of the Web, because they are the feature that
enables interconnection between pages and browsing, without which the Web would be non-existent. The
common types of links are as follows:
Linking from a page to another website.
Linking from a page to another page on the same website.
Linking from a part of a page to another part on the same page.
Linking from a page to a specific part of a page on another website.
Linking from a page to an e-mail program to start a new message.
The element used to create all these types of links is the <a> element (known as anchor element). The
element defines an anchor but not the hyperlink; the hyperlink reference attribute, href, and a value
(which must be a URL) are required to do this, as shown in Figure 4.19. The content between the opening
and the closing tags is what is turned into a hyperlink.
In the example, the text “Click here for BBC” is made a link, so that when it is clicked, the Web
browser fetches the document “index.html” from the local hard disk cache, if a copy has been cached
(saved), or requests it from the Web server at the location “http://www.bbc.co.uk” and displays it. By
default, a new page replaces the current one in the browser window, unless the browser is instructed to
display the new page in a new window, using the target attribute, which was introduced in Chapter 2.

FIGURE 4.19 The structure of the HTML code for a hyperlink.

4.5.1 Linking to Another Website

When linking to a website, the link typically points to the home page (i.e., it is the URL of a website’s root
directory on a Web server that is typically specified); the URL of a specific document is not usually
specified. When a link points to the root directory, the Web server usually serves the document index.html
by default, which is the home page. Figure 4.20 shows how this is done, and Figure 4.21 depicts the
result.
Where a link is inside text, as opposed to when used in a main menu, in order to enhance accessibility,
link text should be meaningful enough to convey its purpose on its own and out of context. If this is not
possible, any additional description providing the context for the link should be placed close to the link
(e.g., in the same sentence or paragraph), such that it is easy for users to identify without moving focus
from the link. A good example and a bad example are shown in the NOTE box that follows.

FIGURE 4.20 Example usage of the <a> element for external links.

FIGURE 4.21 The result of Figure 4.20.

NOTE: Examples of good and bad link texts

Good: “See the Information page to know more about…”
Not ideal: “To know more, click here to go to the Information page”
Poor: “Click here for more.”

CHALLENGE 4.7
Create the menu links in Figure 4.21 but without using the list elements to produce the following:
 CHALLENGE 4.8
Write the HTML code to display the content between the quotes in the paragraph below, linking the
word “Earth” to https://en.wikipedia.org/wiki/Earth.
“The Solar System is made up of the Sun and the objects that orbit it. One of these objects is the
planet known as Earth, which is where we live.”

4.5.2 Linking to Another Page on the Same Website

Linking a page to another page on the same website is similar to linking to another website, except that
you do not need to specify an absolute address. Figure 4.22 shows how it is done. Notice the relative
addresses. It means that all the files are in the same directory (folder) as the page displaying the links. See
Chapter 2 for explanation of absolute and relative addresses. The main advantage of using relative
addressing is that an entire site can be built on a local computer and then uploaded to a Web server for
hosting, without having to make any adjustments after uploading, as long as the relationships between the
locations of the pages are maintained.

FIGURE 4.22 Example usage of the <a> element for within-site links.

4.5.3 Linking to Another Part on the Same Page

Linking to another part of the same page is known as within-page linking and uses the same underlying
principle as linking to a whole page, except that the points to which to link first have to be identified, after
which the anchor element is used to link to them. The points are identified by using the id or name
attribute.

4.5.3.1 Using the id Attribute

Figure 4.23 shows how the id attribute is used to link within page, and Figure 4.24 shows the rendered
result. The three sections to navigate to are identified as “ instruction_video,” “situation_video,” and
“scripted_video.” The <a> element is then used to create links to the three sections from the menu at the
top of the page, as well as to the start of the page from each section. Notice that the value of each href
attribute starts with a # symbol, followed by the value of the id attribute of the element (i.e., section) to
which to link. Using the # symbol alone for the value of the href attribute means to link to the start of the
current page. An empty string (e.g., href=““) or just href without any value can also be used.
FIGURE 4.23 Example usage of id attribute for within-page links.

FIGURE 4.24 The result of Figure 4.23 in the browser.

CHALLENGE 4.9
Implement the code in Figure 4.23, but leave out the # symbol from value of the href attributes that
specify the destination section to see what happens.

4.5.3.2 Using the name Attribute

To use the name attribute to link within a page, you use the attribute with the <a> element to create
anchors at the points to link to (i.e., the start of the page and the start of each of the three sections). Then,
you use the <a> element again with the href attribute to create the necessary hyperlinks, again starting the
href attribute’s value with the # symbol, followed by the value of the name attribute of the <a> element
(i.e., section) to which to link. This code is shown in Figure 4.25. Notice that no content is placed
between the opening and closing tags of the <a> elements used to define the named anchor points to which
to link. This is because it is not necessary.

FIGURE 4.25 Using the name attribute for the example in Figure 4.23.

CHALLENGE 4.10
What will happen if the name attributes in the example are on the header elements instead of being on
the <a> elements, and what is the problem with this, if any?

4.5.3.3 Within-Page Links in Web Design

The use of within-page links is generally discouraged for various reasons. One, according to the NN
Group, is that it violates the mental model that users have of the way a hyperlink should behave, and
so, it can confuse them. This model is that a link leads to a new page that is displayed from start, and the
Back button takes users to the previous page. However, the use of within-page links can be less confusing
if it is made clear to users what to expect when they click them. One way in which this can be done is to
have link description say where a link leads, for example, “for more, click to go to the relevant section.”
Also, there are situations where within-page links are acceptable, such as when the sections of a page are
summarized at the top of the page, with links leading directly to the sections. Examples of these types of
situations include when presenting alphabetized lists, frequently asked questions (FAQs), and a page that
has a table of contents at its start that leads to sections in the page, such as those shown in Figures
4.23–4.25.

NOTE: Accessibility application

The principle of linking from the top of a page to other parts of the page can be useful in making a
page more accessible to screen reader users by including a “Jump to Main Content” link at the top
of the page, so that it is one of the first things that screen reader users hear or users that use only
keyboard encounter when using the tab key. The link enables users to skip long list of navigation
menu and go directly to the main content. The link can also be hidden (made invisible), so that it
does not interfere with the aesthetics of a design from the viewpoint of sighted users. This is done
by using CSS, and how it is done is discussed under “Absolute positioning” in Chapter 12.

4.5.4 Linking to a Specific Part on Another Page

Linking to a specific part of a page on a website can be achieved with the same technique as used for
linking to a specific part on the same page, as long as the part or ​section to be linked to on a page has a
unique identification and it is known. All that is required is to add the identifier to the end of the link to
the page. The URL can be relative or absolute. If the page in on the same website, then relative URL can
be used, but if the page is on another website, it has to be absolute. For example, if the URL for a page is
“http://www.example.com/glossary.html” and the section to link to is identified as ​”instruction_video,”
using the id or name attribute, the link to the section would be written in one of the following ways:
<a href=http://www.example.com/glossary.html#instru​ction_video>Instruction video</a>
<a href=“glossary.html#instruction_video”>Instruction video</a>

NOTE: Link to part of another page in design

Users should not be dumped in the middle of a new page without an indication of where they are.
The part to which they are directed should have a clear heading that is visible, without the need to
scroll up or down to see it. This can be done, for example, by using a named anchor above the
header element that contains the heading, as shown in Figure 4.25.

4.5.5 Linking to an E-Mail Program

When a hyperlink points to an e-mail program, the user’s e-mail program is opened with a new message
addressed to the specified e-mail address. To achieve this, the <a> element is also used, except that the
value of the href attribute starts with mailto:, followed by the e-mail address to which you want the
message to be sent. Figure 4.26 shows how it is done, and Figure 4.27 depicts the result. When the link is
clicked by the user, the default e-mail client (program) on his or her computer is opened.
FIGURE 4.26 Examples of how e-mail links are created.

FIGURE 4.27 The result of Figure 4.26 in the browser.

CHALLENGE 4.11
Which of the above two approaches do you think is more efficient and why?

4.6 Useful Info

4.6.1 Web Links
HTML specifications: w3.org/TR/html51, w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
HTML5 support testing: html5test.com
HTML tutorials (Here are just a few free tutorial sites on HTML and other Web languages):
w3.org/wiki, html5rocks.com, sitepoint.com, w3schools.com, codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Webtutorialspoint.com, whatwg.org, htmlgoodies.com,
htmldog.com, htmlcodetutorial.com, echoecho.com, learn.shayhowe.com, html.net, tizag.com, html-5-
tutorial.com, docs.webplatform.org, developers.google.com, webdesignermag.co.uk
5
Forms

5.1 Introduction
On-line forms are an essential means of collecting information from users, and most websites require the
completion of a form for one purpose or another. They are basically the screen version of traditional
paper forms, and most of the features commonly used in paper forms translate well into screen forms.
Like paper forms, they can be of any size, but they also incorporate other features, such as buttons, drop-
down list, and buttons, and can be interacted with in various ways, including via mouse, digital pen, and
touch. This chapter introduces the various elements used to build a Web form.

5.2 Learning Outcomes

After studying this chapter, you will:
Be aware of how form submission works and the role of the <form> element.
Understand how form elements are used and the types of controls that they display.
Be aware of the guidelines for ensuring a well-designed accessible form.

5.3 Form Element

Forms are used to collect information from users and vary widely in size and purpose. For example, it
could contain just a single text field for the input of a search term to search the Web, two fields for taking
the username and password to login to a site, or many types of inputs for collecting information about a
user during registration. Every form, no matter how basic or complex, includes a button for the user to use
to submit the form to the Web server for the processing of the entered information. The way the process
works is illustrated in Figure 5.1.
FIGURE 5.1 A basic illustration of how forms are handled.

The <form> element is the element that is used to hold all the various elements that are used to describe
the features of a form. The elements used to collect input are known as form controls. A control must
have a name. The information entered by the user is associated with this name, and both are sent by the
browser to the Web server as a name-value pair. For example, in the illustration in Figure 5.1, if the
names given to the controls are fname, lname, and email, respectively, then the name-value pairs sent
would be fname=Joe, lname=Bloggs, and email= [email protected] . The <form> element allows
these pairs to be sent to the Web server through the use of the action and method attributes. The action
attribute allows you to specify the URL of the script to use by Web server to process the data, and the
method attribute allows you to specify how the data should be packaged and sent to the Web server. The
two possible methods are GET and POST, each of which is suitable for different situations.
With the GET method, the pairs are added to the end of the URL specified in the action attribute,
separated by “?,” with the pairs joined using “&.” Therefore, if, for example, the specified URL is
“http://www.test.com/register.php,” then what is sent will be: http://www.test.com/register.php?
fname=Joe&lname=Bloggs& [email protected]
Situations for which the GET method is well suited include when the amount of collected data is small
and is going to be used for searching a database. It is not suitable for a lot of data, because it supports
only 1024 characters. It should also not be used for sensitive information, because people can easily hack
into it. It also does not support binary data, such as image files and Word documents.
With the POST method, the pairs are sent via what are called HTTP headers. The pairs are joined in
the same way as in the GET method, that is, by using “&.” The method is suitable for all the uses
described above, for which the GET method is unsuitable. Figure 5.2 shows how the action and method
attributes are used with the <form> element.
In addition to the action and method attributes, the <form> element supports other attributes that are
commonly used. Table 5.1 lists them, starting with the two already mentioned.
FIGURE 5.2 Using the action and method attributes with the <form> element.

TABLE 5.1
Common Attributes Supported by the <form> Element

5.4 Form Controls

Forms can generally be boiled down to containing four categories of controls: those for inputting text,
those for making selections, those for uploading files, and those for starting an action. Table 5.2 lists
the controls that can be used to achieve these goals, all of which are discussed in this section.

5.4.1 <input>
The <input> element is the most commonly used in forms, because it is used to display different types of
controls. It is an inline element, which means that the <br> element or a block-level container element
(e.g., <div> or <p>) must be used to go to a new line. It takes many attributes. The most important is the
type attribute, as it specifies input type and the type of control interface that is displayed, which includes
text-input field, radio button, checkbox, and drop-down menu. Other attributes specify the behavior of
these controls. Although there are many input types, their usage is based on the same principle, using the
following format:
<input type=“value”>
Different sets of attributes are used with different input types. Some are mandatory, and others are
optional. They will be introduced, as necessary, as the input types are presented.
TABLE 5.2
Form Controls and Elements Used with Them

5.4.1.1 Input Types for Collecting Text

There are input types for collecting plain text as well as input types for collecting numeric data and
formatted text, such as time and date, and most of them display an editable text-input field, into which the
user can type. Some of them also have additional control features, such as increment-decrement and/or
drop-down menu buttons, to help user input. To better explain them here, they are presented in the
categories of those used for plain text input, those for entering numbers, and those for entering time and
date data.

5.4.1.1.1 Input Types for Collecting Plain Text

The input types introduced here are typically used to collect short text inputs from a user, such as personal
details and search terms, which basically can consist of any character; however, you can also make them
collect only certain types of characters and in a specific order. Table 5.3 lists their names and functions.
All the input types in Table 5.3 support the same set of attributes, except the hidden-input type, which
supports only name and value. Table 5.4 lists the attributes and their functions.
TABLE 5.3
Text-Input Type Values

TABLE 5.4
Attributes Supported by Input Types that Display Text Fields
 Figure 5.3 shows how the types in Table 5.3 are used, along with the commonly used attributes in Table
5.4. Figure 5.4 shows the result.
In the example, notice that all the input types have a similar format. The attributes used to perform the
functions are described in Table 5.4. The Username and Password fields have been completed for the
purpose of demonstration. The non-letter characters displayed in the password-input type field are
automatic and for the purpose of preventing others from knowing what the user types. The required
attribute ensures that a form is not allowed to submit until the user has completed the input for the element
that has it. Notice that it does not have any value. The longhand is required=“required”, which is
unnecessary. Since the attribute does not usually provide any visual cues until after a form has been
submitted and the browser has prompted that a control must be completed, it can be useful to include
some visual means of informing users of the controls that must be completed, so that they know
beforehand. For example, the background or border of a field could be made with a different color from
those of other controls. This is achieved using CSS, and how it is done is explained in Chapter 17.

FIGURE 5.3 Example usage of plain text-input types.

FIGURE 5.4 Rendered result of Figure 5.3.

The use of the required attribute is a part of a process known as form validation, which involves
checking a submitted form to ensure that all the required inputs have been completed and the inputs are of
the correct type and/or format. It is an important process, because it ensures the integrity of submitted
form data. Traditionally, this was done using client-side JavaScript scripting. However, HTML now has
attributes to help with the process. One of them is the required attribute. Another is the pattern attribute.
Although the attribute is not used in the example, it can be useful for ensuring that users enter certain types
of information, such as e-mail address, correctly. It is easy to specify. However, deriving the correct
regular expression (also called regex) to specify can be difficult, because it involves mathematics.
Figure 5.5 shows an example being used.

FIGURE 5.5 Example usage of the pattern attribute.

The expression is used to verify that user input comprises three upper- or lowercase letters, followed
by six digits. The content of the title attribute in the code is displayed when the cursor hovers over the text
field. If the user enters an input whose format does not match the pattern, the browser immediately
prompts him or her to re-input the data and also reminds him or her of the correct format. Using the
attribute with email and password input types can be especially useful for ensuring that correct e-mail
formats are inputted and that the passwords chosen by users are varied and complex and therefore
difficult to guess by hackers. To ensure password complexity, users are compelled to include a wide
variety of combinations of lower- and uppercase letters, numbers, and characters. The explanation of how
regular expressions are formulated is beyond the scope of this book. However, there are useful
expressions on the Web. It is not important to understand how they work to be able to use them. You only
need to know what they do.
Refer to Figure 5.3 and notice the text in the email field, which is placed there with the placeholder
attribute. It is temporary and disappears the moment the field receives focus or the user starts to type into
it. Next, notice that the Search text field is filled with the word “bolts” by default. This is the effect of
specifying the value attribute in the search-input type. In contrast, the hidden-input type does not display
anything. It simply creates a name-value pair, “subject=registration,” which is sent to the server when the
form is submitted and used by the relevant script for decision making. An example of how the input type is
used is when the same script is used to process more than one form. Giving different hidden values to
each form makes it possible for the script to identify which form has been submitted and process it
accordingly. Finally, notice that the fields in the example are not vertically aligned. This is done using
CSS and is dealt with in Chapter 17.

CHALLENGE 5.1
To see the effect of the pattern attribute, include it in the example in Figure 5.3 and then use the
regular expression “[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$” as its value to check the e-mail
field. Remember to include the title attribute.

5.4.1.1.2 Input Types for Collecting Numbers

The input types for collecting numbers are number and range. As of time of writing, only some browsers
support these input types. They include Firefox, Opera, and Chrome. Both input types support the same
attributes as text-input types listed earlier in Table 5.4, except size, maxlength, pattern, and placeholder.
Table 5.5 lists the extra ones that they support.
5.4.1.1.2.1 Input Type: number The number-input type displays a single-line text field for the user to
enter a number directly and also provides increment and decrement buttons, with which a number can be
specified. Figure 5.6 shows how it is used, and Figure 5.7 depicts the result. The min and max attributes
specify the range of numbers allowed; the value attribute sets the initial number as 0; and the step attribute
specifies that every click of the button should increase or decrease the value in the text field by 3.
TABLE 5.5
Attributes Supported by Input Types for Collecting Numbers
Attribute Function
min Specifies the minimum numeric value allowed. It can also be used for date value.
max Specifies the maximum numeric value allowed. It can also be used for date value.
step Specifies increment and decrement values when a control button is clicked.

FIGURE 5.6 Example usage of number-input control.

FIGURE 5.7 Rendered result of Figure 5.6.

 CHALLENGE 5.2
Can you think of a type of Web application in which the number control is applicable?

5.4.1.1.2.2 Input Type: range The range-input type displays a slide control for inputting an integer
(whole) number, as opposed to decimal number. Figure 5.8 shows how it is used, and Figure 5.9 depicts
the result. As in the previous example, the min and max attributes specify the range of numbers covered by
the slide and the value attribute sets the initial number as 0.
The disadvantage of the range-input type is that it does not display any number. However, this
functionality can be added using additional elements and attributes. Figure 5.10 shows an example of how
to do this, and Figure 5.11 depicts the result. The <output> element is responsible for displaying the
numbers, and its initial content is set as 0. In the <input> element, the min and max attributes specify the
range of numbers covered by the slide; the value attribute sets its initial number as 0; and the oninput form
event attribute says that when an input is made (i.e., when the slide is moved), the value of the element
bearing the name “quantity” should be replaced with the value of the one bearing the name “slideInput.” A
form event attribute, as you may recollect from Chapter 2, is an event generated by a form element when
its state changes.

FIGURE 5.8 How the range-input type is used.

FIGURE 5.9 Rendered result of Figure 5.8.

FIGURE 5.10 Adding numbers display with the <output> element.

FIGURE 5.11 Rendered result of Figure 5.10.

In the previous example, the number displayed cannot be edited. However, it is possible to make it
editable and also link it to the slide, so that the user can use either of the two to make an input. This can be
done by combining the range-input type with the number-input type. Figure 5.12 shows an example,
and Figure 5.13 depicts the result. In the number-type <input> element, the oninput attribute specifies that
when the user enters a number in the box, the value of the range-input type should be replaced with that of
the number-input type. The reverse happens with the oninput attribute in the range-type <input> element
when the slide is moved. All other attributes play the same roles, as described in the previous example.

FIGURE 5.12 Combining editable number field with the <output> element.

FIGURE 5.13 Rendered result of Figure 5.12.

CHALLENGE 5.3
Can you think of a situation in which the number control is applicable? Also, how would you change
the text box in the example to a non-editable field?

5.4.1.1.3 Input Types for Collecting Time and Date

Like the number-input type, the category of input types for collecting time and date provides ​appropriately
formatted text fields for users to make direct input and also provides additional button controls for
choosing options. The relevant input types are time, date, datetime-local, month, and week. The input
types ​support the same attributes as the number-input types, namely, min, max, and step. If the min or/and
max attributes are specified, controls display only dates or times that satisfy the specified limits, and the
increment or decrement button increments or decrements them only according to the specified step value
when clicked.
5.4.1.1.3.1 Input Type: time The time-input type displays a text box and a control for setting time. Figure
5.14 shows how it is used, and Figure 5.15 depicts the result. To use the control displayed, the user clicks
the relevant time component and types in a value or uses the up and down arrows.

FIGURE 5.14 Example usage of the time-input type.

FIGURE 5.15 Rendered result of Figure 5.14.

CHALLENGE 5.4
In which situations you might use the time control?

5.4.1.1.3.2 Input Type: date The date-input type displays a single-line formatted text box and a drop-
down calendar for setting date. The input format allowed by the text field depends on the date convention
of the region of the world of the user. Figure 5.16 shows how it is used, and Figure 5.17 depicts the result.
To use the control displayed, the user, like with the time-input type control, clicks the relevant date
component and types in a value or uses the up and down arrows. Various other arrows allow you to
navigate to the required month and year.

FIGURE 5.16 Example usage of the date-input type.

FIGURE 5.17 Rendered result of Figure 5.16.

 CHALLENGE 5.5
Implement the example and experiment with the control. Do this in different browsers, if possible,
for comparison. Also, use the min and max attributes to see the effect, using the earlier example
under the number-input type as guide.

5.4.1.1.3.3 Input Type: datetime-local The datetime-local-input type displays a text box and a date and
time control for setting local date and time. Figure 5.18 shows how it is used, and Figure 5.19 depicts the
result. The control displayed allows you to choose a date by clicking the downward arrow to display the
calendar and then clicking a day on it. The time is entered by clicking the hour, minutes, or ​seconds
component and by using the arrows to set the values. It is worth noting that HTML also specifies a
datetime-input type, which is intended for setting global date and time, including time zone information.
However, it is not, as of time of writing, supported by any major browser.

FIGURE 5.18 Example usage of the datetime-local-input type.

FIGURE 5.19 Rendered result of Figure 5.18.

CHALLENGE 5.6
Implement the example and interact with the features and then suggest in which type of application
you might use the control. Also, using the earlier example under the number-input type as guide,
experiment with the min and max attributes for possible applications.

5.4.1.1.3.4Input Type: month The month-input type displays a formatted text box and a month-and-year
control for setting month and year. Figure 5.20 shows how it is used, and Figure 5.21 depicts the result.
The control allows you to choose a month by clicking the downward arrow to display a calendar and then
clicking the next or previous arrow to navigate to the desired month. Alternatively, you could click the
button that displays all the months, to choose one.
FIGURE 5.20 Example usage of the month-input type.

FIGURE 5.21 Rendered result of Figure 5.20.

CHALLENGE 5.7
Implement the example and interact with the features and then suggest in which type of application
you might use the control. Again, using the earlier example under the number-input type as guide,
experiment with the min and max attributes to get a better idea of how you might apply them
effectively in a design.

5.4.1.1.3.5 Input Type: week The week-input type displays a text box and a week-and-year control.
Figure 5.22 shows how it is used, and Figure 5.23 depicts the result. The displayed control allows the
user to choose the date by clicking the downward arrow to display a calendar. Different Web browsers
display the control differently.

FIGURE 5.22 Example usage of the week-input type.

FIGURE 5.23 Rendered result of Figure 5.22.

 CHALLENGE 5.8
Implement the example and interact with the features in different browsers. Also, suggest in which
type of application the control might be useful.

5.4.1.2 Input Types for Offering Options

These input types allow you to provide users with options, from which they can choose. The two input
types used for this are radio and checkbox. Table 5.6 lists the attributes that they support.

5.4.1.2.1 Input Type: radio

The radio-input type displays a radio button and is used when you want users to choose only one from a
set of options. Once a button is selected, it cannot be unselected by clicking it. It can only be unselected
by clicking another button. This ensures that only one option can be chosen as answer to a question, and it
is the values of the name and value attributes of the chosen option that are used to create the name-value
pair that is sent to the server. This also means that radio buttons are not suitable when users are allowed
to not choose an option. Figure 5.24 shows how the input type is used, and Figure 5.25 depicts the result.
In the example, notice that all the elements have the same name. This is because only one response is
recognized for the question. It is worth noting that it may not always be a good idea to use the checked
attribute, as it might cause some users to think that they have made a selection, even though they have not.
This is because it is often easy to overlook things at a glance. In the case of the example, the consequence
might be someone whose title is “Mrs” submitting the default response (i.e., “Mr”). Leaving all buttons
unchecked makes it more unlikely that users will miss at a glance that they have not completed a question.
TABLE 5.6
Attributes for Radio Button and Checkbox

FIGURE 5.24 Example usage of the radio-input type.

FIGURE 5.25 Rendered result of Figure 5.24.

CHALLENGE 5.9
Implement the example in Figure 5.24 but with buttons arranged vertically.

CHALLENGE 5.10
For which of these would you use radio buttons?
Please select your favorites.
Please choose your gender.
Do you agree with the terms and conditions?
Please choose one.
Please choose.

5.4.1.2.2 Input Type: checkbox

The checkbox-input type displays a checkbox that allows users to select or deselect it and is best for
when you want users to be able to choose any number of options from a set of options per question. The
values of only the checked checkboxes are sent to the server. The value of each checkbox is combined
with the name to create a name-value pair for each option and sent to the server. Figure 5.26 shows how
the input type is used, and Figure 5.27 depicts the result.
Notice that like with radio buttons, all the checkboxes for the question have the same value for the name
attribute; however, more than one option can be selected. As long as the values of the value attributes are
different, this is all right, since the name-value pair for each option will be different. From the viewpoint
of the author who might write a script to process the form data, the common name identifies a question
and the values of the value attributes identify the options associated with it. In addition, notice that there is
space between each box and its label. This is because there is space in the code between each <input>
element and its label.
FIGURE 5.26 Example usage of the checkbox-input type.

FIGURE 5.27 Rendered result of Figure 5.26.

CHALLENGE 5.11
For which of these would you use checkboxes?
Please select your favorites.
Please choose your gender.
Do you agree with the terms and conditions?
Please choose one.
Please choose.

5.4.1.3 Input Types for Starting an Action

These input types allow you to provide a push button that users can click or press to initiate an action. The
action can be predetermined ones, such as the submission of a form, or it can be the execution of a script
to perform a specific task. The relevant input types are submit, reset, button, image, file, and color.\

5.4.1.3.1 Input Type: submit and reset

The submit-input and reset-input types are presented together, because they are typically used together.
The submit-input type displays a push button, which when clicked or pressed makes the browser start the
process of packaging and sending the information entered into a form by a user to the Web server. The
input type supports usual attributes but also some that relate to forms and their submission. Indeed, the
attributes perform similar functions as those listed earlier in Table 5.1 for the <form> element. For
example, the formaction attribute does the same thing as the action attribute in Table 5.1. Table 5.7 lists
them and their function.
TABLE 5.7
Attributes for Submit and Reset Buttons

Like the submit-input type, the reset-input type displays a push button, but when clicked or pressed, it
clears user’s inputs and resets all the controls of a form to their default values. Unlike the submit-input
type, it supports only the name, value, disabled, autofocus, and form attributes. Figure 5.28 shows how
both input types are used, and Figure 5.29 depicts the result.

FIGURE 5.28 Example usage of submit- and reset-input types.

FIGURE 5.29 Rendered result of Figure 5.28.

CHALLENGE 5.12
Add the necessary things to the code in Figure 5.28 to produce the form below:
5.4.1.3.2 Input Type: image
The image-input type allows you to specify an image to be used as a submit ​button. It supports the same
attributes as listed in Table 5.7 for submit- and reset-input types, as well as the image-specific ones
listed in Table 5.8. Figure 5.30 shows how the input type is used, and Figure 5.31 depicts the result.
TABLE 5.8
Attributes for Image Button
Attribute Function
src Specifies the URL of the image to use.
width Specifies the width of image.
height Specifies the height of image.
alt Specifies the alternative text to use to describe image. It is essential for accessibility.

FIGURE 5.30 Example usage of the image-input type.

FIGURE 5.31 Rendered result of Figure 5.30.

The actual size of the image used in the example was 200 × 50 pixels and was reduced to 148 × 30
pixels. It is good practice to create an image that is as close as possible in size to the one required.
This is because the process of reduction can cause problems, such as making the text on the image too
small to be legible. If the image specified is not found, a visual predetermined by the browser is
displayed instead. This can be just text or a box with text in it.
Unfortunately, unlike the submit- and reset-input types that perform predetermined functions when
activated, the image-input type needs to be told what to do when it is activated, and this is typically done
using the onclick event attribute (which generates an event each time the element on which it is used is
clicked) and the ​submit() JavaScript function (which submits a form when it is called). For example,
adding onclick=“submit();” to the <input> element in Figure 5.28 says to submit the form when the
element (i.e., the image button) is clicked.

NOTE: Image button accessibility

To make an image accessible to the visually impaired, it is necessary to provide the text
alternative that describes it. To make a functional image (i.e., an image used for a specific
function, such as one used as a button or link), text alternative should describe its functionality
instead of its appearance. More about image accessibility is discussed in Chapter 6.

CHALLENGE 5.13
Try the example in Figure 5.30 but without providing the correct location for the image, and see what
happens in different browsers.

5.4.1.3.3 Input Type: button

Like the reset-input and submit-input types, the button-input type displays a push button but with no
predetermined behavior. This means that like with the image-input type, you need to specify the function
to perform when it is activated. Doing this again involves using the onclick event attribute and the
submit() JavaScript function. The attributes that the input type supports are name, value, disabled, form,
and autofocus. Figure 5.32 shows how the input type is used, and Figure 5.33 depicts the result.
The onclick attribute in the code specifies that when the <input> element is clicked to execute the
JavaScript function called alert(), which displays the text between the quotes in an alert box. Different
browsers display the box in different ways. Firefox was used in the example, in which when the “Show
Message” button was clicked, the window changed to gray to indicate its current role as background and
the box is displayed on top.

FIGURE 5.32 Example usage of the button-input type.

FIGURE 5.33 Rendered result of Figure 5.32.

CHALLENGE 5.14
Try the code by using different types of browsers to see the differences in rendering.

5.4.1.3.4 Input Type: file

The file-input type displays a single-line text field and a browse button to allow users to select files for
uploading. However, it does not provide a control for the actual uploading; this is done using the submit-
input type, which you have already read earlier in this chapter. Any time a website allows you to browse
and select a file on your computer for upload, it is likely that it is the input type that is being used. The
attributes supported are listed in Table 5.9. Figure 5.34 shows how the input type is used, and Figure 5.35
depicts the result.
The control in the example is from Internet Explorer. Different browsers display different designs of
control. In Firefox, Chrome, or Opera, the text field is usually not as clear to see as of time of writing.
Clicking the field or the button of the control displays a dialog box, with which the user can navigate to
the required file or files. The accept attribute specifies that the file types expected are jpeg and png
image files, and the multiple attribute specifies that many files can be selected for upload. Typically,
selecting multiple files involves first selecting one and then holding down the Shift, Control, or Command
key while selecting others.
TABLE 5.9
Attributes for the File-Input Type
FIGURE 5.34 Example usage of the file-input type.

CHALLENGE 5.15
Add a submit button to the example that will serve to upload the selected file.

FIGURE 5.35 Rendered result of Figure 5.34.

5.4.1.3.5 Input Type: color

The color-input type allows you to display a color well (i.e., color picker), which allows a user to select
a color for an element. Table 5.10 lists the attributes that it supports. Figure 5.36 shows how the input
type is used, and Figure 5.37 depicts the result.
TABLE 5.10
Attributes for Color-Input Type
FIGURE 5.36 Example usage of the color-input type.

FIGURE 5.37 Rendered result of Figure 5.36.

CHALLENGE 5.16
In what type of Web application would you need to use the color-input type, and why could you not
just ask users to enter the hex code or name of the color that they want in a text-input field?

The code in the example displays a color button, which when clicked displays the color picker. The
hexadecimal value (or hex code) of the color selected is what is stored and sent to the server. In theory,
it is as if the user has entered the value into a text-input field.

5.4.2 Multipurpose Button

5.4.2.1 <button>...</button>
Like some of the action-button input types introduced earlier (i.e., submit, reset, and button), the <button>
element is used to display a button. It is a multi-purpose element for creating buttons and is intended to
give authors more flexibility and creative control over the appearance of buttons. For example, text can be
easily combined with an image on a button to give it more meaning. Table 5.11 lists the attributes the
element supports, and Figures 5.38 and 5.39 show how the type attribute is used with the element and the
result.
Notice the use of the <img> element and the associated attributes to add and size the green and red oval
images. They have been used here to only ​demonstrate the use of the <button> element and are discussed
more fully in Chapter 6. The <button> element ​creates a submit-type button and displays its content on it,
and the <img> ​element adds the image. The use of the alt attribute is important to make the button
accessible, as it provides the text for the screen reader to read out. The sizes of the actual images were 24
× 24 pixels and created with transparent background in Photoshop.
TABLE 5.11
Attributes for <button> Element
FIGURE 5.38 Example usage of the <button> element.

FIGURE 5.39 Rendered result of Figure 5.38.

CHALLENGE 5.17
What additional information do the images on the ​buttons in the example provide, and which types of
application do you think would benefit from these kinds of buttons?

CHALLENGE 5.18
Implement the example by using your own images and then specify the wrong locations for the
images. Also, omit them altogether and see what happens.

5.4.3 Multiple Lines Text Input

5.4.3.1 <textarea>...</textarea>
The <textarea> element allows you to display a control that allows users to enter multiple lines of plain
text, as opposed to the single line allowed by the text-input types discussed earlier. Table 5.12 lists the
attributes that it supports, and Figures 5.40 and 5.41 show how it is used and also show the result.
In the example, the dirname attribute is used only to explain how it works. It changes nothing, because it
specifies the default directionality setting. It works as follows: when the form is submitted, its value,
together with the directionality setting for the element, is sent as a name-value pair to the server. This
means that the name-value pair sent for setting directionality is comment.dir=ltr. The directionality value
“ltr” means left to right, which is the default. Directionality can be set using the dir attribute, a global
attribute. The other value it takes is rlt (right to left).
TABLE 5.12
Attributes for <textarea> Element
FIGURE 5.40 Example usage of the <textarea> element.
FIGURE 5.41 Rendered result of Figure 5.40.

CHALLENGE 5.19
What is the basic difference between the textarea control and the controls for the text-input types?

5.4.4 Drop-Down List

5.4.4.1 <select>...</select>
The <select> element is used to display a drop-down list, from which a user can choose one. Each item of
the list is created using the <option> element, and the items are grouped using the <optgroup> element.
Table 5.13 lists the attributes supported by the <select> element.
Table 5.14 lists the attributes that the <option> element allows. Of the attributes, the <optgroup>
element supports only the label and disabled. Figure 5.42 shows how a drop-down list is created using
these elements.
In the example, notice the nesting convention (indicated with the left brackets). It is important to get this
right if the list is to work correctly. Figure 5.43 shows the drop-down list after the down arrow has been
clicked to activate it. Notice that the values of the label attributes on the <optgroup> elements are
automatically given emphasis. When the form is submitted, the value of the name attribute on the <select>
element is attached to the value of the value attribute on the <option> element to create the name-value
pair that is sent to the server.
TABLE 5.13
Attributes for <select> Element

TABLE 5.14
Attributes for <option> Element
Attribute Function
value Specifies a value for option.
label Specifies a label for option.
selected Specifies to select option by default. It can be specified by itself, without a value (instead of selected=“selected”).
disabled Specifies to disable control, so that user cannot interact with it. It can be specified by itself, without a value (instead of
disabled=“disabled”).

FIGURE 5.42 Example usage of the <select> element.

FIGURE 5.44 Using the multiple attribute with the <select> element.

FIGURE 5.43 Rendered result of Figure 5.42.

The <select> element also supports the selection of multiple options when the multiple attribute is used
on it. The value of the size attribute can be set high to show many or all the options at once in order to
make this easier. Figure 5.44 shows the result of the same code in Figure 5.42 but with the multiple
attribute specified and the size attribute set to 6. Users can select more than one option by holding down a
modifier key (e.g., Shift or Ctrl in Windows and Command or Option in Mac) while clicking the options.
In the example, three options are selected. However, the use of multiple select menus is not
recommended because of the difficulty in using them. For example, many people may not know how to
use modifier keys. It may be better to use checkboxes where users are allowed to make multiple
selections.

CHALLENGE 5.20
Render the code in Figure 5.42 and experiment with the multiple and size attributes to see the effects.
Also, notice that the list is displayed upward. Place the select control under the prompting text, on a
separate line instead of placing it on the same line, and see how this behavior changes.

5.4.4.2 <datalist>...</datalist>
Like the <select> element, the <datalist> element creates a drop-down list, but it works in a different way.
It works in combination with the text-type <input> and <option> elements, so that what is typed inside the
text field determines the options displayed on the drop-down list. The element takes no special attributes;
it takes only global ones, such as id. Figure 5.45 shows how it is used, and Figure 5.46 depicts the result.
In the example, when the user clicks, double clicks, or starts typing in the text-input field, the drop-
down list is displayed, from which the user can choose one. If it is a long list and the desired item is not
visible, then, as the user starts typing the desired word, the items are narrowed down to those that match
the most to what is currently typed. However, for the element to work properly in this way, the value of
the list attribute on the <input> element must match the value of the id attribute on the <datalist> element,
which is “browsers” in this case.

FIGURE 5.45 Example usage of the <datalist> element.

FIGURE 5.46 The result of Figure 5.45.

CHALLENGE 5.21
 Implement the example and make the text box appear under the label instead of making it appear to
its right. Also, interact with it to see how it works to better understand how to use it.

5.4.5 Showing Task Progress

5.4.5.1 <progress>...</progress>
The <progress> element allows you to display a control to show the progress of a task. The display is
static and shows only a snapshot rather than a continuous display. In order to create a dynamic display, a
script will have to be used to display snapshots at intervals. The specific attributes that it supports are
value (which specifies the amount of task completed) and max (which specifies the total amount of task
available to do). Figure 5.47 shows how the element is used, and Figure 5.48 depicts the result.

FIGURE 5.47 Example usage of the <progress> element.

FIGURE 5.48 Rendered result of Figure 5.47.

CHALLENGE 5.22
For which of the following would you use the <progress> element and why?
The number sold from stock of an item.
Time-based information.
State of stock of an item.
Provide information about how full a theater is.
The sales of tickets for a concert.

5.4.6 Displaying Measurement

5.4.6.1 <meter>...</meter>
The <meter> element is used to display a control that shows a gauge. Note that its function is different
from that of the <progress> element and should be seen as displaying a measure of fullness, emptiness of
capacity, speed, and so on. Table 5.15 lists the attributes that it supports, while Figures 5.49 and 5.50
show how it is used and also depict the result.
TABLE 5.15
Attributes for <meter> Element

FIGURE 5.49 Example usage of the <meter> element.

FIGURE 5.50 Rendered result of Figure 5.49.

CHALLENGE 5.23
For which of the following would you use the <meter> element?
The number sold from stock of an item.
Measure of sales.
State of stock of an item.

5.4.7 Outputting Calculation Result

5.4.7.1 <output>...<output>
The <output> element is used to display the result of a calculation. However, the use of JavaScript is
necessary to use it. To address this, HTML5 also includes the valueAsNumber property of JavaScript,
which returns a string as a number and is relatively straightforward to use. Table 5.16 lists the attributes
supported by the element. Figure 5.51 shows how the element is used, and Figure 5.52 depicts the result.
TABLE 5.16
Attributes for <output> Element
Attribute Function
name Specifies the name for element.
for Specifies in a space-separated list the id values of elements used in a calculation.
form Specifies the id value on the form with which to associate element.
FIGURE 5.51 Example usage of the <output> element.

FIGURE 5.52 Rendered result of Figure 5.51.

The example shows two numbers being added together, as each is inputted by the user. The number-
input type (discussed earlier) is used to collect each number, and the <output> element displays the
content of the value of the name attribute (i.e., “sum”). The oninput event attribute on the <form> element
takes care of the addition of the numbers and the placing of the result in “sum.” The equation says to take
the values stored in “a” and “b,” use the valueAsNumber function to change each to a number, add the
numbers together, and then make the result the value of the element named “sum.” Notice the dot
convention. This is the convention used in object-oriented programming to specify to access what is
stored in a variable or apply a function to it.

CHALLENGE 5.24
Write a code that displays the result of three numbers inputted by the user, the first two of which are
added together and the total multiplied by the third.

5.4.8 Labeling Form Controls

5.4.8.1 <label>...<label>
In the examples shown so far, form controls have been labeled by simply placing text before them.
However, this is limiting in various ways. For example, it makes it difficult to isolate them for styling,
and since such labeling has no semantic meaning, it is not recognized by assistive technologies used by
people with disabilities, making a form inaccessible to these users. The <label> element is designed to
solve this problem and allows a label to be associated with a control. Table 5.17 lists the attributes that it
supports.
The <label> element can be used with or without the for attribute and can be wrapped around just the
label of a form element or the label and the ​element. Figure 5.53 shows typical usage, and Figure 5.54
depicts the result.
Notice that all the approaches produce the same type of labeling. In the code, numbers 1 and 2 show
just the <label> element used, first to encapsulate the label and second to encapsulate both the label and
the <input> element. Numbers 3 and 4 use the same principles but with the addition of the for and id
attributes. This is known as the label reference technique, because the id attribute is used to associate
the <input> element with the <label> element. Since an id is unique in a form, only one label can be
associated with a form control. While all the four approaches are compatible with assistive technologies
and are supported by HTML specification, number 3 is most commonly used, because it allows for the
label to be styled separately and is consistent with how other types of controls are labeled.
TABLE 5.17
Attributes for <label> Element
Attribute Function
for Specifies the control with which to associate label.
form Specifies the form with which to associate label.

FIGURE 5.53 Example usage of the <label> element.

FIGURE 5.54 Rendered result of Figure 5.53.

In some cases, the purpose of a form control may be clear enough, such that adding a label will create
redundancy visually. An example is a text field that has a search button next to it. In such cases, although
label is still added to make the control accessible to assistive technologies, it is made invisible by hiding
it by using CSS. An alternative is to use the ​aria-label attribute, which provides a label to identify a form
control to assistive technologies but does not provide the information visually. Figure 5.55 shows how the
attribute is used, and Figure 5.56 depicts the result. Although the title attribute can also be used for this, it
is not supported by some screen readers and assistive technologies.
FIGURE 5.55 Example usage of the aria-label attribute.

FIGURE 5.56 Rendered result of Figure 5.55.

5.4.8.2 Labeling and Accessibility

In addition to the point just made about labels and accessibility, there are other guidelines, especially
regarding the placement of labels in relation to form controls. Although there are no strict rules, the best
practice is to follow popular placement convention. This ensures that a form is not confusing to use and
is accessible. For form controls that display text fields and select boxes, the convention is to place labels
above them or to the left, depending on various factor. For example, visually impaired users and mobile
phone users benefit from placing them above, because this reduces the width of a form and therefore the
need for horizontal scrolling. For radio buttons and checkboxes, it is typical to place labels to the right.

NOTE: Accessibility
If an image, such as an asterisk, is used in front of the label of a required control, then the
<label> element should encapsulate it.
Form buttons (e.g., submit-input and reset-input types and <button> element) do not
require additional accessibility information. The value of the value attribute used with the
<input> element and the content of the <button> element provide the necessary
information for the screen reader.
When an image-input type is used for a button, the alt attribute should be used with the
<input> element to provide accessibility information.
If a form control is not labeled, because it is apparent visually, then a hidden label should
be considered.

CHALLENGE 5.25
Why is the following poor labeling practice for accessibility?
<label>Select ice cream flavor
<select name=“flavor”>
<option>Vanilla</option>
<option>Chocolate</option>
<option>Strawberry</option>
 </select>
</label>

CHALLENGE 5.26
How would you label the following to make it accessible? (Hint: label each item separately):
<div>Select ice cream flavor</div>
<ul>
<li><input type=“checkbox” id=“a1”
value=“vanilla”>Vanilla</li>
<li><input type=“checkbox” id=“a2”
value=“chocolate”>Chocolate</li>
<li><input type=“checkbox” id=“a3”
value=“strawberry”>Strawberry</li>
</ul>

5.4.9 Grouping Form Controls

5.4.9.1 <fieldset>...</fieldset>/<legend>...</legend>
The <fieldset> element groups together a set of ​controls and draws a border around them. The <legend> ​-
element adds caption to the border to describe the content of the group. While the <legend> element has
no native attributes, the <fieldset> element takes the three attributes listed in Table 5.18. The legend
should be brief and descriptive, especially because screen ​readers usually read it out for each control in
the fieldset. Figure 5.57 shows the element in use, and Figure 5.58 depicts the result.
TABLE 5.18
Attributes for <fieldset> Element
Attribute Function
name Specifies the name for element.
disabled Specifies to disable control, so that user cannot interact with it. It can be specified by itself, without a value (instead of
disabled=“disabled”).
form Specifies the id value on the <form> element with which to associate element.

FIGURE 5.57 Example usage of the <fieldset> element.

FIGURE 5.58 Rendered result of Figure 5.57.

CHALLENGE 5.27
What would happen if the <legend> element is used without the <fieldset> element?

5.4.10 An Example Form

Some of the form controls introduced so far are brought together in Figure 5.59 to produce an example of
a typical form. Figure 5.60 shows the result. Notice that the text input fields are not properly aligned
vertically. In order for a form to look professional and be easy to use, these fields should be properly
aligned. This is done using CSS, and how this is done is explained in Chapter 17.
FIGURE 5.59 The <form> element and associated elements and attributes.
FIGURE 5.60 The code in Figure 5.59 rendered in a browser.

CHALLENGE 5.28
Insert appropriate markup in the code in Figure 5.59 to create line space between the controls, so
that the form looks more spacious.

NOTE: Form in a Dialog Box

As mentioned in Chapter 3, a form can be integrated into a dialog, so that when the form is
submitted, it disappears with the dialog. This is done by placing the <form> element in the
<dialog> element and by using the value of “dialog” with the method attribute of the <form>
element (thus: method:”dialog”).

5.5 Form Design Guidelines

Forms should be aesthetically pleasing and easy to use in order to make interaction with them a good
experience. The following are some guidelines on how these goals can be achieved:
Related fields should be grouped together and arranged in a logical order, such as by enclosing
them in a box or by using the same color, with each group having a meaningful title. The form
itself should have a meaningful title.
Layout should be visually appealing, with ample use of white space and properly aligned fields.
The size of fields should match or be longer than the size of data to be entered, so that what
users enter does not disappear into the left or right edges of the box, making it hard for them to
follow what they are entering.
 Only really important questions should be asked; for example, asking for salutation is not
always necessary.
If possible, each field should be validated immediately after it is completed and correction
should be requested, if necessary.
Users should be allowed to enter numbers, such as phone and credit card numbers, in flexible ​-
formats, as requiring a strict format can create problems for some users, particularly the elderly.
Compulsory fields should be clearly marked, such as with an asterisk, which may be in a
contrasting color, typically red. However, too many compulsory fields can be discouraging, so
fields should not be mandatory unless they are really necessary. Asking for users’ addresses, for
example, is likely to discourage them; e-mail is often adequate.
Keyboard focus should be set to the first field when the form is displayed, as this minimizes
total number of clicks. Also, if possible, when a field receives focus, information should be
provided on the type of data required for the field.
It should be possible to change any entry at any point before a form is submitted, and how to
submit a form should be clearly indicated.

5.6 Useful Info

5.6.1 Web Links
HTML specifications: w3.org/TR/html51, w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
HTML5 support testing: html5test.com
HTML tutorials (Here are just a few free tutorial sites on HTML and other Web languages):
w3.org/wiki, html5rocks.com, sitepoint.com, w3schools.com, ​codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Web ​tutorialspoint.com, whatwg.org, htmlgoodies.com,
htmldog.com, ​htmlcodetutorial.com, echoecho.com, learn.shayhowe.com, html.net, tizag.com, html-5-
tutorial.com, docs.webplatform.org, developers.google.com, webdesignermag.co.uk
6
Images

6.1 Introduction
Images have functions in almost everything we do that involves communication. Next to text, they are
perhaps the most prevalent form of communicating content on the Web. Not only this, they have an
indispensible role in the aesthetic appeal and the theme setting of Web pages. This chapter introduces the
HTML elements used to add images, as well as design principles that guide effective use of images in
Web design.

6.2 Learning Outcomes

After studying this chapter, you should:
Know how to add single and multiples images, including image maps, to a Web page by using
HTML.
Know how to embed another document, such as an interactive direction map, in a Web page.
Be aware of the main types of images and file formats used in Web design.
Be aware of guidelines for using images in Web design.
Be aware of different ways of acquiring images for use in your design.

6.3 Adding Images with HTML

An image can be added to a Web page in two main ways. It can be embedded in the current page, or a link
that points to its location can be provided. In the latter case, the image is usually displayed in a page by
itself. Irrespective of whether an image is embedded or linked to, it can be used as an image map. This is
an image that contains hotspots (clickable areas), which when clicked result in an event occurring, such
as taking the user to a different destination to provide more information. Linking to an image is achieved
using the <a> element, introduced in Chapter 4, and embedding one is achieved using the <img> element.
Traditionally, only one image source could be specified using the element, but by combining it with
newer elements, such as <source> and <picture>, and with newer attributes, such as srcset and sizes, it is
now possible to specify multiple image sources, from which the browser can choose the one that is best
suited for a user situation, depending on the user’s device screen pixel density, zoom level, and, possibly,
other factors, such as network properties. If-conditions, known as media conditions, can also be used to
help the browser determine which images to use and when to use them, as explained later. Multiple
images that are provided to the browser to choose from are generally termed responsive images, and the
technique is a response to the need to have images that are compatible with responsive Web design,
discussed later in Chapter 21. Table 6.1 lists the main elements used for embedding an image in a page,
including those used to embed an image map.
TABLE 6.1
Elements for Incorporating Image in a Web Page
6.3.1 <img>, <source>, and <picture>
The <img>, <source>, and <picture> elements can be combined in different ways and used with various
combinations of attributes to specify either a single image source or multiple image sources. The typically
used attributes and their functions are listed in Table 6.2.
TABLE 6.2
Attributes Used with Elements Used to Embed Image
6.3.1.1 Specifying a Single Image Source
Although responsive image technique is the future in Web design, if a page is not required to adjust to suit
different user situations, then just specifying a single image source is adequate. Also, if a page is required
to adjust but the images being used are vector-based images, such as Scalable Vector Graphics (SVG), a
single source can be used. This is because vector-based images can scale to different sizes, as necessary,
without depreciation in quality or a change in file size. A single image source can be specified using just
the <img> element and the src attribute. Figure 6.1 shows how this is done and the use of other relevant
attributes. Figure 6.2 shows the result.
In the example, the src attribute specifies the image to embed (which is “yacht.jpg”) and says that it is
inside a folder named “images” that is inside the folder containing the HTML document. The alt and
longdesc attributes perform the functions described in Table 6.2. Using the alt attribute also contributes
to accessibility, because the text is what screen readers and other assistive technologies read out to
visually impaired users. For this reason, it is important for alternative text to be an accurate but concise
description of the content of the relevant image. It should not be a list of keywords (known as “keyword
stuffing”) designed to trick search engines, as this could get your website blacklisted (i.e., blocked by
search engines). For image used only for decoration, no description is required, but the attribute should
still be specified with nothing between the quotes (thus: alt=“ “).
FIGURE 6.1 Example usage of the <img> element.

FIGURE 6.2 Rendered result of Figure 6.1. (Image from http://www.freeimages.co.uk.)

The title attribute, which is a global attribute, provides additional description for the image and is
usually displayed when cursor hovers over an image, as shown in the rendered example. However, the
attribute should not be used for essential information, since you cannot rely on everyone having access to
it, because not every user uses a mouse and some browsers may not display it.
The width and height attributes specify the rendered size of the image. Rendered image size can also be
specified using CSS. Both approaches have advantages and disadvantages. Most importantly, specifying
size by using attributes enables faster download and more orderly rendering of a page. It also prevents
layout from having to be reflowed multiple times as the page loads. This is because text usually
downloads faster than images and the browser by default does not know the size of an image. The result
of this is that when the attributes are not used, text finishes downloading, the browser displays it, and then
moves it around to fit in the image when the image finishes downloading, resulting in an untidy rendering
process. In contrast, when the width and height attributes are specified and the browser encounters them,
it reserves the right amount of space for the image and displays the text accordingly, so that when the
image finishes downloading, it fits it in, without having to move the text significantly around. On the other
hand, specifying size by using CSS (discussed in Chapter 15) allows for size to be controlled dynamically
and also overrides whatever size is specified, using the width and height attributes.

Note: Another way of adding an image

It is worth noting that images can be added to a page in a way that does not require the browser to
make a separate request for it, which is what happens when you link to an external image. This is
done by embedding the image data directly in the code for the Web page, using the Base64
 encoding and data URI scheme. Essentially, an image file is encoded in base64 and the data URI
scheme used to include the encoded data. Base64 is a technique of representing binary data in
ASCII (i.e., characters). The example below shows how this can be used for Figure 6.1, showing
only a tiny part of the base64 data.
<img
src=“data:image/jpeg;base64, / 9 j /4AAQSkZJRgABAgEBLAEsAAD/ 4RAjR...”
alt=“A yacht race” title=“A flotilla of yachts at the start of a racing regatta.”
longdesc=“yacht_race_desc.html” width=“500” height=“336”>
Although using this method reduces the number of requests to the server, the amount of base64
data generated is typically much larger than that of the corresponding image file, which by itself
can affect download performance. So, the method is usually used for small images, such as image
sprites. Base64 encoders can be found on the Web.

NOTE: More on image accessibility

When multiple images are used together to represent a single piece of information, such
as when multiple images of a star are used to represent rating, only the text alternative
of one of the images, typically the first, should describe the information. The alt
attributes of the others should be empty (i.e., alt=“ “). This is so that the screen reader
does not repeat the description for every image, thereby confusing and annoying users.
When complex images, such as diagrams, illustrations, maps, and charts, are used, the
text alternative should be used to convey only a summary of what the image
represents. A link is then placed next to or underneath the image to a long description. If
the long description is on the same page, then, instead of a link, its location can be
included in the text alternative. The aria-describedby attribute can also be used with the
<img> element instead, in order to indicate where the long description is located on the
same page. Its value should be the id of the element (e.g., <p> element) that provides the
description.

Challenge 6.1
Which of the following is a better use of alternative text for an image of a garden covered in snow,
and why? Also, can you write a better one?
<img src=“image/garden.jpg” alt=“Garden”>
<img src=“image/garden.jpg” alt=“My garden in winter”>

CHALLENGE 6.2
What is the difference between how the browser renders alt text and the title attribute, and which is
more valuable for accessibility?
 CHALLENGE 6.3
If the image in the example was in a folder named “hobbies” that is inside a folder named “images”
that is inside the one containing the HTML document, how would you write the value of the src
attribute?

CHALLENGE 6.4
Assuming the file names of the following two images of a star, are “full_star.png” and
“empty_star.png”, write a code that displays the rating below, making the text alternative “Item
rating: 3 out of 5 stars.”:

CHALLENGE 6.5
In CHALLENGE 6.4, which of the five star images that form the rating should carry the alternative
text that describes the function of the images, and why? Also, if your answer is that only some of the
images should carry the function description, what should the alt values for other images be?

6.3.1.2 Making an Image a Link, and Linking to an Image

Making an image clickable is an essential Web design practice and is done using the <a> element, which
is the same element used to turn text into a hyperlink. The element and how the href attribute is used on it
to create a link were discussed in Chapter 4. Figure 6.3 shows how this is done, and Figure 6.4 depicts
the result.
In the example, notice that the entire <img> element, including all its attributes, is placed between the
tags of the <a> element, just as is done to create text links. Also, notice that the cursor has changed shape
to indicate that the image is clickable. Incidentally, the type of cursor shape to display can be specified
using CSS. How this is done is shown in Chapter 17. The text link under the image links to the same
image but displays it in a separate window when clicked. The first <br> element is used to place the link
on a separate line, and the second to create an extra line. This is necessary, since <img> and <a> are
inline elements and do not start on a new line.

FIGURE 6.3 Using the <a> element to make an image a link and link to an image.
FIGURE 6.4 Rendered result of Figure 6.3. (Image from http://www.freeimages.co.uk.)

CHALLENGE 6.6
How can you achieve the same goal achieved with the <br> elements in the example without using
the elements?

NOTE: Functional image accessibility

A functional image is one that is used to perform a specific function, such as linking to a
destination and starting an action. To make the purpose of a functional image accessible to
visually impaired users, the text alternative should describe the function rather than the
image. For instance, in the example in Figure 6.3, “See a yacht race image” makes the image link
more accessible than “An image of a yacht race.”

6.3.1.3 Containing and Captioning Images Properly

Traditionally, the <img> element would be placed in the <p> or <div> element in order to be able to treat
it as a self-contained unit. However, these elements are not semantically related to images. The <figure >
container element, introduced in Chapter 2, was designed to address this. It allows images or a
combination of media elements to be contained and treated as a separate unit. The <figcaption> element is
intended to be used to add caption to the container. Figure 6.5 shows how the elements are used, and
Figure 6.6 depicts the result.
FIGURE 6.5 Example usage of <figure> and <figcaption>.

FIGURE 6.6 Rendered result of Figure 6.5.

CHALLENGE 6.7
In the code example, why is the <h2> element placed inside the <figure> element and not outside of
it?

6.3.1.4 Specifying Multiple Image Sources

In order to specify multiple image sources (i.e., responsive images), the <picture> and <source>
elements need to be used with the <img> element, together with various combinations of the srcset, sizes,
media, and type attributes. Situations in which it is necessary to use responsive images are known as use
cases. More than one situation can occur together, in which case each situation is addressed. The
commonly recognized use cases and how to specify responsive images for them are discussed here.

6.3.1.4.1 Specifying for Different Device Pixel Ratios

A device display screen is made up of many tiny dots called pixels. Device pixel ratio is the ratio of the
number of these physical screen pixels to a CSS pixel, while CSS pixels are pixels used to specify
lengths of elements in CSS. The difference between the two pixel types is that the size of a device pixel is
typically fixed, while that of a CSS pixel is variable and can be smaller or larger than a device pixel. For
example, if an image that has a width of 200 px is zoomed in, it takes up more device pixels; however, the
number of CSS pixels remains the same (i.e., 200) and the CSS pixels only expand as necessary. High-
resolution screens usually contain multiple device pixels per CSS pixel. Device screen pixels are
explained further later in the chapter. Providing multiple images based on device pixel ratio is sometimes
called resolution switching and is necessary in situations where different users might have different
technology-based circumstances. For example:
Users’ devices might have different physical screen sizes, usually measured diagonally.
Users might have screens with different pixel densities (i.e., pixels per inch).
Different zoom levels might be used.
Screen orientation might be different (e.g., landscape and portrait).
Network conditions (e.g., speed) might be different. This helps prevent the download of
unnecessarily large images for slow systems.
To specify multiple images to deal with the above situations, the <img> element is used with the src
and srcset attributes, along with the x descriptor. Figure 6.7 shows how this is done.

FIGURE 6.7 Specifying responsive images for device-pixel-ratio use case.

In the example, the browser selects any of the image sources specified in the src- set attribute, using the
specified pixel density descriptors (l.5x and 2x), also known as display density descriptors. Essentially,
on displays with 1.5 device pixels per CSS pixel, the image with l.5x pixel density is used, and on those
with 2 device pixels per CSS pixel, the image with 2x pixel density is used. This means that browsers on
devices with high-PPI (pixels per inch) screens select a high-resolution image (i.e., one with l.5x or 2x)
and other browsers select a normal (lx) image. Where no x descriptor is specified, it is assumed to be lx.
If a browser does not support the srcset attribute, it uses the image source specified in the src attribute as
fallback. Newer browsers that support srcset attribute usually use the source as one of the options and use
it as if specified with a lx descriptor. How x descriptors work in relation to image dimensions is that if
the normal-resolution image is 400 x 268 and lx, then the image specified with l.5x should be 600 x 402
and the image with 2x should be 800 x 536. Notice that the naming of the image files matches the x
descriptors’ values. This is only good practice to avoid confusion and does not affect anything.

CHALLENGE 6.8
Implement the example and vary the width of the browser to see the behavior of the image.
 CHALLENGE 6.9
If the dimensions of an image that you want to use with lx descriptor are 500 x 325 px, what should
be the dimensions for the l. 5x version?

6.3.1.4.2 Specifying for Different Viewport Sizes

Providing multiple images for different viewport sizes is necessary in situations where different users
might have devices that have different viewport widths. For example, a banner might be required to span
the width of the viewport, whatever the size of the viewport, or an image might need to be sized to fit the
width of differently sized columns. To specify responsive images to deal with these situations, the <img>
element is used with the src, srcset, and sizes attributes, together with the w (width) descriptor. Figure 6.8
shows how this is done.
In the example, the sizes attribute specifies that image should take up 100% of the width of the
viewport. The srcset attribute provides the image sources from which to choose, along with their width
descriptors (i.e., widths), and the src attribute specifies the fallback image when none of the options are
suitable. The browser uses this information and various other factors to determine the best image source
to select, and the selected image is displayed and scaled up or down to fit the full width of the viewport.

FIGURE 6.8 Specifying responsive images for viewport-size-based use case.

CHALLENGE 6.10
Ensuring that you have created the necessary versions (shown in the example) of the same image,
implement the example and experiment with the width of the browser. Also, experiment with the
value of the sizes attribute to see the effect.

6.3.1.4.2.1 Specifying for Different Viewport Sizes Using Media Condition

Figure 6.9 shows how media condition is used to specify the viewport widths at which different images
should be used. These specified widths are called image breakpoints and are different from the
breakpoints for responsive layouts, discussed later in Chapter 21.
In the example, the sizes attribute specifies that if the browser window’s width is 480 CSS pixels or
less to make image take up 100% of the viewport width; if it is not, but is 800 CSS pixels or less, to make
image take up 70%; and if it is neither of the two (i.e., if it is wider than 800px), to make image take up a
width equal to the value specified by the last item, which is 600px. When a media condition is true, the
browser uses the associated rendered size (i.e., 100 or 70 vw) and the width descriptors in the srcset
attribute to determine which image source to select. The selected image is then scaled up or down to
occupy the specified percentage of the viewport. In basic terms, the code says that the wider the width of
the browser, the less the percentage of it that should be taken up by the image.

FIGURE 6.9 Specifying responsive images for viewport-size-based use case, using media condition.

NOTE: Using CSS to calculate width

It is worth noting that image width can be specified using the CSS calc() function, which lets the
browser calculate it dynamically, based on viewport width. The function is discussed more fully
in .

NOTE: Responsive image breakpoints generators

It may be useful to know that there are free tools on the Web for determining breakpoints for
responsive images. An example is responsivebreakpoints.com, which allows you to upload a
file, from which breakpoints are determined and the generated responsive images and markup are
provided for download. Again, more about breakpoints is discussed in Chapter 21.

CHALLENGE 6.11
Try out the example by using the images that you used in the previous challenge and experiment with
the width of the browser to see the effects of the media conditions. Also, experiment with the values
of the sizes attribute to see the effect.

6.3.1.4.3 Specifying for Different Image

Providing multiple images that have varying content is necessary in situations where different users might
want to change the content or aspect ratio of an image to ensure that it is displayed in the best way, based
on the size of a page or a screen. For example, the same image can be shown full size on large screens,
showing everything contained in it, or it can be zoomed in and cropped on smaller screens to show only
important parts. Providing multiple images for purposes such as these is known as art direction. To
specify responsive images to solve such use case, the <picture> element and the <source> element,
together with the media attribute, are used. Figure 6.10 shows how this can be achieved.
FIGURE 6.10 Specifying responsive images for image-content-based use case.

In the example, the browser selects the first <source> element and evaluates the condition in the media
attribute. If it is true, it chooses the image source in the corresponding srcset attribute. If the condition is
false, the browser goes to the next <source> element and does the same thing. If all the conditions in the
<source> elements are false, the image source in the <img> element is used. This means that if the
browser’s width is 720 px or more, “images/yacht-fullshot .jpg” is selected; if the width is 512 px or
more, “images/yacht-midshot.jp< “ is selected; otherwise, “images/yacht-closeshot.jpg” is selected.
Notice that the dimensions of the images are not specified. They need to be specified, so that the
browser can allocate space for the images before they are downloaded and so prevent multiple reflowing
of layout during page rendering. To provide the dimensions, CSS properties and CSS media queries (or
media conditions) are used, and how to do this is explained in Chapter 15. Also, to provide the
dimensions for old browsers that do not support the <picture> element, the width and height attributes can
also be used on the <img> element.

CHALLENGE 6.12
Try out the example. To do this, open a full-shot image in an image editor program such as
Photoshop, then scale and crop it accordingly to produce the mid-shot and close-shot images, and
use them as in the code.

6.3.1.4.3.1 Specifying for Different Image and Device Pixel Ratios

It is possible to have situations where, in addition to solving for differences in image content, there is the
need to solve for device pixel ratio. In such cases, images provided in different widths are also provided
in different pixel densities. Figure 6.11 shows an example of how this is done.
The <source> element in the example says that if the browser window’s width is 1024px or wider, to
use one of the image sources in the srcset attribute used on it, based on the screen pixel density and other
factors the browser deems relevant. This means that the high-resolution images (i.e., those with 2x and
3x) are used for high-resolution screens and the normal-resolution images are used for standard-
resolution screens. If the width of the browser window is less than 1024 px, one of the image sources
specified in the <img> element is used. Again, the high-resolution images are used for high-resolution
screens and the normal-resolution images are used for standard-resolution screens.
FIGURE 6.11 Specifying responsive images for content and pixel ratio use case.

CHALLENGE 6.13
Assuming that you want to display a 640 x 480 image named “large-field.jpg” on screens that are
1024 CSS pixels wide or more and a smaller 320 x 240 image named “small-field.jpg” on screens
that are 1023 CSS pixels wide or less, write an HTML code to implement this.

6.3.1.4.3.4 Specifying for Different Image File Formats

When the browsers of different users are likely to support different image file formats, it might be
necessary to provide images in multiple file formats. You might, for example, want to offer a not-so-
popular format that is smaller in file size and has better quality (in case a user’s browser supports it) and
a more popular format that has a poorer quality. This is done using the type attribute. Figure 6.12 shows
an example of how this is done.
In the example, each srcset attribute specifies an image source and the type attribute specifies its MIME
type. The browser goes through each <source> element and selects the first one that specifies an image
whose format it supports. If it supports none of them, it selects the format specified in the <img> element.
Notice how the <figure> and <figcaption> elements are used. They have the same effect as in when
specifying a single image, such as shown earlier in Figure 6.6.

FIGURE 6.12 Specifying responsive images for image-format-based use case.

CHALLENGE 6.14
Would the example work correctly if the <picture> element is not used and why?
6.3.2 <canvas>...</canvas>
The <canvas> element allows you to draw graphics on the fly. This enables the creation of dynamic
images, such as the ones necessary in games, generation of graphs, and other images in real time. The
attributes that it supports are width and height. Figure 6.13 shows how it is used. The example creates a
canvas that is 150 x 150 pixels in size and has a unique identification of “oneCanvas.” The fallback
statement is displayed if a browser does not support the element. Note that because the element is just a
container element, it does not display anything on its own, so the code does not display anything. How it
is combined with JavaScript to display images is discussed in Chapter 22.

6.3.3 <svg>...</svg>
The <svg> element makes it possible to add to a Web page a type of image known as vector image
(discussed more fully later in this chapter), which is created using coordinates. The element is useful for
creating basic images on the fly but requires the understanding of a different type of markup language
called SVG, which is beyond the scope of this book. Figure 6.14 shows how it is placed in an HTML
document, and Figure 6.15 depicts the result. In the example, the SVG <svg> element defines the image,
the width and height attributes define the size, and the SVG <rect> elements define the rectangles and their
sizes.

FIGURE 6.13 Example usage of the <canvas> element.

FIGURE 6.14 Example usage of the <svg> element.

FIGURE 6.15 The result of Figure 6.14.

6.3.4 <map>...</map> and <area>...</area>

As mentioned earlier, the <map> and <area> elements are combined with the <img> element to create
image mapping. To be able to use these elements to create image maps, they need to be combined with
various attributes. Table 6.3 lists them and their functions.
Image mapping has many applications. It is especially useful for providing information about different
areas represented on a geographical map that would be impractical to put on the map. Essentially, an
image map enables geometric areas placed on an image to be associated with hyperlinks. Creation of an
image map involves the following:
1. Declaring and naming of map, using the <map> element with the name attribute.
2. Creating the hotspot regions, using the <area> element with the shape and coords attributes.
The coordinates of shapes are typically difficult to work out. However, there are now various
tools on the Web for doing this.
TABLE 6.3
Attributes Used in Image Mapping
Attribute Function
name Specifies a unique name for element.
href Specifies the URL (address) of the destination of a link.
shape Defines the type of shape to be created in an image map. coords Defines the x-y coordinates for the shape to be created.
usemap Used with the <img> element to specify the name of the image map to use with an image to produce an image map.
A search for “image mapping” should reveal some of them. They allow an image to be uploaded and
hotspots to be drawn on it, after which the x-y coordinates are generated, based on the top-left corner of
the image being 0,0. Some also generate the image-map HTML code.
3. Linking of the hotspots to the desired destinations (files), using the href attribute.
4. Associating the map with an image containing areas and labels that correspond to the hotspots,
using the usemap attribute. This, in principle, is like superimposing the hotspot shapes on the
image.
Figure 6.16 gives a rough illustration of the components of an image map, and Figure 6.17 shows part
of the code for implementing an image map.
FIGURE 6.16 Map of hotspot shapes (left) and the image (right) with which it is combined to produce a clickable image.

FIGURE 6.17 Example usage of image-mapping elements.

In the example, the first <area> element creates a hotspot shape of the London region, which when
clicked takes users to another page that provides information about the region. The second <area> element
does the same for the Northeast region, and all the other regions (i.e., hotspot shapes) are created in the
same way, all of which are enclosed within the <map> element. In the coords attributes, the first two
numbers specify the x-y coordinates of the first point of the shape being created, and the next two numbers
specify the x-y coordinates of the second point, and so on.

NOTE: The <object>.„</object> element

The <object> element, too, can be used for adding images and image mapping. For example, the
line <img src=“images/yacht.jpg” alt=“A yacht race”> can be written as:
<object data=“images/yacht.jpg” type=“image/jpeg”> </object>
The line <img src=“england _ regions.jpg” width=“340”
height=“790” alt=“Regions of England” usemap=“#picture”> in Figure 6.13 can be written as:
<object data=“england _ regions.jpg” type=“image/jpeg” width=“640” height=“790”
 usemap=“#picture”>Regions of England</object>
The element can also be used to add dynamic media objects, such as video and audio, as shown in
Chapter 7.

NOTE: Types of image mapping

There are two types of image mapping: client-side and server-side image mapping. Client-side
image mapping is the one described here and the one that is recommended, for performance
reasons. In client-side image mapping, when a hotspot is clicked, it is the Web client that deals
with it. In contrast, in server-side image mapping, coordinates of the point clicked on an image by
the user are sent to the server for the request to be dealt with, which can result in extra work for
the server and the slowing of browsing.

NOTE: Image map accessibility

To ensure the accessibility of an image map, alternative text should be included for the entire map
to describe the overall context for the set of links and for each clickable area to describe the
destination of the link or purpose. Notice how this is done in the example.

CHALLENGE 6.15
Using an online image map generator to generate the necessary coordinates, create an image map that
comprises two circular hotspots on an image of your choice, so that when each is clicked, the user is
taken to different sites. Also, apart from the type of application shown in the example, how else can
you use image mapping in Web design?

6.4 Document Embedding

In addition to allowing linking to other Web pages, HTML5 allows another Web page to be displayed
inside a Web page and browsed independently. The element used for achieving this is the <iframe>
element.

6.4.1 <iframe>...</iframe>
The <iframe> element is an inline element that allows content to be embedded in a page and interacted
with by the user in various ways. Embedding content in this way is useful for embedding interactive
applications, such as Google map. Commonly supported attributes are listed in Table 6.4. Figure 6.18
shows how it is used to embed interactive Google map, and Figure 6.19 depicts the result.
TABLE 6.4
The HTML5 Attributes for the <iframe> Element
FIGURE 6.18 Example usage of the <iframe> element.
FIGURE 6.19 The result of Figure 6.18.

Obtaining the value for the src attribute required going to https://maps.google.co.uk and searching for
London. Next, when the map for London was displayed, the three- line menu icon at the top-left corner of
the map was clicked to display a drop-down list, from which “Share or embed map” was chosen. Next, in
the dialog that appeared, the “Embed map” option was chosen and the code for embedding the map was
copied and used, as shown in the example. Note that the code generated by the site, as of time of writing,
has some attributes that are no longer supported by the <iframe> element and should therefore be
removed.

CHALLENGE 6.16
Write an HTML code for embedding the Google map for where you are. Also, in what type of
application would you use a map like this?

6.5 Types of Images

Being aware of the makeup of the types of images used in Web design can be useful in understanding why
they have the properties that determine how they are used. The images shown so far are known as two-
dimensional images (2D images). They are 2D images because they are represented in only two
dimensions, width and height. They are the most used images in Web design and fall into two categories,
bitmapped and vector images.

6.5.1 Bitmapped Images

Bitmapped images, also known as raster images, are made up of tiny dots called pixels. In Web design,
you might refer to these pixels as CSS pixels, as mentioned earlier. The image of the “H” in Figure 6.20
gives an illustration. It is made up of both the white background and the “H,” which are inseparable.

FIGURE 6.20 A graphical illustration of a bitmapped image.

Representing images in pixels inevitably produces properties that can be used to describe bitmapped
images. These properties revolve around how many pixels are there in an image or specific area of it.
They influence image quality and therefore have design implications. The three main properties are image
resolution, pixels per unit length, and color depth.

6.5.1.1 Image Resolution

Image resolution describes how many pixels an image has, and it is specified in two ways. One is as pixel
dimensions, and the other is as megapixels. Pixel dimensions are the width and height of an image in
pixels. For example, 800 x 600 means that an image has width and height of 800 and 600 pixels,
respectively. The term megapixels, on the other hand, describes the total number of pixels in an image
and is expressed in megapixels. It is typically used for specifying the maximum resolution that a digital
camera can produce and is the product of the width and the height of an image, in pixels. For example, a
black and white image with a pixel dimension of 800 x 600 is about 0.48 megapixels (i.e., 480,000
pixels). A higher image resolution produces a bigger image when displayed or printed. Figure 6.21 shows
an illustration. The design implication is that images that are too big for the screen, even when intended to
be the only element on the screen or page; this often compels vertical and horizontal scrolling in order to
view all parts of the image, essentially compromising user experience.
Pixel dimension should be determined when creating an image in order to prevent significant resizing
later. Failing this, the usual practice is to, at least, create images of larger pixel dimensions than needed
and then reduce and sharpen them in a graphics program, if necessary. Making small pixel dimensions
bigger is much like trying to spread fewer than enough pixels over a larger area, which the computer
responds to by, for example, creating “fake pixels,” based on the values of original pixels, to make up for
missing ones, resulting in a poorly defined image. This technique of using “fake pixels,” or pixels with
estimated values, is known as image interpolation, and there are various ways of achieving it. Figure
6.22 demonstrates the effects of image enlargement. The general practice is to not reduce size to the point
where an image is so small that important details are no longer discernible or, in the case of enlargement,
to gradually increase size (e.g., by 10% each time) to the point where an image starts getting blocky or
blurry.
FIGURE 6.21 The same image with different pixel dimensions displayed in the same Web browser on a 1152 x 864 screen. (Image from
http://www.freeimages.co.uk.)

FIGURE 6.22 The effects of significant enlargement on image quality.

6.5.1.1.1 About Image Resizing

If images must be resized, then necessary things need to be done to preserve as much of the original
characteristics as possible. There are a number of ways to achieve this. A graphics program, HTML, or
CSS may be used to specify the desired size. The image may also be cropped. When an image is sized by
specifying new dimensions, a possible by-product that holds relevance in image display quality is image
aspect ratio (IAR), which is the width of an image divided by its height, or the ratio of width to height.
The aspect ratio of an image is established from the starting width and height when the image is created,
and width and height are specified in various ways, depending on how the image is created. For an image
created with a graphics program, width and height are among the parameters specified for a new
document. For a scanned image, they are the dimensions of the document that is scanned, but they may also
be specified. For example, if the size of the document scanned or the dimensions set is 5 x 3 inch and
scanning resolution is 300 pixels per inch (ppi), then the aspect ratio of the image created is:
= (width x resolution):(height x resolution) =
(5 x 300):(3 x 300) = 1500:300 = 5:3
The aspect ratio of an image must be retained; otherwise, distortion can occur, as shown in Figure 6.23.
In contrast, when images are cropped, there is no aspect ratio problem, because a new aspect ratio is
created when an image is cropped, which means that cropping can also be used to change an image’s
aspect ratio. Image cropping is the trimming off of the edges of an image, and it is typically done in a
graphics editor. The only issue with cropping is that it may adversely reduce the scope of an image,
because some important details at the edges that complement the main elements in the image may be
removed.
FIGURE 6.23 An original image and images produced by resizing it incorrectly.

However, cropping could also be used deliberately for this purpose in order to remove unwanted
details from an image and better focus on the important elements. In such a case, an image may first be
enlarged and then cropped, or vice versa. Figure 6.24 shows an example. Notice the difference in
presence, focus, and aspect ratio.

FIGURE 6.24 Enlarging and cropping an image to focus on a specific part. (Image from http://www.freeimages.co.uk.)

6.5.1.2 Pixels per Unit Length

Pixels per unit length (or pixel density) describes the number of pixels per unit length and is also,
confusingly enough, referred to as resolution in some context. In Englishspeaking countries, the pixels per
unit length most commonly used is pixels per inch (ppi), followed by pixels per centimeters (ppcm).
Although it is a measure more commonly used to describe the quality of a display device, it is actually a
more definite indicator of quality in bitmapped images than in pixel dimensions or megapixels. For
example, if you are told that an image has a resolution of 72 ppi, this immediately conveys the sense of
how densely packed pixels are in the image and therefore what quality to expect. On the other hand, if you
are told that an image has a resolution of 398 x 265 pixels, or 0.10 megapixels, there is no indication of
pixel density. In order for these values to make more sense in terms of quality, it would be necessary to
know the physical dimensions of the image, so as to judge how densely packed the pixels are and
therefore how much details are represented in the image.
Like aspect ratio, the ppi value of an image is determined at the point of creation. It affects the
pixel dimensions of the image and the number of pixels that the image contains. For example, a 4 x 6 inch
photograph scanned at 100 ppi will result in a bitmapped image that has a ppi value of 100, pixel
dimensions of 400 x 600, and a total pixel number of 240,000 (i.e., 400 x 600). On the other hand, the
same photograph scanned at 300 ppi will produce an image that has a 300 ppi value and a total pixel
number of 2,160,000 (i.e., 1200 x 1800). The ppi specified when an image is created is usually saved
with it. This is why it is sometimes referred to as embedded resolution. Generally, the choice of ppi
depends on how an image will be outputted, since ppi affects image display and printing differently.

6.5.1.2.1 PPI and Displayed Image Quality

Incidentally, when an image is intended for display on a monitor screen, ppi affects quality only
indirectly. This is because monitors do not display images in pixels per inch but based on pixel
dimensions; that is, a 300 x 400 pixel image with 100 ppi, for example, is displayed on a standard-
resolution screen with 300 pixels across and 400 pixels down. This means that no matter what ppi is used
to create an image, it will not necessarily affect its display quality. To demonstrate, a 5 x 4 inch document
scanned at 72 ppi and 300 ppi will produce images with pixel dimensions of 360 x 288 (i.e., [72 x 5] x
[72 x 4]) and 1500 x 1200, respectively, which will be different in size when displayed, as shown in
Figure 6.25, in which the two images are displayed together in a Web browser. This basically means that
when an image is displayed on the screen, ppi only affects the size at which it is displayed, not the quality.
Naturally, zooming can then be used to increase or decrease the size of the image.

FIGURE 6.25 The relationship between the images of the same document scanned at 72 and 300 ppi.

So, what ppi should be used when creating images for Web design? Although computers and other
devices used to access websites generally have ppi that is higher than 72 ppi, there is no logical reason to
produce images intended for screen display at anything more than 72 ppi, since higher ppi will only result
in larger files. However, it is a different matter when images are intended to be printed.

6.5.1.2.2 PPI and Printed Image Quality

In contrast to its effects on displayed images, ppi affects the quality of printed images directly. So,
typically, what looks good on screen may not look good when printed. This is because printers generally
print based on dots per inch (dpi) and also at a much higher resolution than computer monitors. Modern
printers, for example, commonly have a resolution of 600 dpi and higher. This means that an image needs
to be 600 ppi or more to ensure good quality when printed. If the resolution of an image is much lower
than a printer’s resolution (say a 72 ppi image is outputted on a 600 dpi printer), then the printed image
will be either too small in size or not detailed enough to be considered good quality.
Generally, higher ppi values ensure better-quality printed images with finer details and subtler color
transitions. The implication of this is that if images are intended to be printed, then it is important to
ensure that they are produced using high enough ppi/dpi values. It is also important to know that a low-
quality (low-ppi) image cannot be improved by printing it at a higher dpi. Increasing print resolution
will only make pixels larger, resulting in pixelation. Likewise, once an image is created, increasing its
ppi in a graphics program will not necessarily improve its quality. This means that where you want an
image to be available both for screen viewing and printing, then separate versions should be provided.

CHALLENGE 6.17
What will be the dimensions of a 3000 x 2000 pixels image on the screen when displayed on a 72
ppi monitor?

6.5.1.3 Color Depth

To better understand the meaning of color depth, it is useful to know how color is produced on a device
screen. A color display screen is made up of tiny dots called pixels, each of which can be made to
produce any of many colors at a time by mixing three different colors in varying degrees. Each color
component is represented with a number of bits, and color depth (also known as bit depth or pixel
depth) is the total number of bits used to represent the three color components. Color depth is also
referred to as bits per pixel (bpp), even bytes per pixel (bpp), and it determines the number of distinct
colors available to use for a pixel as well as the color quality of an image. For example, 24-bit color
depth (known as true color), which provides 16,777,216 colors theoretically produces better color
quality than 8-bit color depth, which provides 256 colors. In theory, the higher the color depth, the more
accurately the colors of an image can be represented, and therefore, the more realistically rich colors can
be represented. Of course, the file size is also bigger. Figure 6.26 shows the same photograph represented
with different color depths. Notice the depreciation in color quality and the posteriza- tion effect (i.e.,
the banding of colors in different areas) as color depth drops to 4-bit and 1-bit. Although, in theory, 24-bit
produces better quality than 8-bit, in reality, the difference is usually not visible.
FIGURE 6.26 An illustration of the effects of color depth.

Some technologies used for creating images, such as scanners, offer higher color depths than 24-bit,
such as 32-bit and 48-bit, but these are unlikely to produce any discernable benefits, since humans are
capable of differentiating only between about 10 million colors, most, if not all, of which are covered by
24-bit color depth. Also, humans are not very good at distinguishing between close variations of the same
color, unless they are placed close to each other. However, higher color depths can be useful, because the
extra bits can be used for other functions. For example, in 32-bit color depth, 8 bits are used, each for the
red, green, and blue color components (or channels) and the extra 8 bits for an alpha channel (or
transparency channel). An alpha channel specifies which parts of an image should be transparent and by
how much. Its value ranges from 0 to 255. When it is set to 0, the specified area of an image is fully
transparent, and when set to 255, it is fully opaque. The channel is usually controlled with the opacity
feature in graphics-editing programs and is usually specified as a value between 0% and 100% or
between 0 and 1.0. The alpha channel has an important role in the production of images.

6.5.2 Vector Images

Unlike bitmapped images, vector images are not made up of pixels. Rather, they are made up of
geometric objects (known as geometric primitives), such as points, lines, curves, and shapes, each of
which can be defined in terms of a series of connecting points and/or mathematical expressions. A line,
for example, is produced by connecting two points and a curve is produced by a mathematical equation.
Figure 6.27 shows an illustration of how an “H” might be represented.
FIGURE 6.27 An illustration of the principle of vector graphic representation.

Looking at the figure, it is easy to imagine that a more complex vector graphic would comprise many
more points, as shown in Figure 6.28. The figure shows a relatively complex vector graphic, which is
actually one object created by connecting many points (node points).

FIGURE 6.28 A demonstration of the makeup of a vector image.

Storing only the coordinates of the objects and a few other properties that make up vector images
means that vector image files are seldom large in size, making the method an effective way of producing
good-quality digital images that are small in size. Also, because they are stored as a series of coordinates,
they can be scaled, translated, and deformed easily by simply manipulating the node points. This means
that they are very scalable (i.e., they can be enlarged without loss of image quality). Furthermore, their
quality is independent of display device resolution, meaning that they can look good on displays of any
resolution. Also, being small in size particularly makes vector images “Internet friendly,” in that they
download fast. Figure 6.29 shows examples of vector images. Image “A” is made up of many curves and
color fills, and image “B” is a good example of how vector graphics can be used to create complex,
highly detailed, and artistic graphics. The image, which is a digital reproduction of Alponse Mucha’s F.
Champenois Imprimeur-Editeur, is made up of numerous curves, shapes, shades, and effects, using a tool
called Gradient Mesh, which allows the easy manipulation of curves.
Some of the performance benefits of vector images are reduced by the fact that they still typically have
to be saved in bitmapped file formats in order to use them on Web pages. An alternative to doing this is to
save them in a vector-based format, such as SVG, mentioned earlier. SVG is both a vector graphics
language and a file format, such that when a vector graphic is saved, it is also saved in the language,
which a browser is then able to translate into a vector image and display. However, the use of SVG is not
yet widespread, as of time of writing.
Another alternative to saving vector images as bitmapped is to save them in Flash file format, SWF,
which is another vector-based format. However, a Web browser needs a plug-in in order to be able to
display a vector graphic saved in the format. Furthermore, the popularity of the format has decreased, and
this is unlikely to change, going into the future.

FIGURE 6.29 Some 2D vector graphics. (a) is from http://www.free-clip-art.com, and (b) is by Yukio Miyamoto. (Image from
http://www.bekkoame.ne.jp/~yukio-m/intro/index.html.)

NOTE: Vector or raster?

Vector images are usually ideal for geometric shapes (e.g., icons, logos, and
illustrations).
Raster image formats are suitable for complex scenes, such as photographic image, where
there are a lot of shapes and details.

6.5.3 Image File Formats and Image File Size

Irrespective of how images are created, be it via photography, scanning, or graphics programs, they are
stored as image files in specific formats and there many image file formats. These formats provide
different features and are suitable for different types of images. While some formats are designed to store
all the data that make up an image, others are capable of making an image file size smaller. This is
necessary because image file can be large, especially bitmapped image files. The technique of reducing
file size in computing is known as data compression. Some formats are designed to reduce file size
without affecting the quality of what the file produces. This is known as lossless compression. Other
formats are designed to allow the reduction of quality, if necessary. This is known as lossy compression.
Image file formats combine both techniques in various ways to achieve their specific characteristics, and
graphics production programs typically allow compression parameters to be set for any format that offers
compression. Image file formats also offer other features, such as transparency, that make them suitable
for different situations. Table 6.5 lists some formats used on the Web, some of which are more commonly
used than others.
TABLE 6.5
Main Properties of the Image File Formats

NOTE: Most commonly used formats and their applications

The HTML standard does not specify the image file formats that are supported, so different
browsers support different formats. The most commonly used formats that are also supported by
all major browsers are JPEG, GIF, and PNG.
JPEG is used for photographs and images that have many different colors and shades,
even black and white photographs.
GIF is used for simple illustrations, images with limited number of colors or blocks of
colors, such as logos and icons that use flat colors (i.e., colors with no, for example,
gradient, highlighting, and depth), and images containing text. It is not well suited for
images with more than 256 colors.
PNG is used for similar purposes as GIF but has wider applications. For example, it can
also be used for photographs; however, it produces larger files than JPEG.
Information on browser support for other formats listed in Table 6.5 can be found on various
websites dedicated to the topic, such as caniuse.com.

Given that high-quality images produce very large files, it is often necessary to balance file size
against quality when producing images for Web design, because large files can cause performance
problems, such as long download time. It is no good, for example, if images are of very high quality and
pages take frustratingly long times to display, as most users will probably not be prepared to wait.
Similarly, it is no good to compress an image to the point that degradation is visible, as this might
compromise the information being communicated and/or user experience. Figure 6.30 shows the same
image with different compression levels and their effect on quality and file size. Notice the visible
degradation in 75% and 99% compressions.
FIGURE 6.30 An illustration of the effects of compression on quality and file size. (Image from http://www.freeimages.co.uk.)

To help with size-quality balancing, image production programs, such as Photoshop, typically provide
information about the size of the file generated by an image and also how long it will take to transmit the
file over a range of Internet connection speeds. However, while this information is readily available
when using these programs, it can be useful to know how to calculate image file size and transmission
time for when, for example, you are doing initial designing on paper and/ or have no access to a suitable
program. After all, just because we have calculators does not mean that we should not know how to add,
in case calculators are not available.

6.5.5 Calculating File Size Generated from Scanned Documents

An A4 (i.e., 8.5 x 11 inches) document scanned at 300 ppi and 24-bit color depth will generate an image
file size of 25.25 MB. This can be calculated by multiplying the area of the document in square inches by
the number of pixels per square inch to get the total number of pixels in the image, multiplying by the
number of bits per pixel to get the total number of bits, and then dividing by 8 to get the number of bytes,
thus:
Document Image File Size = ( ( height width ) × P P I 2 × color depth
Using the formula for the above example gives:
File size = ( ( 8.5 × 11 ) × ( 300 × 300 ) × 24 ) = 25 , 245 , 000 bytes = 25 , 245 , 000 / 1000 = 25 , 245
KB = 25 , 245 / 1000 = 25.25 MB

CHALLENGE 6.18
Assuming that you want to include a 4 x 5 inch image in an application and, because the image is
also going to be printed, you need to scan the image at 600 ppi and 24-bit color depth, calculate the
possible size of the image.
6.5.5 Calculating File Size Generated from Digital Camera
An image captured with a digital camera with pixel dimensions of 640 x 480 px at 24-bit color depth
produces a file size of 0.92 MB. This is calculated by multiplying the total number of pixels by the
number of bits per pixel to get the total number of bits and then dividing by 8 to get the number of bytes,
thus:
Document Image File Size = ( ( height × width ) × PPI 2 × color depth ) / 8 Image File Size = ( pixel
dimensions × color depth ) / 8
Using the formula gives:
Image File Size = ( ( 640 × 480 ) × 24 ) / 8 = 921 , 600 bytes = 921 , 600 / 1000 = 921.60 KB = 921.60 /
1000 = 0.92 MB

CHALLENGE 6.19
What is the file size, in gigabytes, produced by a digital camera when you take a photograph with
1600 x 1200 px dimension at 32-bit color depth?

6.5.6 Calculating File Transmission Time

Given an Internet connection of 56.6 kilobits per second (kbps), a file that is 22.25 MB in size will take
about 59 min to transmit. This can be calculated by dividing the size of the file by connection or
transmission speed. Both must be in the same unit, such as bits, kilobits, bytes, and megabytes. The speed
of 56.6 kbps is the slowest that people use to connect to the Internet. The following formula can be used to
calculate transmission time:
Transmission Time = size of file / lowest transmission speed
Before using the formula, all values are converted to the same unit. In this case, file size is converted to
the unit of the transmission speed, that is, kilobits. To do this, 25.25 MB is simply multiplied by 1000
twice to convert it to bytes, then multiplied by 8 to convert to bits, and then divided by 1000 to convert to
kilobits. This is written as (25.25 x 1000 x 1000 x 8)/1000, which gives 202,000 kilobits.
Using the formula gives:
Transmission Time = 202 , 000 kilobits / 56.6 kbps = 3568.91 s = ( 3568.91 / 60 ) min = 59.48 min

CHALLENGE 6.20
A 20.25 MB image is embedded in Web page. Assuming that the size of the other contents of the page
is insignificant, determine how long it will take to transmit the page over 2 Mbps and 100 kbps
connections, respectively.

6.6 Guidelines for Effective Use of Images

The most useful function of images is their ability to instantly and effectively communicate either single or
collective visual information. For example, when we look at a picture, most of the time, we immediately
get an impression of what it is. Even when we cannot immediately figure out what the picture says, the
time it takes to do this is often much less than the time it would have taken if the details of the picture
were described in text. Graphics are also quite versatile, in that they can be used to communicate various
types of information. They can be used to communicate reality or a concept, to create specific moods,
or to simply beautify. However, in order to achieve these goals, images need to be used correctly.

6.6.1 Decorative Images

The use of graphics for decorative purposes should be minimized, as they can place unnecessary
burden on the download time of a page and are not appreciated by most users, anyway. Studies, for
example, by the NN Group, which specializes in user experience, have shown that users generally pay
attention to only those images that carry relevant information, such as photos of real people (not stock
photos of models) and products, while ignoring decorative graphics. In particular, large graphics should
not be used for decorative purposes, because whatever benefits they offer are likely outweighed by the
performance problems that they are likely to cause.
The most common decorative use of images is as background. When an image is used for
background, it should match the mood or context of a design; otherwise, it may create conflict and
distraction. For example, a background image consisting of different-color balloons suits a page
providing information about a party than one that is providing information about a funeral. Even when
background image is relevant and complements a design theme, it should not be so overwhelming that it
gets in the way of the content being delivered. This is unprofessional and particularly unacceptable in
learning applications, given that focus is especially required during learning. To prevent background
graphics from interfering with the content of a page, they should be subdued or toned down. Figure 6.31
shows some examples.

FIGURE 6.31 A demonstration of the effect of overwhelming background image and a possible solution. (Image from
http://www.freeimages.co.uk.)

Another common technique used to prevent background image from overwhelming content is to place
the content in a plain color box on the background, as shown in Figure 6.32. However, this can look a bit
messy, confusing, and distracting sometimes, especially when users have to scroll through the content.
Also, the background can keep attracting the eyes from the periphery.
FIGURE 6.32 Preventing background from compromising legibility.

6.6.2 Large Images

The automatic display of large images should be avoided, even when they are relevant, because they can
take too long to download and display completely. Instead, use thumbnails to introduce the images. If
users then want to see the larger versions, they can click as required. For a thumbnail to be easy to be
interpreted and therefore be effective for making a choice, it needs to contain useful information.
However, this can sometimes be difficult to achieve, because neither of the two methods commonly used
for creating thumbnails (i.e., scaling and cropping) produces completely satisfactory result. Scaling
produces the smaller version of an entire picture but may be too crowded to convey clear and useful
meaning, while cropping produces a clearer and more detailed image but with too many useful parts
cropped off. The recommended approach, called relevance- enhanced image reduction, is to combine
the two methods, so that the thumbnail is clear and also includes enough contexts to be meaningful. A
more specific recommendation by Jakob Nielsen is that in order to produce a thumbnail that is 10% of the
original image, the image is first cropped to 32% of its original size and then the result is scaled down to
32% of itself. So, assuming that the original image is 100 x 100 px, then cropping it to 32% gives 32 x 32
px (i.e., [32/100]*100 px), and scaling this down to 32% of itself gives an image that is roughly 10 x 10
px (i.e., [32/100]*32 px).

6.6.3 Images with Text

Where an image is used to support text or text is used to support an image, it is essential, especially in
learning materials where comprehension is critical, that they are closely synchronized, so as to minimize
the load on short-term memory. This prevents people from doing extra cognitive work to connect the two,
as would be the case when they are far apart. In Figure 6.33, for example, the illustration on the left
requires someone to look at a number on the image and then search out the matching item on the list
underneath while holding the number in short-term memory, making it harder to construct the imagery that
is vital for comprehension. However, the illustration on the right simply requires one glance, and because
all the materials are together, constructing the imagery is easier.
FIGURE 6.33 Two ways of using images with text.

When it is not feasible to place annotations on an image, connecting one element to the other directly,
using something like a pointing line, as illustrated in Figure 6.34, can provide a reasonable compromise.

FIGURE 6.34 Another way of annotating an image. (Image from Flagstaffotos.)

CHALLENGE 6.21
Given the guidelines provided earlier under HTML, how would you make these types of images
accessible to the visually impaired?

6.6.4 Images and Captions

Caption should be provided with every image used to present content, either underneath it or in a body of
text that is relevant to it, if used to complement a story. Figure 6.35 shows part of the photo gallery of the
website of a yearly tennis competition, in which this principle was not applied when the page was active.
A series of images were simply presented, along with navigational aid that allowed linear or nonlinear
navigation of the images. Although the images used as part of the background required no labeling, those
used for content would have benefited from a brief description placed, for example, at the bottom. This
would, no doubt, save those who did not know the player from wondering who she was and who she was
playing at that moment.
FIGURE 6.35 Example of image being delivered without a description.

NOTE: Quick image usage guidelines

When images are used on a Web page, they should:
Be of good quality (i.e., clear and with discernible details).
Be relevant.
Be instantly recognizable.
Communicate information, unless abstract and used, for example, for background.
Set the right mood.
Complement the color scheme of a design.
Not be large or too many, as this slows down the download of a page and ruins user
experience.
Fit the color palette; otherwise, the colors of an image may not be accurately rendered.

6.7 Acquiring Images for Use

There are various ways to acquire the graphics needed for a design, each of which has design situations
for which it is most suitable. However, irrespective of the method used, the principle of having them in
the right format, right pixel dimensions, and right resolution persists in order for them to be able to fit
well into the intended design. The most common acquisition methods include stock images, graphics
editors, photography, image scanning, and the use of coding.

6.7.1 Stock Images

For non-unique graphics requirements, stock images are a common option to consider. There are both free
and commercial stock images of various categories and qualities available on the Web. Some are free for
both private and commercial use, while license needs to be purchased to use some stock images
commercially or for specific purposes. A license may be for unlimited use (as in the case of royalty-free
stock images) or for just one-time use (as in the case of rights-managed stock images), or there might be
other terms involved.

6.7.2 Graphics Editors

Vector graphics editors or bitmap graphics editors maybe used to create images. Vector graphics editors
(drawing programs) allow the composition and editing of vector images, which can be saved in a variety
of vector formats, such as SVG, EPS, PDF, VML, and WMF, or in bitmapped formats. They are better for
line art or line drawing, which includes logos, sharp-edged illustrations (such as cartoons and clip arts),
logos, technical illustrations, and diagrams. Drawing skill is of course necessary. Popular programs used
among professionals include Illustrator and CorelDraw. Popular free ones include Inkscape, and these are
sufficient for beginners. Bitmap graphics editors (image editing programs) allow the painting and editing
of pictures and save them as bitmap formats, such as GIF, JPEG, PNG, and TIFF. They are most suitable
for retouching and manipulating photographs and creating photo-realistic images, which are typically
images that are made up of many slightly different colors. The most popular of these editors among
professionals is Photoshop, which has a cheaper version called Photoshop Element. Free ones include
GIMP and RawTherapee. Online editors are also available. Some are listed at the end of this chapter.

6.7.3 Photography
This is an easier method of acquiring images than drawing or painting them, in that it mostly requires
pointing a camera and capturing an image; however, taking some types of photographs requires expertise,
in using both the right camera settings and techniques. There are two main types of cameras: point-and-
shoot and digital single-lens reflex (DSLR) cameras. Point-and-shoot cameras are compact and easy to
operate.
Although mobile phone cameras are a type of point-and-shoot cameras, some may not produce images
that are as good as dedicated point-and-shoot cameras, such as in low- lighting conditions. In contrast,
DSLR cameras are larger and more complex to operate but take better pictures.
In addition to using the right settings and techniques, there is also the matter of using the right lighting
setup to get the right mood. This usually involves using a combination of lights of different intensity
placed at different angles and distances to the subject. The most common lighting scheme is three-point
lighting. Naturally, shots from a camera can also be manipulated in graphics editors to correct
imperfections or to create effects. This is certainly necessary when producing high-dynamic-range
(HDR) images. Production of HDR images typically involves combining differently exposed shots of the
same scene (sometimes known as bracketed photos) and manipulating the properties of the resulting
single image, such as color saturation, luminosity, contrast, and lighting. Bracketed photos are typically
produced using auto-exposure bracketing (AEB) in cameras to capture three or more shots in sequence,
using different exposures.
HDR images are images intended to be expressive and communicate something that is closer to what is
seen in reality, such as the blurry yet sparkling points of light that the teary eyes see when looking at an
illuminated high-contrast scene at night, something that a camera, for example, is not capable of capturing.
They are used to create this type of realism, and more, including extreme and surreal visuals and typically
high contrast and vibrancy.
6.7.4 Image Scanning
This is another easy way to acquire images; however, the images have to exist first in a physical form,
whether on paper or on any other surfaces. Image scanners are typically hand-held or flatbed. Hand-held
scanners are portable but more difficult to operate in that they are prone to shaking, which produces
poor-quality images. Flatbed scanners are fixed, and using them requires simply laying an image on their
glass surface and operating accordingly. Various image properties, such as scanning resolution (i.e., ppi)
and contrast, can be set to ensure that the desired image quality is achieved. The use of 300 ppi is
common for images intended for screen display.
Because standard image scanners do not produce good-quality images from film negatives and slides,
these are scanned using a special type of scanner. They can be as easy to use as placing a negative in a
carrier that they come with and feeding it into the scanner. Typical scanning resolution is much higher than
that for normal scanning and ranges from 3000 to 4000 ppi.

6.7.5 Web Coding Languages

Web coding languages allow some types of graphics to be created procedurally and used in ways that are
not possible with images created with non-procedural methods, in that the images are created
dynamically. This means that images can be generated and changed in real time, making them suitable, for
example, for generating graphics such as graphs, charts, and maps on the fly, based on, for example,
continually changing data supplied by users. The most commonly used Web-specific languages are
HTML, SVG, and JavaScript; however, general-purpose languages, such as C++, are also used. The main
disadvantage of using coding languages to create images is that programming skill is required and the
process can be time-consuming when complex images are involved.

6.8 Useful Info

6.8.1 Web Links
HTML specifications: w3.org/TR/html51, w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
HTML5 support testing: html5test.com
HTML tutorials (Here are just a few free tutorial sites on HTML and other Web languages):
w3.org/wiki, html5rocks.com, sitepoint.com, w3schools.com, codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Webtutorialspoint.com, whatwg.org, htmlgoodies.com,
htmldog.com, htmlcodetutorial.com, echoecho.com, learn.shayhowe.com, html.net, tizag.com, html-5-
tutorial.com, docs.webplatform.org, developers.google.com, webdesignermag.co.uk
Free images: freeimages.co.uk, freedigitalphotos.net, vecteezy.com
Placeholder images: lorempixel.com
Online graphics editors: ipiccy.com, pixlr.com, sumopaint.com
Image optimization guidelines: developers.google.com/web/fundamentals/performance
Online image optimizers: jpeg-optimizer.com, http://www.imageoptimizer.net, optimizilla.com
Responsive Image Breakpoints generator: responsivebreakpoints.com
Responsive images community group: responsiveimages.org
6.8.2 Free Software
Multiple download sites can be found for the following software by doing a search:
Image editing: GIMP (Cross Platform), Seashore (Mac), Paint.NET (Win), Pinta (Cross Platform),
Artweaver Free (Win).
Image viewing and basic editing: Zoner Photo Studio 14 FREE (Win), FastStone (Win), InfanView
(Win).
Image organization: Picasa (Cross Platform), iPhoto (Mac), Irfanview (Win). Raw image data editing:
Ufraw (Mac, Linux).
HDR imaging: Photomatix Essential (Win), Picturenaut (Win, Mac), Luminance HDR (Cross Platform),
FDRTools Basic (Win, Mac), Essential HDR Community Edition (Win), Portable Fusion (Win).
Image noise remover: Noiseware Community Edition (Win), NDNoise (Win). Mosaics generator:
AndreaMosiac (Cross Platform).
Poster printer: PosterRazor (Win, Mac).
7
Audio, Video, and Animation

7.1 Introduction
Audio, video, and animation are introduced together because they are dynamic media, which are media
that change continuously with time. These media are generally added to a Web page by using similar
principles. This chapter presents the various methods and elements used to add them to a Web page.

7.2 Learning Outcomes

After studying this chapter, you should:
Know how to add audio, video, and animation to a Web page by using suitable methods and
HTML elements.
Be aware of the most suitable file formats and codecs to use to avoid browser compatibility
problems, especially in relation to audio and video.
Know of necessary design issues and considerations involved in using audio, video, and
animation in Web design.

7.3 Delivering Dynamic Media

Dynamic media is incorporated in a Web page in the same two main ways images are, which are through
hyperlinking and embedding. When a dynamic media is linked to, the browser uses a helper application,
which is separate from a Web page, to play it, and when it is embedded, it plays within the page, typically
using a plug-in. Both delivery methods can be accomplished using HTML elements. It is also possible to
combine HTML with Flash technologies to deliver dynamic media, but this is discouraged, as the use of
Flash technologies for delivering media on the Web is all but obsolete. For this reason, how to add Flash
media objects to a Web page is not discussed in detail in this text. Tutorials on this can be found at the
website for Adobe Flash (now known as Animate CC).
Although adding dynamic media to a Web page can be as straightforward as adding a static image, an
important practical thing to know is that the result is not always predictable, as different browsers and
hardware (such as PC, Mac, iPhone and iPad) do not all support the same technologies. For example, the
newer HTML elements (i.e., <audio> and <video>) do not work in old browsers and not all media file
formats are supported by every browser. Because of these incompatibilities, delivering dynamic media
successfully on a Web page requires extra considerations in order to ensure that a media file works on as
many systems as possible. Often this means using multiple methods to deliver the same file as well as
providing the same media in different file formats. How this is done for audio, video, and animation,
using HTML, is dealt with here.

7.4 Audio
The HTML elements used to add audio to a Web page are the <a> element (used to link to audio) and the
<audio>, <embed>, or <object> element (used to embed audio).

7.4.1 Linking to Audio

The <a> element is used to link to an audio file the same way as it is used to link to any other type of file.
Figures 7.1 and 7.2 show how it is used and depict the result. Clicking the link opens a helper
application, a media player in this case, to play the specified audio file. The advantage of playing audio
with a helper application, as opposed to a plug-in, is that the audio continues to play when users navigate
to a different page.

FIGURE 7.1 Example usage of the <a> element.

FIGURE 7.2 Rendered result of Figure 7.1.

CHALLENGE 7.1
In Figure 7.1, where is the audio file located in relation to the code. Also, in what situation is linked
audio more appropriate than embedded audio?

7.4.2 Embedding Audio

In contrast to linked audio, which uses help application, embedded audio uses plug-in that is integrated
into a page. It cannot be moved, and if the user navigates away from the page to another one, it stops. As
already mentioned, the element used to embed audio is the <audio>, <embed>, or <object> element.

7.4.2.1 <audio>.. .<audio>

The <audio> element is optimized specifically for embedding audio. The specific attributes supported are
listed in Table 7.1. Figure 7.3 shows a basic use of the element, and Figure 7.4 depicts the result. The
content between the <audio> tags is the message that is displayed when a browser does not support the
<audio> element and is known as fallback content.
TABLE 7.1
Attributes for the <audio> Element
FIGURE 7.3 Example usage of the <audio> element.

FIGURE 7.4 Rendered result of Figure 7.3.

CHALLENGE 7.2
Write a code that includes the autoplay, and loop attributes to see how they work.

The <audio> element can also be combined with the <source> element to provide multiple audio sources,
from which the browser chooses the most suitable. The element is also used with other dynamic media
elements, such as <video>. The attributes that it supports are listed in Table 7.2. Figure 7.5 shows how it
is used. The code produces the same result as Figure 7.4.
TABLE 7.2
Attributes Used with the <source> Element When Adding Audio
Attribute Function
src Specifies URL of the source.
type Specifies the type of the source. It helps the browser to determine whether it can play a file before loading it. Value is a string that
identifies a valid Internet media type (or MIME type). Optional codecs parameters can also be added to specify how exactly the
source is encoded.
FIGURE 7.5 Example usage of the <audio> with the <source> element.

When the browser encounters the <audio> element in the code example, it goes through the list of
<source> elements and plays the first one that it can. If it cannot find any format that it supports, it
displays the message, if the browser supports this. Notice that the audio sources specified in the <source>
elements are the same, except for the values of the type attributes, which specify a different media type for
each source. The codecs parameters specified with the codec attribute on the first <source> element
specify the exact codec used to encode the source. A codec (derived from the two words: compressor and
decompressor) is the technology used to compress (encode) and decompress (decode) digital data file or
stream.
When specified, codecs parameters are one of the values of the type attribute and need to be in double
quotes, while all the values of the attribute are enclosed in single quotes. Specifying the parameters can
make the job of the browser easier, in that they help the browser determine whether or not it can play a
file without first having to load it. However, if parameters are used, it is important that they are correct;
otherwise, the browser will generate an error, even if it can play the specified file. On the other hand, if
the parameters are not specified, the browser will load the file as normal and discover that it supports the
file and play it. The full list of codecs parameters can be found on the Web. Table 7.3 lists some of the
commonly used codecs parameters for audio.
TABLE 7.3
Common Media Types And Codecs Parameters Used For Audio On The Web
Media File Description Extension Internet Media Type Codecs Parameters
PCM audio in WAV container .wav audio/wav 1
MP3 audio .mp3 audio/mpeg mp3
Vorbis audio in Oga/Ogg container .oga, .ogg audio/ogg vorbis
Low-complexity AAC or AAC+ audio in MP4 container .mp4, .m4a, .aac audio/mp4 mp4a.40.2

CHALLENGE 7.3
What would happen in Figure 7.5 if “sound.aac” can be found but the value of the codecs attribute
does not match its encoding? Also, what would happen if none of the audio files can be loaded?

CHALLENGE 7.4
What types of errors in a code can cause an audio file not to load?

7.4.2.2 <embed>
The <embed> element is used to embed an external application (typically a plug-in) or an interactive
content. Although it is more commonly used to embed video or animation, it can also be used to embed
audio. The attributes that it supports are listed in Table 7.4. Figures 7.6 and 7.7 show how the element is
used and depict the result.
TABLE 7.4
Attributes Used with the <embed> Element
Attribute Function
src Specifies the URL for resource.
type Specifies the Internet media type of source.
width Specifies the length of the displayed content (e.g., media player).
height Specifies the height of the displayed content (e.g., media player).

FIGURE 7.6 Example usage of the <embed> element.

FIGURE 7.7 Rendered result of Figure 7.6.

CHALLENGE 7.5
The width and height attributes on the <embed> element determine how much of the control is
displayed. Experiment with the attributes to see their effects. Also, what are the possible
applications of such flexibility?

7.4.2.3 <object>.. .</object>

Like the <embed> element, the <object> element is used to embed external content, and it is also more
commonly used for video or animation than for audio. Table 7.5 lists the attributes supported, and Figures
7.8 and 7.9 show how it is used and also depict the result. Like with the <embed> element, the width and
height attributes determine how much of the control is displayed.
TABLE 7.5
Attributes Used with the <object> Element
FIGURE 7.8 Example usage of the <object> element.

FIGURE 7.9 Rendered result of Figure 7.8.

In order to specify parameters for the <object> element, the <param> element is used inside it. The
attributes that it supports are name (which specifies the name of parameter) and value (which specifies
the value of the parameter). Figure 7.10 shows how to use the element. The code produces the same result
as Figure 7.9. The only difference is that the audio does not start playing automatically when the page
loads, because the “autoplay” parameter is specified and its value is set to “false.”

FIGURE 7.10 Example usage of the <param> element with the <object> element.

CHALLENGE 7.6
Write a code that combines the <object> and <embed> elements to deliver the same file to see what
happens.

7.4.3 Audio in Web Design

In order to be able to use audio effectively in Web design, several factors need to be considered,
including appropriateness of use, file format compatibility, quality, and size of file. The roles of these
factors are discussed here.

7.4.3.1 Audio File Formats and Audio File Size

Like image files, audio files can be large, and the size generated is directly related to quality. The sound
that we hear is converted into the form that can be stored in the computer by converting it to electrical
signal, taking many samples of it at regular intervals per second, giving each sample a value, and storing
it as digital data. In theory, the more samples taken per second and the larger the number of bits used to
represent each sample, the more the produced digital audio is a true representation of the original sound;
in other words, the better the quality. The number of samples taken per second is known as sampling rate;
it is measured in terms of samples or cycles per second, or Hertz (Hz). For example, 10,000 samples/sec
is 10,000 Hz or 10 kilohertz (10 kHz). The number of bits per sample is known as sampling resolution
(or bit depth) and is specified, for example, as 16-bit, meaning that the value assigned to each sample is
determined using 16 bits. In theory, this means that the same audio sampled (or digitized) at 44.1 kHz and
16-bit will produce a better quality than if it were sampled at 22.05 kHz and 8-bit.
Unfortunately, high-quality audio produces large file sizes, and without the means of reducing them, it
would be impractical to freely use audio on the Web, as we do today; Internet connection bandwidths
(i.e., connection speeds) will simply not be able to cope. This is why audio files, like image files, require
compression when used on the Web. The following calculations demonstrate the file size that digital audio
can generate.

7.4.3.1.1 Audio File Size

File size generated when 3 min of music is digitized at CD quality, which is audio digitized at 44.1 kHz
and 16-bit in stereo (i.e., 2 channels), is:
File Size = (sampling rate x bit depth x duration in seconds x number of channels)/8 = (44.1 kHz x 16-
bit x 3 min x 2 channels)/8 = [(44.1 x 1000 Hz) x 16 x (3 x 60 s) x 2]/8 = 31,752,000 bytes =
[31,752,000/(1000 x 1000)]MB = 31.75 MB
Dividing by 8 converts the amount in bits to bytes. To convert bytes to kilobytes, you divide by 1000; to
convert kilobytes to megabytes, you divide by 1000; and so on.

CHALLENGE 7.7
What is the size, in megabytes, of the file generated by a 3-minute mono audio sampled at 22.05 kHz
and 8-bit bit depth?

Although the quality of audio can be described in terms of sampling rate and bit depth, it is bitrate (or
bit-rate) that is usually used to describe it; bitrate is the amount of bits processed, generated, or delivered
per second. Higher sampling rates and bit depths naturally produce higher bitrates. The higher the bitrate,
the higher the quality of an audio. The bitrate for CD, which is a standard for audio quality, for example,
is 1.4 Mbps (i.e., 1.4 megabits per second). How this is derived is shown in the NOTE box.

NOTE: Explanation CD audio bit rate

Given that audio CD is sampled at 44.1 kHz at 16-bits resolution in stereo, the number of bits
generated per second is:
= samples per second x bits used per sample x number of channels
= 44,100 samples per second x 16 bits x 2 channels
= 1,411,200 bits per second = 1,411,200/(1000 x 1000) = 1.4 Mbps

CHALLENGE 7.8
What is the bitrate of a 22.05 kHz 8-bit audio?

7.4.3.1.2 Audio File Formats

There are many audio file formats, and many of them support at least a codec, which, like with images,
could be lossless (designed to retain original quality) or lossy (designed to reduce quality to reduce size).
Lossy formats typically reduce file size more significantly than lossless formats. For example, some lossy
formats, such as MP3, are capable of reducing CD-quality audio (i.e., 1.4 Mbps bitrate) to about 192
kbps, without discernible quality loss. The main advantage of lossy file formats is that they allow you
to balance quality against size. The most commonly used formats on the Web are listed in Table 7.6.
TABLE 7.6
Commonly Used Audio Formats
File Compression Sample Rate Bit Depth/Bit Common Usage
Format Rate
AAC (e.g., Standardized lossy 8–96 kHz Up to 256 kbps Used in several audio codecs for almost any application or device in
.aac, m4a, compression scheme and (MPEG-2) 8– per channel. which audio is delivered, including on 3GP mobile phones as .3gp,
.mp4, and format. 192 kHz Supports which is .mp4 optimized for phones. Quality of 128 or 192 kbps is
.3gp). (MPEG-4 variable bitrate adequate for most applications. It is supported by all major browsers.
HD-AAC). (VBR).
Ogg/Vorbis Open source multimedia None None officially Typically used with Vorbis audio codec. Quality rivals that of other
(.ogg and lossy container format. officially specified; set popular formats’, but less supported.
.oga) specified; set by encoder. It
by encoder. supports VBR.
MP3 De facto standard lossy 8–48 kHz. 8–320 kbps. It Very popular for delivering audio. 128 kbps is often adequate for most
(.mp3) codec and Standardized supports VBR. applications. It is supported by all major browsers.
open source lossy codec
used with OGG
format.format.
Opus Standardized open source 8–48 kHz. 6–510 kbps. Used for interactive delivery of voice over the Internet. It is suitable
(.opus) lossy codec used with Supports VBR. for music also and is successor to Speex.
OGG format.
Windows Lossy and lossless codec 8–96 kHz. Up to 24 bits. It Typically, WMA 9 Voice 22.05 kHz 8-bit mono is used for voice and
Media and format. supports ABR Internet radio; 24–96 kbps for stereo; and 128–256 kbps for 5.1
Audio and VBR. channel.
(.wma).

7.4.3.2 Guidelines on Effective Use of Sound

The ways in which sound is used in Web design depend on the type of Web application. For example, in
games and kids-learning applications, different types of sounds are used, including speech, music, and
sound effects. On the other hand, an academic website is unlikely to use any sound or sound in the same
way as used in games. For the majority of websites that do not use sound for the purpose of
communicating specific messages, the use of sound is usually limited to music. The problem is that when
not used to communicate specific messages, it is easy to misuse sound or use it in ways that make Web
content inaccessible to people with disabilities, particularly the visually impaired. Some guidelines for
use are presented here.

7.4.3.2.1 Automatic Starting of Sound

Sound should not start automatically, whether when users arrive at a page, after they have been there for a
while and are in the middle of browsing, or when an object or area receives focus, such as when the
cursor is over it. This is because users generally do not appreciate this, especially as they then have the
added task of turning the sound off if they do not like it. Even when the means of turning the sound off are
provided, it can be difficult to figure them out if not designed properly. It can especially be more difficult
for users with disabilities who use assistive technologies and can only interact with a Web page by using
the keyboard.
If you must start sound automatically when users enter a page, then the control to turn it off should
be provided and it should be near the beginning of the page, where it can be easily found. The
control should be clearly labeled, keyboard- operable, and located early in the tab and reading
 order, so that it is quickly and easily encountered by users using assistive technologies (e.g.,
screen reader).
If you must start sound automatically when an object or area receives focus, such as when the
cursor is over it, you should provide a notice when focus reaches the object or area, such as
through a pop-up or a callout, to say what to do to listen to the sound. Such pop-up or callout
should disappear immediately after focus leaves the object or area and should not require users to
click it, for example, to make it disappear, as this would require users to do something
unnecessary that they would rather not be asked to do.
If sound must be used to announce a message on entry into a page, it should play for no more than
3 s and should stop automatically. This is particularly useful for users who use screen readers, for
whom other sounds can make it difficult to hear the screen reader, even if the screen reader
informs them about how to control the sound or where to find the control.

7.4.3.2.2 Let Users Decide

Ideally, users should be given the courtesy of being the ones that control the use of sounds in Web content.
They should be the ones that decide whether or not to start a sound. Again, this is especially beneficial for
users who use screen readers, as it allows them to decide when turning on a sound will not interfere with
the output of the screen reader. The option to choose can be in the form of a button that says, for example,
“Turn sound on,” which after it has been activated and the sound is playing should change to “Turn sound
off”. The option can also be in the form of a link to the relevant audio file.

7.4.3.2.3 When Multiple Sounds Are Involved

When a sound, such as music or the background sound of a scene, is behind a speech, the sound should be
20 decibels (dB) quieter (i.e., about four times quieter) to allow the speech to be heard clearly and
understood. Doing this is particularly useful for preventing situations where people with hearing
problems find it difficult to understand a speech when other sounds are simultaneously playing. Decibel is
a measure of sound level, and applications used to create audio generally use it.

7.4.3.2.4 When Narrations Are Involved

If a narration is used in Web content, a text version should also be provided, as narration can be difficult
for international users to understand for various reasons, such as accent and poor audio quality. Providing
a text version gives these users time to figure out meanings and even check words in the dictionary.

CHALLENGE 7.9
Apart from when music is used as background to a speech, in what situations do you think the use of
multiple sounds might be necessary?

7.4.4 Acquiring Audio for Web Design

Like with other media types, there are various ways to acquire audio for use in Web design, each of which
is suitable for various types of projects. The most common acquisition methods are discussed here, which
include stock audio, ripping tracks from discs, digitizing tracks from vinyl records, and creating them
from scratch.
7.4.4.1 Stock Audio
As with stock images, there are both free and commercial stock audios of various categories and qualities
available on the Web that can be used for non-unique audio requirements in a project. Categories range
from different types of music to various nonmusical types of sounds, including natural and artificial ones.
Some are free for both private use and commercial use, as long as they are not reproduced for sale,
whereas license needs to be purchased to use some for commercial or other specific purposes. A license
may be for unlimited use (as in the case of royalty-free stock audios), which means that they may be used
for any purpose and modified as required, without permission. A license may also be for just one-time use
(as in the case of rights-managed stock audios), or there might be other terms involved. Some of the
websites that provide commercial stock images also provide audio.

7.4.4.2 Ripping Tracks from Discs

Audios can be obtained by ripping (extracting) them from audio CDs or DVDs and then converting them
to the desired format, either to directly use in an application or to import into a Digital Audio Workstation
(DAW), which is the software used for audio recording, editing, and processing, for further processing or
for combining with other audio and/or MIDI tracks. The main media players provide the feature for
ripping tracks from CDs, including Windows Media Player, QuickTime, and iTunes. Examples of ripping
software for Linux include K3b for KDE desktop and Sound Juicer for GNOME. Although major
platforms have not yet, as of time of writing, provided functions for ripping audio from DVDs, there are
cheap and free programs available for doing this, and to use them requires little more than opening a DVD
from the program, selecting the titles or chapters to be ripped, and specifying the required quality
parameters (such as sampling rate and bit rate), output format, and volume. However, there are typically
issues of intellectual property involved when using this method. This matter is discussed later in this
chapter.

7.4.4.3 Digitizing Tracks from Vinyl Records

Sometimes, the most suitable audio is only available on some old vinyl records. Sound tracks from vinyl
records are analog signals and therefore need to be converted to digital audio. There are various ways in
which this is done. For example, the analog output from a turntable player (or from the amplifier used to
amplify its signal) is fed to the line input of a computer’s sound card or an audio interface connected to
the computer, and a DAW is used to record the resulting digital audio to mono or stereo tracks. Modern
turntables designed specifically to help convert vinyl record tracks to digital tracks provide USB
interface for connecting directly to the computer. In some cases, these turntables also provide special
software for managing and automating the process. As with ripping, copyright issues are typically
involved when using this method. Again, this matter is discussed later in this chapter.

7.4.4.4 Creating Audio from Scratch

Creating audio for a project from scratch is the most difficult and, perhaps, the most expensive, because it
requires bringing together various components and resources, not least time. It also requires more skills
than other methods to get the desired sound, depending on various factors, such as what is being
produced. If what is being produced is just a basic sound, such as the sound of a knock, then this is less
difficult than producing a musical piece that contains multiple instruments and vocals.
While a high-quality multi-track production would typically require going to a professional recording
studio, good-quality music can also be produced in a modest home studio with minimum cost, given that
there are free and inexpensive DAWs that are capable of producing good-quality sound and come with
decent-sounding virtual instruments plug-in, such as piano, synthesizer, and drums, and even audio effects
plug-ins, various types of which are also available for free on the Web. The standard types of audio
effects used in audio production are discussed later in the chapter. Other recording tools, such as
microphone, speakers, headphones, and MIDI keyboard or any other type of MIDI controller, can also be
acquired at relatively cheap prices. Figure 7.11 shows an example of an audio and MIDI recording setup.

FIGURE 7.11 A basic computer-mediated sound-recording setup.

Most modern DAWs are relatively easy and intuitive to use. Where the aim is to produce music, then
some composing talent is necessary; how this is done depends on technique. For example, if all that the
production is going to involve is the use of audio and/or MIDI loops, then only the talent to recognize the
desire loops and combine them creatively is needed, whereas if tracks are going to be created from
scratch, then the talent to compose tunes is certainly more crucial. Loops are short ready-made audio
samples or MIDI patterns that can be used in tracks, instead of recording or creating them from scratch.
The samples could be of anything from guitar riffs to drum parts, and the MIDI patterns are MIDI data
designed to be used to play specific virtual instruments.
Whatever approach is used, producing a musical piece with multiple tracks typically involves creating
the individual audio or MIDI tracks by recording them or by using loops, or both. Where live instruments
are not available, such as in a small studio, the practice is to first create the instrument tracks as MIDI
tracks and then convert them to audio later, when satisfied with them. Typically, the drums are done first,
then the bass guitar, and then everything else one at a time, including vocals. The resulting audio tracks
are then edited and processed, as desired, using audio effects and various types of processing, after which
they are finally mixed down into a stereo (two-track) piece that is ready to be used in an application.

7.5 Video
Video is commonly delivered on a Web page by using hosted video services or adding it to a Web page,
each of which has advantages and disadvantages in terms of the ease with which they can be achieved and
the flexibility that they offer.

7.5.1 Adding Video via Hosted Video Services

This is the most in the straightforward way of adding video to a Web page. There are several video
hosting services, the more popular of which are YouTube, Vimeo, and Metacafe. These services allow
users to upload videos and provide the procedure to follow and the necessary HTML codes for accessing
the videos from a Web page. The advantages of using them are that they provide players that are widely
supported by browsers, automatically encode videos into suitable formats, and are typically free, as they
get their money from adverts. The disadvantages include making uploaded videos available on their site
instead of on your site only (whether or not you like it), using video quality that is not appropriate for
content, and having restrictions in terms of video content, for example, videos may not be allowed to
carry adverts.

7.5.2 Adding Video to Web Page

This involves hosting video on the same Web server that hosts the Web page in which the video is
embedded. Although this involves more work and may even cost more, for example, in terms of paying for
more bandwidth, it provides better control of what is delivered. Like other types of media, video is added
to a Web page by linking and embedding, and linking is done by using the <a> element and embedding
with the <video>, <embed>, or <object> element.

7.5.2.1 Linking to Video

The <a> element is used to link to a video file in the same way as it is used to link to any other file.
Figures 7.12 and 7.13 show how it is used and also depict the result. As normal, clicking the link opens a
media player to play the specified file. As with audio, the advantage of this is that the player is separate
from the Web page, and so, it continues playing even if the user navigates to another page, as opposed to
an embedded plug-in that stops.

FIGURE 7.12 The <a> element linking to a video file.

FIGURE 7.13 Rendered result of Figure 7.12.

CHALLENGE 7.10
Describe a situation in which you would consider linking to a video useful to the user?

7.5.2.2 Embedding Video

Like embedded audio, embedded video uses plug-in that is an integral part of a Web page. As noted
earlier, the elements used to embed video is <video>, <embed>, or <object> element.

7.5.2.2.1 <video>.. .</video>

Just like the <audio> element is optimized for embedding audio, the <video> element is designed for
embedding video in a page. The specific attributes that it supports are listed in Table 7.7, and Figures
7.14 and 7.15 show a basic use of it and depict the result. The content between the <video> tags is the
message that is displayed when a browser does not support the element and is known as fallback
content.
TABLE 7.7
Attributes Supported by the <video> Element

FIGURE 7.14 Example usage of the <video> element.

FIGURE 7.15 Rendered result of Figure 7.14.

CHALLENGE 7.11
In the code, where is the location of the poster image (“garden.jpg”) relative to the HTML file?
 Also, where is it best kept and why?

Notice that it is the poster (“garden.jpg”) that is displayed in the example, not the video. The poster can
also be used to display messages to users, such as “Please wait, media downloading ... .” It could also be
a short animation to entertain while the video loads. Other image file formats that are commonly used for
poster include PNG and GIF.
Again, like the <audio> element, the <video> element can be combined with the <source> element to
provide to the browser multiple choices of video file formats and encoding standards. This improves the
chances of a browser finding a file format that it supports and therefore increases the chances of the video
being accessed by as many users as possible. The attributes that it supports are listed in Table 7.8. Figure
7.16 shows how it is used with a code that produces the same result as Figure 7.15.
TABLE 7.8
Attributes Supported by the <source> Element
Attribute Function
src Specifies the URL for the source.
type Specifies the type of the source. It helps the browser determine whether it can play a file before loading it. Value is a string that
identifies a valid Internet media type. Optional codecs parameters can also be added to specify how exactly the source is
encoded.

FIGURE 7.16 Example usage of <video> and <source> elements.

In the code, the first value of the codecs parameters is the one for the video and the second value is the
one for the audio component. Note that like with the <audio> element, where codecs parameters are
specified, they are one of the values of the type attribute and need to be in double quotes, while all the
values of the attribute are enclosed in single quotes. Again, like with the <audio> element, it is worth
knowing that, although the codecs parameters help the browser decide whether or not it can play a video
file without having to load it first, the downside is that if it is not correctly specified, the browser will
generate an error, even if it can play the file. On the other hand, if the parameters are not specified, the
browser will load the file anyway and discover that it supports the file and play it. The message “Your
Web browser does not support HTML video element” is displayed only if a browser does not support the
<video> element. The formats and codecs that the major browsers support are listed in Table 7.9.
Although H.264 and VP8 now have successors H.265 and VP9, respectively, they are yet to be as widely
supported by browsers as of time of writing.
This means that to ensure your video works with the <video> element, it must be encoded in the codecs
and saved in the file formats. There are several free and cheap video file format converters available on
the Web, including on-line converters, which can be used to convert existing media files to these formats.
A commonly used one designed specifically for converting to HTML5 media formats is Miro Video
Converter.
TABLE 7.9
File Formats and Codecs and Browser Support
Format Supported Codecs Browser Support
MP4 H.264 video + AAC audio Internet Explorer, Firefox, Chrome, Opera, Safari
OGG/OGV Theora video + Vorbis audio Chrome, Firefox, Opera
WebM VP8 video + Vorbis audio Chrome, Opera

CHALLENGE 7.12
Cite some possible problems that embedding a video in a page might cause but linking to it might
not.

7.5.2.2.1.1 Adding Captions and Subtitles The addition of subtitles and captions to videos is worth
mentioning, not least because of its importance to accessibility. The element used to achieve it is the
<track> element. It allows you to specify a timed text track (a file) that is played along a video
delivered using the <video> element. The element is incidentally also used with the <audio> element. The
format of the timed text track supported is WebVTT (Web Video Text Tracks), which carries a .vtt
extension. Figure 7.17 shows an example of the content of a WebVTT file. It says to display the caption
“First caption” at timecode 00:00.000 of the video and remove it at 00.01.980 and so on for the remaining
captions.

FIGURE 7.17 Example of a WebVTT caption file.

Essentially, the browser plays a video and overlays the caption on it but only if the caption or subtitle
function is enabled. This is typically done via the captioning (CC) menu of the media player, which is
usually displayed at the bottom of the window. A WebVTT file can be created using one of the various
tools, including free ones on the Web. An example is HTML5 Video Caption Maker, which allows a
video to be opened in it and automatically inserts start and end time codes for every caption added (either
via typing or via pasting). Before creating a caption file, naturally, a video first needs to be transcribed,
which involves writing down the dialog and commentary in the video and the time codes of where they
start and end.
Table 7.10 lists the attributes supported by the <track> element, and Figure 7.18 shows an example of
how it is used.
TABLE 7.10
Attributes Supported by the <track> Element
Attribute Function
default Enables track if user’s preferences do not indicate to use another track or if no other track is more suitable.
kind Specifies the type of text track. The values supported are keywords: subtitles (which provides translation of content, such as
dialogue and text, and is the default), captions (which provides transcription of audio, including non-verbal sounds), descriptions
(which provides text description of video content), chapters (which provides chapter titles), and metadata (which provides
information that is only visible to scripts).
src Specifies address of WebVTT (.vtt) file and is mandatory.
srclang Specifies the language of text track.
label Specifies title of track and is used by the browser to show available text tracks.

FIGURE 7.18 Example usage of the <track> element.

7.5.2.2.2 <embed> and <object>.. .</object>

Since the <embed> and <object> elements are designed to be used for dynamic media, they can also be
used to embed video in a Web page; however, it is most commonly used to embed Flash video and
animation (discussed later in the chapter). The attributes supported by the <embed> element were listed
earlier in Table 7.4, and those supported by the <object> element in were listed in Table 7.5. Figure 7.19
shows both elements used together. The <embed> element is used as fallback, so that if the browser does
not support one element, for example, it can try the other.

FIGURE 7.19 Example usage of <object> and <embed> elements.

CHALLENGE 7.13
In the code example, what would happen if the <embed> element is placed outside the <object>
element?

7.5.3 Video in Design

Various factors need to be considered when incorporating videos in Web design, in order to ensure that
they are used effectively. Some relate to technical aspects of video, such as quality, file size, file formats,
and compatibility, while others relate to appropriateness of use.

7.5.3.1 Video File Size

Video is made up of series of consecutive bitmapped images displayed per second. These images are
referred to as frames, and their dimension (i.e., pixel dimension) are referred to as frame size. The
number of bits used to represent each pixel of each frame is known as color depth, and the number of
frames displayed per second is known as frame rate. Figure 7.20 shows a broad illustration of the
anatomy of a video, including an audio accompaniment.

FIGURE 7.20 An illustration of the components of a digital video track.

When shooting and editing a video, frame size, color depth, and frame rate are some of the properties
that need to be specified. In principle, the higher the values of these properties, the better the quality of
video. The size of the file produced, of course, is also larger. As you might recollect from Chapter 6, a
high-quality bitmapped image produces a relatively large file. Imagine many of this per second, and you
might get a general idea of the file size generated by high-quality digital video. Where there is an audio
accompaniment, this naturally adds to the size.
As an example, a 1-second standard definition (SD) resolution (720 x 576) video digitized at 16-bit
color depth and 25 frames per second, with CD-quality audio accompaniment, can generate as much as
20.91 MB of data. Standard definition resolution is the traditional resolution used in television. More
current definitions include high definition (HD) and ultra-high definition (UHD), which support
resolutions up to 8192 x 4320, both of which support higher resolutions. Whichever standard is used to
encode a video, the amount of data generated is simply more than what Internet connections or systems
can handle speedily. This is why compression is needed even more for the delivery of video than for
other media object types.
Like with audio, the amount of bits generated per second in video is known as bitrate, and the quality
of video is generally defined in these terms. The formula to calculate it is:
Video bitrate = frame size x color depth x frame rate
This means that the bitrate of the example cited earlier is 167 Mbps. To minimize bitrate without
significantly compromising video quality, video compression standards use various techniques, including
reducing the number of bits used to represent the color of the pixels of a frame and using various other
techniques.

CHALLENGE 7.14
Video file size can be calculated by multiplying its bitrate by its duration in seconds. Given this, how
long will it take to download a 1.15 MB video file over a connection that offers an average speed of
2 Mbps?

7.5.3.2 Video File Formats and Codecs

There are numerous video file formats, each of which supports different frame sizes, color depths, and
frame rates. Where they support compression, they offer these parameters at different bitrates. A video
file format can support only its native codecs, or, if it is a container format, it can support many types of
codecs. When preparing a video for a Web page, the video editing program that you use would typically
offer the opportunity to choose various combinations of formats and codecs. Standalone video encoders,
such as free Mediacoder, also allow you to do this. The recommended formats and codecs when using
HTML5 have been presented earlier in Table 7.9. Video encoded with H.264 codec and placed in MP4
file container format is by far the most commonly used video on the Web. The full name for MP4 is
MPEG-4 Part 14, and H.264 is also known as MPEG-4 Part 10 or MPEG-4 AVC (Advanced Video
Coding). As of time of writing, the successor to H.264, H.265, is yet to be as widely adopted. H.265 is
also known as MPEG-H Part 2 HEVC (High-Efficiency Video Coding) or H.265/ HEVC. It is designed
to provide higher resolutions at the same bitrates as H.264. It has been said, for example, to be capable of
twice the compression produced by H.264 at the same level of video quality and better quality at the same
bitrate. Other commonly used formats that you might come across include AVI, WMV, and FLV (which is
used for Flash videos).

7.5.3.3 Guidelines on Effective Use of Video

The use of video on the Web has gone up tremendously over the last decade or more, owing to the advent
of video-sharing websites, such as YouTube, and the migration of news media to the Web. However,
delivering videos on video-sharing websites is different from delivering them on your own site. While
capturing and uploading video to a video website may only require the knowledge of how to shoot a good
video at best, incorporating video in Web page design requires more than the basic desire to do so or
indeed personal preferences; it requires the knowledge of issues such as when it is appropriate to use it,
what to use it for, its effects when combined with other media object types in a design, the relationship
between quality and the effectiveness of the message being communicated, and the frame size that is
appropriate.

7.5.3.3.1 Appropriateness of Video in Design

Video in Web design should be used only if it is essential to the understanding of the message being
communicated. Content should take advantage of the dynamic nature of video for the use of video to be
justified; that is, if there are no significant movements, static images combined with text are adequate.
Even when it may be useful to use video, if the quality is lacking (e.g., in terms of clarity, size, and
speed), then using it is pointless and it seldom adds any value. Even more, this often projects lack of
professionalism. Also, rather than using video, animation may be considered if it can communicate the
same message effectively. Of course, there are the production advantages and disadvantages. For
example, creating a video can be as easy as pointing a camcorder and shooting, while creating an
animation typically requires more skill, time, and effort; however, it produces a smaller file and offers
more control over the details of the content.

CHALLENGE 7.15
For which of the following would you use video and for which you would not?
Showing dance moves.
Illustrating how a bicycle pump works.
Sports training.

7.5.3.3.2 Video Quality in Design

As mentioned earlier, video quality revolves around bitrate. It determines the frame size and frame rate
that produce acceptable quality. Essentially, the higher the bitrate, the bigger the frame size and frame rate
that you can use and still maintain good picture and motion quality. For example, a bitrate of 1.5
Mbits/sec will not produce good-quality video with a 720 x 576 frame size, let alone HD resolutions such
as 1280 x 720 and 1920 x 1080. This means that it is important to choose a format and a codec that offer
the bitrate that supports the frame size and frame rate needed for a design. A codec that is capable of
producing high quality at low bitrate, such as H.264, and the successor, H.265, is ideal. However, low
bitrates typically do not cope very well with high levels of movements in a video. Among the factors
considered when balancing quality against bitrate are the level of clearness and detail required for a
video, which in turn depend on other factors, such as video content and the screen size of the target
device. For example, in terms of video content, a low bitrate and frame size would probably suffice for a
talking-head video that is unlikely to be viewed full screen, while high bitrate and large frame size are
required for a video with a scene that contains a lot of things that need to be seen clearly.
Obviously, given the direct relationship between bitrate and frame rate, the higher the bitrate, the higher
the frame rate that can be used. However, not all types of videos require high frame rate. The summary of
the relationship between frame rate and quality is that high bitrate and low frame rate would produce
clear images, but motion can be choppy, while a video stream with low bitrate and high frame rate will
likely produce blurry images and “trailing” effects (particularly if frame size is large) but smooth motion.
Generally, the more the movements in a video, the higher the frame rate required to make it appear
smooth. Above all, when video is intended for the Web, the consideration of the target audience’s
connection speed is paramount, particularly when delivery is live, as in a broadcast.
To help balance the quality against bitrate, most modern codecs, such as H.264 and H.265, offer
different bitrates that are optimized for specific frame sizes and frame rates, making them best suited for
different applications. H.264 offers these properties in the form of profiles and levels, examples of which
are shown in Table 7.11, and H.265 offers them in the form of profiles, tiers, and levels, examples of
which are shown in Table 7.12. Main profiles are suitable for most applications, and high profiles are
suitable for applications that are more demanding. Notice that you have a choice of different bitrates
(quality) for the same frame rates and frame sizes. Also, notice that the same frame sizes and rates can be
achieved with less bitrates in H.265 than in H.264. You should know that the lists are not comprehensive;
more comprehensive ones can be found on the Web for different codecs. There are also various on-line
bitrate calculators designed to help calculate the optimal bitrate at which to encode a video file to
achieve what is considered good quality.
TABLE 7.11
Example of the Profile-Level Concept in H.264
TABLE 7.12
Example of the Profile-Level-Tier Concept in H.265

CHALLENGE 7.16
For which of the following videos would you use high or low frame rates, and why?
 Racing
A lecture
A church service

7.5.3.3.3 Video Content in Design

Videos are used in various ways online as well as are delivered on various types of devices. They are
used to deliver entertainment as well as information, in which they are combined with other types of
contents, such as text and images, and it is within this latter context that more design issues arise and the
guidelines given here apply.
7.5.3.3.3.1 Using Only Video to Provide Information Avoid relying solely on video to provide
information. This is because users may not be able to access it, or the video may not play properly. Also,
users may not be able to see or hear it. Instead, also provide content via other communication channels,
such as text, which can be read or read out by the screen reader. Captions and a full transcript should be
provided to comply with accessibility guideline.
7.5.3.3.3.2 Starting Video Automatically Like with audio, videos should not start automatically, either
as users arrive at a page or while they are browsing it. Asking users to stop a video if they do not want it,
rather than letting them start it if they want it, amounts to giving them an unnecessary task to do, and this
can be irritating. Not only this, it can make a page inaccessible to people using screen readers, because
the sound from the video can interfere with the output of the screen reader and it can be difficult for them
to know what to do to turn off the video.
Videos that start automatically in the middle of browsing can be especially irritating, because it is not
always obvious where on the page the video is or which out of the many videos is playing. Even with the
sound turned off, a video that starts without user’s content can be distracting to the user, as moving objects
consistently attract attention.
Even when users click a link text to arrive at a page for a story, video should not start automatically.
Users may not want to see the video and may instead only want to read the text equivalent of the story.
This means that starting video automatically gives them the extra task of having to turn it off. Not only that,
it can cause download-speed problem, which can result in a page to freeze up for a considerable amount
of time, during which period you can neither watch the video nor scroll down to read the text.
In all cases, users should be provided with controls to start, stop, restart, or mute a video, as well as to
adjust its volume. If relevant, provide information to users about how they can find out more about a
video after they have finished viewing it. This may, for example, be in the form of related links and/or
thumbnails. A thumbnail should be of good quality and be able to scale well, so that it can still be clear
when bigger. It should also be representative of a video’s content. Ideally, it should be taken from the
middle of the video, where content is better represented, rather than from the beginning.
7.5.3.3.3.3Information about Video Content Provide information about the content of the video in order
to help users know what they are viewing or help them decide whether or not they want to view it. This
can ensure that those interested in the content of a video do not skip it. Information provided should
include a descriptive but concise name or title of the video, the topic covered, information about content
(e.g., presenter and/or people), and duration, as users usually like to know how long they are going to
spend to download and view a video. If video is long, to make it possible for users to skim through its
content, a list of content or topics, or transcript, should be provided to help them navigate to the desired
parts of the video.
For people who cannot see or hear or those who cannot hear or read rapidly, provide text or audio
alternative, as appropriate, that conveys the same information as in the video, so that they can have access
to the video’s content. The link to the text or audio file for the alternative should be placed near the video.
Link text should always describe video content accurately.
7.5.3.3.3.4 Conciseness of Video Videos that provide information should be straight to the point.
Introduction should be short, ideally 5 s or less, and the goal should be to identify source of information
and the video’s content. Users generally need to know what a video is about and determine whether or not
they want to see it. Long introductions or slow and weak start to a video are a put-off and can cause
users to lose interest quickly and leave, even if they might have stayed if the true content had been
revealed sooner. This is one of the reasons why well-planned and thoughtful editing is crucial. Where
there are many videos to watch, providing introduction with each can quickly become annoying. It may be
best to provide an introduction clip and skip any detailed introduction in the rest of the videos.

CHALLENGE 7.17
Assume that you are browsing a news website (e.g., CNN) and you click a link because you are
interested in knowing more about the link text. However, when you arrive at the relevant page, a
video is presented that has no direct relevance to the link text and it also starts playing automatically.
Below it is the text form of the actual story described in the link text. What is wrong with this
practice, and how would you fix it?

CHALLENGE 7.18
Again, assume that you are browsing a news website and a video is presented to you, together with
its text equivalent under it. Then, after the video has finished, another video starts, but the article
underneath does not change accordingly, so that the video content no longer matches the article under
it. Say why this is good or bad for user experience, and if you think it is bad, suggest a better design
approach.

7.5.4 Acquiring Video for Design

Video can be acquired in a number of ways, including via stock videos, ripping from optical discs,
digitization of analog videos, from scratch, and via screen capture. Which one is used depends on various
factors, such as type and quality requirements of project and the availability of skills, equipment, and
time.

7.5.4.1 Stock Videos

For short generic or even subject-specific videos, such as those used in adverts or public information, it
is often worth considering the free and stock videos available on the Web, instead of choosing to produce
a video purposely. Although free videos might be adequate for some personal projects, for professional
projects, stock videos are typically the best choice, because they are professionally produced and of high
quality. Many websites that offer images and audio also offer videos, usually for a fee. A license may be
for unlimited use (as is the case with royalty-free stock videos) or for just onetime use (as is the case
with rights-managed stock videos), or there might be other terms involved. They are available in various
resolutions, including SD, HD, and UHD resolutions, and in compressed or uncompressed file formats,
typically MOV, MJPEG, Photo-JPEG, and MP4. Where videos are going to be edited before use, it is best
to get them in uncompressed formats or formats that use intra-frame-only compression (i.e., the
compression of only individual frames), as they support editing better than those that use inter-frame
compression (i.e., compressing frames relative to one another). Essentially, intra-frame-only compression
allows easier access to individual frames and easier editing.

7.5.4.2 Ripping Video from DVD Video/Blu-Ray Disc

If the video to be used is in DVD-video or Blu-ray format, then it needs to be ripped (i.e., extracted) from
the disc. Ripping a video from a DVD-video disc generally involves little more than opening the DVD in
the relevant ripping program and then following the procedure supported by the program to extract the
video files, which are typically MPEG-2 files encoded in H.262/MPEG-2 Part 2 video compression
standard in the VOB (Video Object) container files, which are normally in the VTS sub-folder of the
Video_TS folder. It is usually possible to specify that files should be ripped in a different file format
from MPEG-2. If not, then the resulting MPEG-2 files can be transcoded (converted) into the desired
format, such as MP4. There are various programs available on the Web for ripping and transcoding,
including free ones.
Ripping from Blu-ray discs follows the same general principle as ripping from DVD. Some programs
even support both tasks. The complexity of workflow depends on program and whether or not a disc is
right-protected to prevent copying, but again, the procedure requires little more than opening the disc in
the ripping program and initiating the ripping process, which, in time, rips the video files to the specified
location on the hard disk. Where a disc is locked and the ripping program cannot unlock it, a separate
program is needed to do this. The video on Blu-ray is typically encoded in H.264/MPEG-4 AVC in
M2TS files but can also be encoded in any of the two other video compression formats supported by Blu-
ray (i.e., H.262 and VC-1). Whatever the case, the format ripped can be transcoded into the desired
format. Like with DVD ripping, there are various programs available on the Web for Blu-ray disc ripping,
some of which are free. Some names are provided at the end of the chapter. One of the easiest workflows
is to rip by using the free program called MakeMKV (which rips video into an MKV format) and then
transcode the MKV files with HandBrake, another free program. Naturally, it is important to note that
ripping videos from someone else’s disc is illegal, as is ripping from your own disc and using videos in a
design without permission. Indeed, some countries do not permit ripping from DVD or Blu-ray discs at
all.

7.5.4.3 Video from Video Devices

Video sources can either be analog or digital. Although analog video devices are all but extinct,
sometimes, it may be necessary to use them in the process of digitizing analog videos. Obtaining video
from an analog source, typically a tape, involves connecting the analog device, such as VCR and analog
camcorder, to the analog input of a video capture card inside or outside the computer. A capture program
provided with the card or a video-editing program is then used to perform and manage the capture by
responding to dialog boxes, as they appear. This setup is illustrated in Figure 7.21. Communication
between the card and the device is usually via a serial connector, such as RS-232 and RS-422, that is
separate from the cables that carry the actual video signals. Once the process is initiated from the
program, the card essentially digitizes the video and makes it available in the program, where it can be
edited, if necessary, and saved.
FIGURE 7.21 Inputting from various video devices.

If a video capture card is not available but a digital camcorder is available, an analog video can still
be converted. Assuming that the analog video is on a VHS tape, one way in which this is done is to play
the tape in a VCR or an analog camcorder, whose output is connected to the analog input of a digital
camcorder that is set to playback mode, whose digital output is connected to any of the digital ports of a
computer, through where the video is recorded using a video editing program.
When video is being acquired from a digital video device, it is usually only a matter of connecting the
device to the computer via a digital interface, such as IEEE 1394 (Firewire), USB (Universal Serial
Bus), and HDMI (High-Definition Multimedia Interface), and uploading the video to the computer’s hard
disk for editing. Every digital device has at least one of these interfaces and so do most modern
computers or capture cards. Some high-end professional digital camcorders and devices also have SDI
(Serial Digital Interface), a high-capacity connection for exporting uncompressed SD and HD digital
videos in real time, typically in TV broadcasting. Where a digital device uses a removable storage
medium, such as disc or memory card, for which a computer has a drive installed, files can be transferred
directly from it onto the computer’s hard disk.

7.5.4.4 Producing Video from Scratch

Producing a high-quality video is increasingly easily achievable, given that many devices today are
capable of producing high-resolution video. However, where the creation of an elaborate video in which
there is a large cast or shooting is at locations is required, then the knowledge of videography and of what
is required for a professional shoot is useful, such as the knowledge of the right lighting to use and the
meaning of various types of framing and composition. Obviously, all modern video-capture devices are
digital, so the video captured is automatically digitized and saved on some sort of medium, such as tape,
disc, and flash memory.
A digital camcorder can also be used to capture and transmit video directly onto the computer’s hard
disk in real time, using a video editing program to initiate and stop the process. Where this is the case, the
speed of connection is important, but more modern connection speeds are often adequate. For example, as
of time of writing, USB 2.0 supports up to 60 Mbps and USB 3.1 supports up to 10 Gbps; Firewire
supports 400 Mbps, 800 Mbps, 1.6 Gbps, and 3.2 Gbps; and HDMI supports speeds of up to about 18
Gbps.

7.5.4.5 Video Screen Capture

Video screen capture, also known as screencast, is a technique of recording the computer screen output,
typically with audio narration. The video produced is different from the conventional kind of video and is
used to demonstrate how a computer application is used to accomplish a task or to demonstrate new
application software. It is a more efficient way of recording screen activities than pointing a camcorder at
the screen and videoing it. Screencasting does not require the use of a video-capture device. It requires
only a screen-capture program. In principle, to record the screen, the program is opened, the screen area
to capture is defined, and the capture process is initiated, after which any screen activity is recorded
along with any sound (such as narration) captured by any active microphone. On completion, the captured
video is saved. Most screencast programs allow the video to be edited and annotated with text or
graphics. The final video can be integrated into a Web page like any video produced through the
conventional method.

7.6 Animation
The file format of an animation piece largely determines the types of HTML elements that can be used to
add it to a Web page. The most commonly used file formats include animated GIF, SVG, SWF, and any of
the video file formats previously introduced under video, and these formats are all used to store 2D
animation. A 2D animation is so called because it has only two dimensions (width and height). The other
kind of animation is three-dimensional (3D) animation, which has a third dimension, depth. The use of
3D animation for delivering information is yet to be common on the Web and implemented primarily using
CSS and scripting. The use of CSS for creating 2D and 3D animation is discussed in Chapter 18 and how
HTML and CSS are combined with scripts in Chapter 22.
Animated GIF format is a very old format but still commonly used on the Web for very short repetitive
animations. It is a series of bitmapped images saved in animated GIF file format. Since it is basically an
image file, it is added to a Web page using the <img> element, the element used for adding static images.
Refer to Chapter 6 on how to use the element to add image. Adding animation created using SVG (or even
SVG combined with JavaScript) is done the same way as adding SVG images using the <svg> element,
also introduced in Chapter 6. The SWF format is a Flash file format that is still commonly used for
delivering animation on the Web, although its use is not recommended because the trend is toward making
it obsolete in the future. This is because Flash technology is still a popular tool for creating vector-based
animation. However, using the tool does not mean that what is produced must be saved in SWF. It can be
exported in one of various formats supported by HTML5, such as MP4, WebM, or OGG. Or an SWF file
can be converted to these formats using a free on-line converter. Once in any of these formats, an
animation can be delivered in the same way as a video, using <video>, <object>, or <embed> to embed
it, or <a> to link to it. Figure 7.22 shows how the <object> element is used to embed an animation in a
Web page and Figure 7.23 the result. The animation was created in an old Flash program and converted to
MP4.
In the example, the data attribute specifies the animation to embed and its location (which is the same
as that of the source code), the type attribute specifies the MIME type, and width and height the size. The
name attribute in the <param> element says to loop the animation infinitely.

FIGURE 7.22 Using the <object> element to embed animation.

FIGURE 7.23 Rendered result of Figure 7.22.

CHALLENGE 7.19
Implement Figure 7.22 with your own animation, using the <video> and <embed> elements and
experiment with the width and height attributes.

CHALLENGE 7.20
Given that the animation in the example starts automatically and loops forever, modify the code to
make its presentation more user-friendly and say why it is? You can use the <video> element instead
of the <object> element.

7.6.1 Animation in Design

Animation is similar in anatomy to video in that it is made up of a series of images, except that animation
is not a capture of the real life. While animation can be bitmapped- or vector-based, it is vector-based
animation, which has made animation widespread on the Web, because it produces much smaller files.
This means that the need for compression is not as much a major issue in the preparation and delivery of
animation as it is in video.

7.6.1.1 Guidelines on Effective Use of Animation

The popularity of 2D animation had been largely due to the advent of Flash technology, and now, the
advent of HTML5 and CSS3 is set to take this to a higher level, with functionalities such as transform,
transition, and animation. These functionalities allow for a whole new range of animations to be
seamlessly and easily incorporated into a Web page, such as moving objects around, changing their color
and shape, making messages appear to notify users and then disappearing, and so on.
Unfortunately, the problem with the abundance of such functionalities is that attention often seems to be
paid more to using as much of them as possible to showcase what can be done than to using them
selectively and purposefully to ensure that usage helps user experience. Even large corporations that
presumably employ professionals to build their websites still seem to end up with designs that are
frustrating to use because of too many movements going in them. For example, there might be videos
starting automatically, animations going on at the peripheral of vision, and texts expanding and collapsing,
because it is updating in real time, causing the position of the content to shift without warning. All this
leads to bad user experience. Moving objects are especially powerful things, because they attract our
attention, whether we like it or not. However, this same property can also cause distraction and
annoyance. This is why thoughtfulness is essential when using animation. Some guidelines based on
results from studies, for example, from Nielsen Norman Group, a group specializing in interaction design,
are presented here.

7.6.1.1.1 Common Uses of Animation

Animations are used for many purposes. Knowing what animations are commonly used for and
determining whether or not they match your reasons for using animations can help in using them
appropriately. Some of the ways in which they are used include:
Attracting user’s attention, for example, to a notification that the user is required to respond to
or notice immediately.
Illustrating change over time, such as how something or an area has changed over time.
Showing transition, such as between states, as animation enables users to follow and understand
the change from one state to another better than if the change is abrupt.
Showing relationship between objects on which the user is already focused, such as showing
how the parts of a machine work.
Providing feedback to inform users that an action has been successful or that something is going
on. Examples include rollover effect, depicting progress, such as when a file is being
downloaded.
Setting mood. For example, it can be used to create a sense of liveliness on a page that is
providing information about a party. Party balloons, for instance, can be animated to float down
the screen on entry or to float in the background. Similarly, falling snow can be simulated to set a
Christmas mood. Naturally, when these are done, care should be taken not to compromise
legibility. One way of achieving this is by placing text in a plain-color box, as illustrated in
Figure 6.32 in Chapter 6.
Adding entertainment or fun value, which includes elements changing color or moving,
especially in designs targeted at children.
Showcasing new technologies and techniques; however, this is not usually appreciated if it
compromises user experience, as is sometimes the case.

7.6.1.1.2 Using Animation Effectively

While using animations appropriately ensures that your desired goals are achieved, it does not address the
matter of how they affect user experience. In order for the use of animation to be considered completely
effective, it should cause users little or no inconvenience.
Notifications that appear near the edge of the screen should be made to appear slowly, either by
slowly sliding in or by gradually fading into place. This is because we instinctively direct our
attention to movement, especially fast, abrupt, or large movement, at the periphery (i.e., corners
of the eyes). The periphery of a Web page includes areas outside the central area and is where
animation adverts are typically placed.
Animation is best used based on the user’s action, rather than on indirect actions, such as on the
loading of a page, when the user is scrolling, or on some other events; otherwise, it might confuse
users. For example, when text is collapsed or expanded, it should be as a response to the user’s
 action, such as when user checks a checkbox in a form or clicks some other element on a page.
The user should not be made to encounter an animation too frequently in a session. Once, it might
be tolerable, but when it happens repeatedly, it can be irritating. An example is using unnecessary
animation for the start of every page, such as objects zooming into place. Another example is
hiding and revealing the main menu of a page, either from the top or from the side, compelling
users to go through the animation each time they want to access the menu. If space permits, main
menu should be permanently displayed. Users will not miss the animation.

7.6.2 Acquiring 2D Animation for Design

The ways in which 2D animations can be obtained for use in a design are via stock 2D animations, 2D
animation programs, and Web coding languages.

7.6.2.1 Stock 2D Animation

Like images, audio, and video, royalty-free 2D animations abound on the Web in various categories and at
various prices and can be with or without audio. The animations are typically in HD 1080 and
uncompressed video file formats or in formats that use intra-frame-only codecs. A common practice is to
provide them in Photo JPEG wrapped in QuickTime MOV or AVI containers. They may also be provided
compressed, for example, in MP4. Naturally, this format is appropriate only when no editing is intended;
otherwise, an uncompressed format is better, which is then converted to a compressed format after
editing. Where audio accompaniments are involved, they too are in uncompressed formats such as PCM
and AIFF-C/SOWT. Character packs are also available for cartoons characters. These packs, which are
typically in Flash file format, usually contain parts to use to build a character in different poses. For
example, there are different hand positions; front, side, and back views; facial expressions; and
backgrounds.

7.6.2.2 2D Animation Programs

Most programs designed for 2D animation production are frame-based in one sense or another, in that they
use the concept of frames. Consequently, what typically distinguishes them is whether or not they
incorporate a timeline, along which the frames of an animation are aligned. Programs for creating
animated GIF, known as GIF Animators, generally do not incorporate a timeline; rather, they involve
importing or drawing of images in each of the defined frames of an animation. Image qualities can be
manipulated and effects and audio added, and speed is usually specified in terms of the display time for
each frame. Programs for creating other types of 2D animations are typically timeline-based, some of the
most popular being Adobe Flash and After Effects. These programs also use layers, which allow several
images to be overlaid on each other in a frame. Most of them also have a native scripting language that
can be used to produce advanced functions.

7.6.2.3 Coding
It should not be surprising that coding (i.e., computer programming) is another method of creating
animation, since this is what is used to create animation software in the first place. Indeed, most, if not
all, of the advanced animations on the Web and elsewhere, especially fast-action computer games,
involve coding. Naturally, there are different types of coding languages, each suitable for different types
and levels of animation. For the purpose of explanation, they are grouped as general-purpose and Web
coding languages. General-purpose coding languages are powerful and can be used to develop virtually
any type of computer application. A general-purpose language, for example, C++, can be used for any
type of animation. Where advanced animations with a lot of media, fast-moving actions, and high level of
interactivity are involved, it would certainly be one of the main choices.
In contrast, Web coding languages used for animation, which are commonly SVG, CSS, and
JavaScript, are not as powerful as general-purpose coding languages. However, they are increasingly
capable of producing relatively advanced interactive animations. While SVG and CSS can be used only
for relatively basic animations, JavaScript extends the capability, making advanced interactivity possible.
Examples of the types of animation for which SVG and CSS are best-suited include animating the drawing
of objects (including text), interactive maps, morphing of SVG vector objects, and roll-over effect. More
specifically, they are used for the types of animation that seldom perform specific tasks but can enhance
user experience if used appropriately.

7.7 Useful Info

7.7.1 Web Links
HTML specifications: w3.org/TR/html51, w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
HTML5 support testing: html5test.com
HTML tutorials (Here are just a few free tutorial sites on HTML and other Web languages):
w3.org/wiki, html5rocks.com, sitepoint.com, w3schools.com, codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Webtutorialspoint.com, whatwg.org, htmlgoodies.com,
htmldog.com, htmlcodetutorial.com, echoecho.com, learn.shayhowe.com, html.net, tizag.com, html-5-
tutorial.com, docs.webplatform.org, developers.google.com, webdesignermag.co.uk
Design guidelines: nngroup.com
Online animation: www.animatron.com.

7.7.2 Free Software

Multiple download sites can be found for the following software by doing a search:
2D Animation: Unity (Cross Platform), Synfig (Cross Platform), KToon (Unix only), Pencil (Win, Mac),
Lightspark (Linux), Stykz (Cross Platform), Pivot (Win), Tisfat (Win), Animationonline (online)
On-line 2D animator: Ajax Animator, Doink, Fluxtime, Scratch
On-line GIF Animator: GIF creator, GifPal, GifNinja, MakeGif For 2D Games: Stencyl (Win, Mac),
Gamesalad (for mobile devices), Construct 2 (Cross Platform)
Online game authoring: Gamefroot, AgentCubes
Morphing: WinMorph (Win, Mac), xmorph (Win), Norrkross MorphX (MacOS) On-line morphing:
Morphthing
Part II
CSS
8
Introduction to CSS

8.1 Introduction
Cascading Style Sheets (CSS) is a style sheet language that allows rules to be created that are used to
determine how documents written in a markup language should appear when rendered. In this case, it
allows the properties of the content of HTML elements, such as color, size, and position, to be controlled,
as appropriate. This chapter introduces the fundamental principles of how it works.

8.2 Learning Outcomes

After studying this chapter, you should:
Understand the concept of box model used by CSS.
Know the structure of various types of CSS rules.
Understand how precedence is determined when there are multiple CSS rules.
Know the methods used for specifying CSS rules.

8.3 Introduction to CSS

CSS uses a box model, in which a marked up document is viewed as a hierarchy of rectangular boxes,
with each box representing an element in the document. The size of the box depends on the size of the
element’s rendered content, and it is by controlling both the properties and the contents of the boxes of a
document that the appearance of a Web page is controlled. The content of a box is the content between the
two tags of an element. The properties of a box are shown in Figure 8.1. Of the properties, the ones that
can be controlled with CSS are border, padding, and margin. Border (which is invisible by default)
separates the edge of one box from the next box; padding is the space between the border of a box and the
content of the box; and margin is the space outside the border.
Although there are many types of boxes, the main ones are block-level type (e.g., a paragraph
containing lines of text and a section containing paragraphs) and inline-level type (e.g., words in a line of
text; however, an inline-level box may contain a block-level box). The block-level boxes represent block-
level elements, and the inline-level boxes represent inline-level elements. As mentioned in Chapter 2,
block-level elements always start on the next line, while inline elements start on the same line. Apart from
the box that represents the topmost element (i.e., the <html> element), every other box is inside another
box, which could be inside another, and so on. An element that is inside another element is a child
element of that element, and the element containing it is referred to as the containing or parent element.
This means that an element that is a parent of one element can be a child element of another, and so on.
Figure 8.2 shows a rendered Web document with a hierarchy of block boxes (in blue) and inline ones (in
red). The outmost is the <html> element, the next is the <body> element, and the rest are the <h1> and two
<div> elements; in the <div> elements are inline elements, such as <span> and <b>, and the <p> element.
The leftover text at the bottom that is not enclosed in its own box is known as an anonymous block box. It
cannot be styled by its own and is influenced only by the styling properties of its parent, which in this
case is the bottom <div> element.

FIGURE 8.1 An illustration of CSS box model for an element.

FIGURE 8.2 An illustration of the boxes that enclose HTML elements, using a rendered document.

8.3.1 Anatomy of CSS Rules

A CSS rule determines how the content of the element or elements that it is associated with should be
displayed. It comprises two parts: a selector and a declaration block. The selector selects the element or
elements to which the instructions specified in the declaration block are to be applied. A declaration
block may contain one or more declarations and is enclosed in curly brackets, with the declarations
separated by semicolons. Although it is not mandatory to place a semicolon after the last declaration, it is
generally considered a good practice. For example, it can help avoid omitting one when hurriedly adding
a declaration to the end of a block. Each declaration comprises a property and a value, separated by a
colon. Property specifies the aspects of the selected element to change, such as font, color, width, height,
and border, and value specifies the setting for the property. Figure 8.3 illustrates the format. The example
in Figure 8.3 specifies that the content of all occurrences of the <h1> element should be given a
foreground color of yellow and a font in the family of Arial. The CSS properties are dealt with more fully
later.
The example in Figure 8.4 shows more than one element specified in a selector and specifies to apply
the same color and font family to the contents of the <h1>, <h2>, and <h3> elements, so that they look the
same, except for their size (recall from Chapter 3 that different heading elements have different sizes).

FIGURE 8.3 The structure of a CSS rule.

FIGURE 8.4 Structure of the rule for applying the same style to multiple elements.

FIGURE 8.5 Using the style attribute to specify a declaration.

CSS rules can be declared in a separate document, to which the HTML document to be styled is then
linked, or they can be declared in an HTML document, using the <style> element or the style attribute.
When declared in a <style> element, they are simply placed between the element’s opening and closing
tags. When declared using the style attribute, the declaration block is made the value of the attribute and
placed in quotes, as shown in Figure 8.5.
The declarations in the example say to display the text content of the element on which the style
attribute is in yellow and has Arial family of font. The value of the style attribute is a rule, too, except that
there is no selector, which it does not need, since it is inside an element and applies only to the element.
More about how CSS rules are kept in a separate document or defined within an HTML document is
discussed later in the chapter.

NOTE: Vendor prefixes

Because CSS is implemented differently by different browser vendors, particularly in older
browsers, it is sometimes necessary to add prefixes to CSS rules to ensure that they are
recognized by as many browsers as possible. The common prefixes used with major browsers are
-webkit- (Chrome, Android, Safari, and iOS), -moz- (Firefox), -ms- (Internet Explorer), and -o-
(Opera). To ensure that a property called border-radius is recognized by as many versions of
major browsers as possible, for example, the declarations in your rule might look like the
following:
.round-edge {
-webkit-border-radius: 12px; -moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px; border-radius: 12px;
}
 There are some free scripts on the Web that free you from the use of these prefixes and typically
only require including them on your page. An example is prefixfree.js.

CHALLENGE 8.1
In the .round-edge{} rule in the example in the NOTE box, which is the selector and which are the
declarations and values?

8.3.1.1 CSS Selector Types

CSS provides many different selector types that enable rules to be crafted to style various complex
combinations of elements in an HTML document. Table 8.1 lists the main ones. They will be referenced
from other chapters, as they are used in more practical design situations.
Elements can also be selected for styling, based on attributes or their values. Table 8.2 lists common
attribute selectors and how values are matched.
TABLE 8.1
Common CSS Selectors
TABLE 8.2
How Attribute Selectors Match Attributes and Their Values
8.3.1.2 Pseudo-Elements
CSS defines pseudo-elements to allow the selection and styling of specific parts of elements, such as the
first letter of the first line of a paragraph, that are not accessible by using normal CSS selectors, because
they are not defined in the HTML document tree model, since the model sees a document only as a
hierarchical tree of elements whose properties can be controlled by CSS. Essentially, pseudo-elements
behave like elements, even though they are not real elements, since they are not part of the HTML
document tree. Table 8.3 lists the elements.
Although one colon, instead of double colon, may also be used with pseudoelements, CSS3 uses double
colon to distinguish pseudo-elements from pseudoclasses. Figure 8.6 shows the format for using a
pseudo-element. It says to make the first letter of the content of every <p> element yellow. More examples
of usage can be found in Chapter 14.
TABLE 8.3
Common Pseudo-Elements
Pseudo- Function
Element
::first- Selects the first letter of the first line of the text content of an element.
letter
::first-line Selects the first line of the rendered text content of an element. This means the first line in the browser.
::before Creates a pseudo-element and places it immediately before an element and is used with the content property, which is used to insert
an object. Usage is discussed more fully in Chapter 14, where it is more relevant.
::after Creates a pseudo-element and places it immediately after an element and is used with the content property, which is used to insert
an object. Usage is discussed more fully in Chapter 14, where it is more relevant.
::selection Applies styling to text that is selected or highlighted, for example with mouse. Only some properties can be used with it, such as
color, background, text-decoration, text-shadow, outline, and cursor. These properties are also discussed more fully in Chapter 14.
FIGURE 8.6 Syntax for using a pseudo-element.

8.3.1.3 Pseudo-Classes
Pseudo-classes are designed to allow elements to be classified on characteristics that are broader than
those possible, for example, with the class attribute. Figure 8.7 shows the format for specifying them, and
Table 8.4 lists them. Note that only a few of them are commonly used. Examples are provided in Chapters
14 and 17.

FIGURE 8.7 Syntax for using pseudo-classes.

TABLE 8.4
Pseudo-Classes and Examples of Usage
8.3.1.4 nth Selectors
Instead of the :nth-based selectors listed in Table 8.4 taking just n (i.e., a number), they can also take a
mathematical expression. This enables them to be used to specify multiple child selections, such as every
second or third child element in a list of children of the same parent. The expression’s syntax is an+b, and
it represents an element that has an+b-1 siblings before it in a list of children that share the same parent
with it. For example, if an element has three siblings before it, then its position is 4th and can also be said
to have an index of 4. The index numbering of the children of an element starts at 1 (i.e., the first child has
an index of 1).
Another way to think of the an+b expression is that it selects child elements whose index matches the
value to which the expression evaluates. The value of n can be a positive integer or zero, and the value of
a or b must be a positive or negative integer or zero. Basically, the way it works is that n is progressively
assigned the values of 0,1,2,3, and so on and the expression evaluated each time for each value. In the
end, the element selected is the one with the index that matches the result of the evaluation. So, for the
expression 2n + 1, for example, n is first given the value of 0, which makes the expression evaluate to 1
(i.e., [2 x 0] + 1). So, the first child is selected. Next, n is given the value of 1, which makes the
expression evaluate to 3 (i.e., [2 x 1] + 1). So, the third child element is also selected. In the same way,
the values of 2,3,4, and so on evaluate to 5,7,9, and so on, and the corresponding child elements are
selected, if available. If the expression evaluates to zero or a negative number, no element is selected,
since no child element has a zero or negative index.
To show an example of the application of nth selectors, li:nth-child(4n-7)
{ color: brown; } says to make text brown for all <li> child elements that have the index of 1,5,9, and
so on. This is done by giving n the value of 0, which makes the expression evaluate to -7 (i.e., [4 x 0] - 7),
for which there is no matching element index. Next, n is given 1, which evaluates to -3, for which there is
also no matching index. Next, n is 2, which evaluates to 1, which matches the first child element, and so
on.
Instead of using n or an expression, the odd or even keywords could also be used. The odd keyword
selects child elements 1,3,5,7, and so on, and the even keyword selects child elements 2,4,6,8, and so on.
The odd keyword, for example, can be specified as tr:nth-child(odd){}. It is useful to know that there are
:nth checkers on the Web for trying out outputs of expressions.

CHALLENGE 8.2
Given the following expressions, state the positions of the child elements selected:
1n + 0 (or simply n).
2n + 0 (or simply 2n).
2n + 1.
3n - 4.
n + 5.
-2n + 3.

8.3.2 CSS Cascading Properties

The cascading properties of CSS refer to the principles that govern how CSS rules take precedence over
each other when multiple rules are targeting the same element. Understanding them is important when
creating style sheets, as this can help minimize possible problems, as well as lead to the creation of
cleaner, more efficient style sheets. Three main principles used are last rule, specificity, and
inheritance.

8.3.2.1 Last Rule Principle

This principle says that if two rules have identical selectors, then the last one takes precedence. For
example, in the example in Figure 8.8, the second selector takes precedence.

FIGURE 8.8 Illustration of the last rule principle.

CHALLENGE 8.3
Which of the following rules has precedence, and what does it do?
p#intro { color=red; } p#intro { color=blue; }

8.3.2.2 Specificity Principle

The principle of specificity states that where more than one rule apply to an element, the more specific
rule takes precedence over the more general ones. In the example in Figure 8.9, the most specific is
div#larger p{} (because it identifies the element specifically), followed by p. larges t{} (because a class
selector is more general than an id selector) and then p{} (because a type selector is more general than
either).
Note that using the !important exception with any rule gives the rule precedence over all other rules.
For instance, using it with the least specific rule in the previous example, as shown in Figure 8.10, gives
the rule precedence over the most specific rule.
However, using this exception is not considered a good practice, as it makes debugging (i.e.,
resolving errors in code) difficult, since it disrupts the natural cascading flow of style sheets. Where it
must be used, the advice is to use it only on page-specific CSS designed to override some site-wide or
global styles. When used in this way, its effect is more localized and therefore more traceable and
manageable.

FIGURE 8.9 Illustration of the specificity rule principle.

FIGURE 8.10 Illustration of the !important exception rule.

A more accurate way of determining which CSS rule has precedence is to calculate the specificity of
each selector and compare it with the others. This calculation is based on a set of four criteria, designated
as a, b, c, and d. Each occurrence of a criterion in a selector counts as 1 for the criterion. So, if only one
occurrence is found of the “d” criterion in a selector and nothing else, then the selector’s specificity is
0,0,0,1; if one occurrence of the criterion “d,” two occurrences of the criterion “c,” and nothing else are
found, the specificity is 0,0,2,1. Criterion “a” has the most importance, while “d” has the least
importance. In theory, one criterion “a” carries more weight than any number of “b,” “c,” or “d.” The four
criteria and how they are scored are described as follows:
If declarations are made via a style attribute, rather than via a selector, this represents one count
for “a,” so that, the score is a = 1, b = 0, c = 0, d = 0 (or 1,0,0,0).
If declarations are made via id attributes in a selector, the number of such declarations represents
the count for “b.”
If declarations are made via non-id attributes and pseudo-classes in a selector, the number of such
declarations represents the count for “c.”
If declarations are made via element names and pseudo-elements, the number of such declarations
represents the count for “d.”
According to the criteria, the style attribute has the highest specificity, and this is so because its
declarations apply specifically to the element in which it is and to no other. This is followed by the
selector with the highest number of id attributes (because an id attribute is specific to only one element),
then the selector with the highest number of non-id attributes and pseudo-classes, then the selector with
the highest number of element names and pseudo-elements, and then everything else. By applying these
criteria to Figure 8.11, the color of the content of the <p> element will be purple. Table 8.5 shows the
specificity of each selector, which involves examining each selector and counting the number of
occurrences of each of the four criteria.

FIGURE 8.11 Example showing different levels of specificity.

TABLE 8.5
Explanation of How Specificity Level Is Determined

CHALLENGE 8.4
Using the four criteria presented earlier and Table 8.3 as a guide, determine which of the following
rules has the highest specificity level.
div p { color: red; }
p { color: grey; }
p#blue { color: blue; }
div p.green { color: green; }

8.3.2.3 Inheritance
The inheritance principle relates to whether or not child elements get properties passed on to them by the
parent elements. Basically, some properties are inherited by default, while others are not. Inheritance
determines what happens when no value is specified for a property of an element. When no value is
specified for an inherited property of an element, the element uses the value of the parent element. When
no value is specified for a non-inherited property of an element, the element uses the default value of the
property. The inherit keyword can be used with any property to specify to inherit its value from the parent
element. Figures 8.12 and 8.13 show how this works. The content of the <em> element is blue, like that of
the <p> element, because the color property is an inherited property, which means that its value is
inherited from the parent <p> element. In contrast, the <em> element shows no border even though the
parent <p> element does. This is because the border- style property is a non-inherited property, and the
default value for it on the <em> element is none (i.e., no border). The color property is discussed more
fully in Chapter 9, and the border-style property is discussed in .

FIGURE 8.12 A demonstration of property inheritance.

FIGURE 8.13 The rendered result of Figure 8.12.

CHALLENGE 8.5
Given the HTML and CSS codes below, in which color will the content of the <em> element be
rendered?
CSS
span {color: red; }
p { color: blue }
p { border-style: dotted }
HTML
<h3>Property inheritance</h3>
<p>The color property is an inherited property, so <span><em>the content of the em element</em>
</span> is blue just like that of the parent p...</p>

The principle of inheritance can save a lot of time, as it prevents having to repeatedly write the same set
of rules for child elements that share the same properties. Many properties that are not inherited by default
can be forced to inherit values from their parent elements by using inherit as the value for the relevant
properties. Figures 8.14-8.16 illustrate this with two <div> elements, which are children of the <body>
element.
In the example, the properties specified in the body{} rule (i.e., font-family, color, padding, and
margin) are inherited by the two <div> elements, except padding and margin, which are non-inherited by
default. The properties specified in the div.partl{} rule (i.e., border and background-color) apply to only
the first <div> element, and those specified in the div.part2{} rule apply to only the second <div>
element. The second <div> element also inherits the non-inherited padding and margin properties of the
<body> element, because it is forced to do so with the use of the inherit keyword as value. Again, all the
various properties are used here only to explain inheritance and are discussed more fully in later
chapters. The font-family is discussed in Chapter 13; color and background-color are discussed in
Chapter 9; and border, padding, and margin are discussed in .
FIGURE 8.14 HTML for demonstrating CSS inheritance principle.

FIGURE 8.15 CSS used with Figure 8.14 for demonstrating inheritance principle.

FIGURE 8.16 The result of Figures 8.14 and 8.15.

CHALLENGE 8.6
Rewrite the CSS code in Figure 8.15 to make it more efficient.

8.3.3 Methods of Specifying CSS Rules

As mentioned earlier, CSS can be specified in an HTML document or in a separate document. When it is
specified within an HTML document, it is known as inline CSS, and when it is specified in a separate
document, it is known as external CSS.

8.3.3.1 Inline CSS

There are two ways in which inline CSS can be implemented; one way is to use the style attribute on the
element to be styled, and the other way is to use the <style> element, which is usually placed in the
<head> element but can also be used in the body of a document. When placed in the body of a document,
the scoped attribute can be used on it to target a specific element and its children.

8.3.3.1.1 Using the style Attribute

Figure 8.17 shows how the style attribute is used, and Figure 8.18 the result. The same result can also be
achieved with the <style> element, and how is shown in the next sub-section.

FIGURE 8.17 Example usage of the style attribute for styling.

FIGURE 8.18 The result of Figure 8.17.

CHALLENGE 8.7
Implement the example, but also use one of the inline elements discussed under HTML in Part 1 to
isolate a few words for styling that are different from that of the rest of the text.

8.3.3.1.2 Using the <style> Element

Figure 8.19 shows how the <style> element is used in the <head> element to achieve the same result as
Figure 8.18. The type attribute specifies that the content of the <style> element is CSS, and the
p.first_para{} rule specifies to make the text contained in the element belonging to class=“first_para” red.

FIGURE 8.19 Example usage of the <style> element.

 CHALLENGE 8.8
Write the code to display the content between the quotes below, using the <style > element in the
<head> element.
“This text is in a paragraph, this is in a span element, and this is also in the same paragraph
element.”

The inline CSS method is not recommended for any serious use. This is because it is limiting and
inefficient, in that it can only be used by one document. For example, if another document requires exactly
the same CSS styling as the one used in one document, the same CSS has to be repeated for it. This can be
especially timeconsuming and costly if a number of rules are involved. Not only that, maintenance can be
unnecessarily unwieldy. So, in essence, inline should really only be used for the purpose of quick styling,
such as for prototyping purposes, and, like with {important exception, for page-specific CSS designed to
override some site-wide or global styles.
8.3.3.1.2.1 Using the scoped Attribute The scoped attribute, when used on the <style> element, allows
styles to be applied to only an element and its children and overrides previously set styles. The <style>
element is placed inside the target element. Figure 8.20 shows how the attribute is used, and Figure 8.21
depicts the result.

FIGURE 8.20 Example usage of the scoped attribute.

FIGURE 8.21 The result of Figure 8.20.

CHALLENGE 8.9
Can you think of why the use of the scoped attribute is necessary when you can use the class or id
attribute to target an element?

8.3.3.2 External CSS

No doubt, the best document-styling practice for a website is to use external CSS, and the bigger a site,
the more mandatory this, almost, becomes. To link an HTML document to an external CSS document, the
<link> element, discussed in Chapter 2, is used in the <head> element. Figures 8.22 and 8.23 show how
this is done and Figure 8.24 shows the rendered result.

FIGURE 8.22 HTML document linked to the external CSS in Figure 8.21.

FIGURE 8.23 External CSS used with HTML in Figure 8.22.

FIGURE 8.24 The result of Figures 8.22 and 8.23.

 In the <link> element in the example, the href attribute specifies the URL for the style sheet (i.e.,
style.css), rel specifies its relationship with the HTML document, and type says that the content of
style.css is CSS text.

CHALLENGE 8.10
In the example in Figures 8.22 and 8.23, what is the location of the style sheet in relation to the
HTML document that references it?

8.3.3.2.1 Multiple Style Sheets

It is also possible to offer multiple external style sheets, using multiple <link> elements. This is usually
done to offer alternative style sheets and so to provide multiple ways of presenting the same document.
This is so that users have a choice of multiple styles. Figure 8.25 shows an example of how this is done.

FIGURE 8.25 Linking to multiple (alternative) style sheets.

The example provides three style sheets (default.css, basic.css, and classy.css). Notice that in the
<link> elements for the alternative style sheets, the rel attributes each has a space-separated list of values:
“alternative stylesheet.” It must be in this way in order for an alternative style sheet to be specified. Also,
the title attribute must be used, and it must not be empty. Its value is what is listed as a style option for
users to choose under the style sub-menu of the View menu of some browsers. When a user chooses an
alternative style sheet, the page is immediately rendered using the style. Style sheets that have the same
value for the title attribute are treated as part of the same style option.

NOTE: Commenting CSS codes

Adding comments in CSS is done using /* */, so in the code below, only
em { color: red; } is interpreted as code and applied by the browser.em { color: red; } /* Makes
text red */

CHALLENGE 8.11
Implement the example in Figure 8.25, using different style sheets, to see how the concept of
 alternative style sheets works.

8.4 Useful Info

8.4.1 Web Links
CSS specifications: w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
CSS tutorials (Here are just a few free tutorial sites on CSS and other Web languages): w3.org/wiki,
html5rocks.com, sitepoint.com, w3schools.com, codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Webtutorialspoint.com, htmldog.com, htmlcodetutorial.com,
echoecho.com, learn.shayhowe.com, html.net, tizag.com, cssbasics.com, cordova.apache.org,
developers.google.com, csszengarden.com, webdesignermag.co.uk,css. maxdesign.com.au
9
Color

9.1 Introduction
Color is an essential element of Web design, in that it is capable of communicating the emotions of users.
As a result, it is one of the design tools available to Web authors for creating the intended first impression
for a website. This chapter introduces the CSS properties used to specify color and also discusses design
guidelines and practices for the effective use of CSS.

9.2 Learning Outcomes

After studying this chapter, you should:
Know the methods used to specify colors with CSS.
Understand the color representations or models supported by CSS.
Be aware of the various considerations necessary for the effective use of color in Web design.

9.3 Specifying Color in CSS

In CSS, color is specified in a number of ways. One is by color name, as you have already seen in the
examples in Chapter 8, used for the purpose of explaining other CSS properties. About 140 predefined
color names are recognized by major browsers. The other ways of specifying color are via RGB or HSL
values. How to specify these values in CSS is shown first, and how they come to be specified in these
ways is explained afterward.

9.3.1 RGB Values

These values represent the amount of red (R), green (G), and blue (B) required to produce a color. The
syntax used in CSS to specify them is rgb(r,g,b), and the range of each value is 0-255. For example, red is
specified using rgb (255,0,0). The values can also be specified in hex codes (i.e., hexadecimal numbers,
which are numbers derived from counting in 16s). The format for specifying them is #xxxxxx, where the
first xx pair represents red, the second pair represents green, and the third pair represents blue. The hex
code for red, for example, is #ff0000. When alpha (i.e., transparency or opacity) level is specified for a
color that is specified in RGB values, the color is represented as RGBA and the syntax used to specify it
is rgba(r,g,b,a). The value range for alpha is 0-1.0. For example, red with 50% transparency is
rgba(255,0,0,0.5). To specify transparency, when hex codes are used to specify a color, the opacity
property, which is non-inherited, has to be used. Its value range is also 0-1.0. For example, specifying
50% opacity is written as opacity: 0.5.

9.3.2 HSL Values

In contrast to RGB values, HSL values represent the amount of hue (H), saturation (S), and lightness (L)
required to produce a color, and the syntax used to specify them is hsl(h,s,l). H is expressed in terms of an
angle between 0° and 360°; S is expressed in terms of percentage between 0% (minimum hue saturation)
and 100% (maximum hue saturation); and L, too, is expressed in terms of percentage between 0%
(minimum light, which is black) and 100% (maximum light, which is white). For example, red is hsl (0,
100%, 50%). HSL values cannot be specified in hex codes. Like RGB, when alpha (transparency or
opacity) is specified for a color that is specified in HSL values, it is represented as HSLA, and the syntax
is hsla(h,s,l,a), with its value ranging between 0 and 1.0. Red with 50% alpha, for example, is hsla
(0,100%, 50%, 0.5).

9.3.3 Foreground and Background Color

Foreground color in CSS refers to the color of the text content of an element and its decorations, such as
underline, over-line, line-through, and blink; so, foreground color is probably more aptly thought of as
text color. Background color refers to the color of the box that represents an HTML element. The box is
transparent by default, which means that the background shows through it. The color of most browser
windows is white, but to ensure that the background color of an element’s box is white, it is a good
practice to specifically specify it. As examples have shown in Chapter 8, the CSS property for specifying
foreground color is color, and it is inherited. The property for specifying background color is
background-color, and it is non-inherited. Figure 9.1 shows various ways of using them to specify color
and transparency, and Figure 9.2 shows the result.
In the example, notice that some texts are black and others white. This is just to ensure legibility. Good
contrast is necessary for text to be comfortably legible. So, it is important to bear this in mind when
choosing foreground and background colors. Low contrast makes characters and words difficult to
recognize, especially for the visually impaired users. High contrast makes text easy to read, but too much
contrast can cause eyestrain when there is a lot to read. Medium contrast usually offers a good
compromise, because it can be gentler on the eyes, and it is typically achieved by adjusting the brightness
or darkness of the text. For example, instead of using white text on a dark background, off- white text
could be better, and instead of black text on white background, dark-gray text may be more suitable.
Figure 9.3 demonstrates this. See which one you find more legible and which ones are likely to strain
your eyes after a while of reading the text.
Generally, all colors, except yellow, contrast well with a white background, and all colors, except blue
and brown, contrast well with a black background. The effect of color combinations and contrast on
legibility is just one of the considerations when choosing colors. There are others that are due to the
physiology of the eyes. They are discussed later in this chapter under “Color and physiological
considerations.”
FIGURE 9.1 Different methods of specifying color.

FIGURE 9.2 Rendered result of Figure 9.1.

FIGURE 9.3 Color combinations and legibility.

NOTE: Contrast and accessibility

 The recommendation is that text and graphic text that are not large-scale texts should have at least
4.5:1 contrast ratio. Color contrast checkers are available on the Web for checking contrast for
foreground-background combinations.

CHALLENGE 9.1
The default color for a Web page is white. How do you specify a different color?

CHALLENGE 9.2
What do the codes below produce, and why?
CSS
#square1 { background-color:rgb(255,0,0); } #square2 { background-color:rgba(0,255,0,0.75); }
#square3 { background-color: rgba (0,0,255,0.25); }
HTML
<div id=“square1”></div>
<div id=“square2”></div>
<div id=“square3”></div>

9.3.3.1 Color Transparency

When transparency (opacity or alpha) is specified for a color, apart from the color looking faded, as
shown earlier in Figure 9.2, it lets the content underneath show. How much is shown depends on the level
of transparency. Figure 9.4 shows an example of the effects of transparency. The squares were created
using <div> elements that were given specific widths and heights and were positioned as required. How
widths and heights are specified is explained in , and how elements are positioned at specific points on a
page is explained in Chapter 12.

FIGURE 9.4 A demonstration of the effects of the use of transparency with a color.

NOTE: Image opacity

The opacity property can also be used to specify the transparency of an image, so that the item
under it shows through. For example, img{ opacity: 0.25; } specifies to make the image displayed
 using the <img> element 25% transparent.

CHALLENGE 9.3
What are the ways to add transparency to the following CSS rule: p{ background-color:
hsl(240,100%,50%); }?

9.4 Anatomy of Color and Color Models

The color is specified in CSS in the ways just demonstrated because of both how display technologies
produce color and how humans perceive it. In display screen technologies, such as computer, mobile,
tablet, and TV screens, color is produced by mixing differently colored lights. As first mentioned in
Chapter 6 in relation to the color of images, the display area of a screen is essentially made up of
thousands of tiny pixels. Each of these pixels contains red, green, and blue components, sometimes called
sub-pixels. By illuminating specific pixels, it is possible to produce a pattern on the screen that we see as
text or image. The color of each pixel at any point in time is determined by the mixture of the lights from
its red, green, and blue components, whose light intensity can vary, as specified. This method of
producing color is known as an additive color method, since it involves adding different colors together
to produce the required one. The red, green, and blue colors are known as additive primary colors, and
the colors produced in this way are known as RGB colors. The concept of mixing red, green, and blue
colors is known as RGB color model. Figure 9.5 illustrates the concept.

FIGURE 9.5 An illustration of the RGB color method.

The RGB model is capable of producing most of the colors visible to humans, and when each color is
represented with 8 bits (i.e., 24 bits for all red, green, and blue together), up to 16,777,216 (i.e., 224)
different colors can be produced. Representing red, green, and blue, each with 8 bits, means that 256 (i.e.,
28) different shades of each can be produced and specified on a 0-255 scale. Recall from Chapter 6 that
the number of bits used to represent a color is bit depth or color depth.
There are also other color models, such as YUV used by camcorders for encoding video and CMYK
used by printers, but RGB is the only one relevant to CSS. The RGB model is the most important color
model in computer application development, since most of the interaction with an application happens on
the screen. Although it is suitable for describing color in terms of primaries and human perception of
colors, it is not suitable for describing how humans describe color. Indeed, it is seldom obvious to most
people that a color contains red, green, or blue, and we hardly know what proportions of these colors
make up a color when we look at it; rather, we see a color in terms of a variation of a hue and describe it
in the same way. For example, we might say “a shade of red,” “deep green,” and “light blue.” In other
words, we tend to describe colors in terms of the hue, intensity of the hue, and its lightness or darkness.
The aim of the alternatives to the RGB color model is to model color in terms of these properties. The
most common of these alternatives are HSL and HSV.
You have already encountered HSL earlier. HSV stands for hue, saturation, and value (lightness),
which is also described in some visual-media-editing applications as HSB (hue, saturation, and
brightness) or HSI (hue, saturation, and intensity). Only HSL is supported by CSS. Figure 9.6 shows a
representation of the model. 07360° hue is red; 120° hue is green; and 240° hue is blue. In loose terms,
hue is the same as pure color. Saturation is the amount of gray in a color. At 0%, the amount of gray is at
maximum (100%), while the amount of hue is 0%, making the color to be displayed as gray. Lightness (or
value) is the amount of white or black in a color. At 0%, the amount of black is at maximum (100%),
resulting in a black color, and at 100%, the amount of white is maximum, resulting in white. At 50%, the
amounts of white and black are normal, which means that saturation is also at 100%, meaning that a pure
color is displayed.
The colors resulting from adding white to a color are usually referred to as tints; the colors resulting
from adding gray to a color are referred to as tones; and the colors resulting from adding black to a color
are referred to as shades. Figure 9.7 illustrates this.

FIGURE 9.6 An illustration of the HSL color model.

FIGURE 9.7 Example of a tint, tone, and shade of a color.

9.4.1 Determining Color Values

Most programs used for producing visual media provide a tool, typically a color picker, which allows
color to be chosen based on more than one color model and in a number of ways. These tools can be
considered in the first instance to find the RGB or HSL color component values for your desired color.
Figure 9.8 shows an example. The desired color can be produced using the spectrum slider in
conjunction with clicking on the Color Field. The equivalent color values are displayed in the various
color model sections. Notice that it is HSB, not HSL, that is offered. The difference between the two is
that lightness adds white and black, whereas brightness adds only black. Some pickers also include
sliders for the alpha channel.

FIGURE 9.8 An examples of a color picker.

CHALLENGE 9.4
To better understand the HSL or HSB color model, create a shape in your Microsoft Word, or any
other application that allows you to do this, and fill the shape with a primary color, such as red.
Then, open the color picker and manipulate the values for saturation and lightness (or brightness).

If these color pickers are not of adequate use, there are many free online color converters that allow the
conversion of a color value from one model to another. They also allow color names to be specified, and
they work on a similar principle as the one in Figure 9.8.

9.5 Color in Design

How humans perceive color and the effects of colors on us play a big role in the effective use of color in
Web design. These factors affect which colors we combine, how we combine them, how many are used,
and for what purpose each color is used. The success of a design depends on making the right choices for
the right situations, in particular because color combination contributes to the aesthetics of a website,
which users usually partly use to judge its credibility and therefore whether or not to use it. More on the
role of aesthetics in Web design is discussed in Chapters 23 and 24.

9.5.1 Choosing Color Combinations

There are various methods for choosing a color combination for a website. One is through instinct or trial
and error. However, this can be limiting in that instinct can only take you so far; the knowledge of color
research is necessary. Another approach is to use the goal of a website as a guide, based on past
practices. For example, certain colors are more commonly used for some types of businesses than others.
However, this, too, is subjective and can be unreliable. A more systematic approach tends to be more
reliable, and it is because of this that the use of color schemes should always be considered in the
decision of choosing the color combination to use for a website.
Color schemes are derived from a color wheel (also known as color circle) but can also be derived
from the colors of an image. A color wheel shows the relationships between colors and provides guides
on which colors can be mixed to produce which color. In visual design, it is especially useful for
determining which colors can be used together effectively to create specific styles and moods. There are
different variations, and the variations are also represented in a variety of ways. Two examples are
shown in Figure 9.9.
A typical color wheel contains colors known as primary colors and colors that are produced from
mixing primary colors, known as secondary colors and intermediate (or tertiary) colors. Which colors
are primary colors depends on various factors such as area of application and tradition. In screen display
technologies, they are red, green, and blue. In printing, they are cyan, magenta, and yellow. Artists usually
use red, yellow, and blue; for little more than traditional reasons, these colors are the ones on which most
color wheels are based. Because mixing them cannot produce all colors, green is often added, and
together, the four colors (red, green, blue, and yellow) are sometimes referred to as the psychological
primary colors, and they are the colors that are commonly researched in studies regarding the
psychological effects of color. Figure 9.10 illustrates the production principle behind a color wheel.

FIGURE 9.9 Examples of a color wheel.

FIGURE 9.10 Illustration of the stages of a color wheel production.

The colors of a color wheel are generally grouped into cool, warm, and cool and warm, as illustrated
in Figure 9.11. Cool colors include greens, blue-greens, and blues; warm colors include yellows,
oranges, and reds; and purples are either cool or warm. Black is considered warm, because it absorbs all
colors and reflects none, while white is considered cool, because it absorbs no colors and reflects
everything. Warm colors are used to project warmth in a design, while cool colors are used to project
coolness.

FIGURE 9.11 Cool and warm colors on the color wheel.

By combining the colors in a color wheel, using various configurations, it is possible to produce
different types of color schemes, both basic and complex, each of which is best suited for different
situations. The color schemes presented here include monochromatic, analogous, complementary, split
complementary, double contrast, and triadic. However, there are others. One is the neutral scheme,
which includes neutral colors, such as white, black, gray, beige, and brown, which are colors not found
on the color wheel. Another is accented neutral scheme, which includes neutral colors and small
amounts of one or more colors from the color wheel; for example, black and gray may be used with red.
Some websites provide dynamic color scheme generators with which to experiment, as a quick
search should reveal. Some popular ones include paletton.com and color.adobe.com. The latter website
also supports the use of images for generating a color scheme. Basically, it allows an image to be
uploaded and uses the colors in it to compose a color scheme with which you can then experiment. Being
able to generate a color scheme from an image is particularly useful when a design is being created
around a central image, such as a logo and the image of nature.

9.5.1.1 Monochromatic
This is a relatively basic scheme that uses only one color, as implied in the name (“mono” meaning one
and “chroma” meaning color). Although only one hue is used, the use of tints and shades of the same color
makes it possible to produce interesting designs. The scheme is easy to work with and usually produces
designs that look balanced and appealing. What constitutes balance in design is discussed in Chapter 23.
The main downside of the scheme is that it is difficult to achieve strong contrast or vibrant designs with it.
Figure 9.12 shows an example of a design that uses green and its tints and shades. The color palette
shows the main colors used in the design, but they are only some of the colors that can be derived from
green via the scheme.
FIGURE 9.12 A screenshot of a design that uses monochromatic color scheme, the palette of the colors used, and the configuration on the
wheel (decembermarketing.com).

NOTE: More about monochromatic scheme

Used for designs where focus is meant to be on content, for example, when a color
photograph needs to be dominant.
Works quite well for designs intended for serious purposes, such as serious political and
business applications (such as bank websites).
Well suited when branding is required.

CHALLENGE 9.5
For which of the following types of websites would you use the monochromatic color scheme? Also,
how would you use the scheme? For example, what color would you use for background, header,
footer, text, aside, and so on?
A kids’ website.
A marketing company.
A stock market website.
An e-commerce website.
A university website.

CHALLENGE 9.6
Picking a base color other than the one used in the example, choose two types of websites from the
list above and create a design for each by using the color and the monochromatic color scheme.

9.5.1.2 Analogous
The analogous scheme, too, is a basic scheme, and it uses colors that are next to each other on the color
wheel. Typically, three to five colors are used, but more colors may also be used. Designs produced using
the scheme are richer than those produced with monochromatic scheme. However, the scheme, too, lacks
contrast because of the relatively close similarities between adjacent colors on the wheel. Variation of the
scheme are the warm scheme, which uses only warm colors, such as reds, yellows, and oranges, and the
cool scheme, which uses only cool colors, such as blues, greens, and purples. Figure 9.13 shows an
example of a design that uses the analogous scheme of warm colors. The circular “Award” image at
bottom right is not part of the design, so its colors are not part of the scheme; however, the blue
provides a good accent. When using this scheme, attention needs to be paid to the contrast between text
and background colors to ensure good level of legibility. If the colors are too close, tints and shades are
usually used to improve contrast.

FIGURE 9.13 A screenshot of a design that uses analogous color scheme, the palette of the colors used, and the configuration on the wheel
(http://www.itcatmedia.com/school).

NOTE: More about analogous scheme

One color is used as the dominant color, the second to support, and the third, along with
neutral colors, to accentuate. If more than three colors are used, the same principle is
followed.
Using too many colors, or combining warm and cool colors, can cause disharmony.

CHALLENGE 9.7
For which of the following types of websites would you use the analogous color scheme? Also, how
would you use the scheme? For example, what color would you use for background, header, footer,
text, aside, and so on?
A kids’ website.
A marketing company.
A stock market website.
An e-commerce website.
A university website.

CHALLENGE 9.8
Picking a base color other than the one used in the example, choose two types of websites from the
list above and create a design for each by using the color and the analogous color scheme.
9.5.1.3 Complementary
The complementary scheme uses colors that are opposite to each other on the color wheel, such as red
and green. The high contrast that results from combining complementary colors typically creates a vibrant
look, particularly when the colors are highly saturated. However, combining highly saturated colors can
also produce unwanted optical effects, such as vibrations, shadows, and afterimages (ghost images),
particularly when they touch. Figure 9.14 shows an example of a design in complementary colors.
To avoid unwanted optical effects when using complementary colors, neutral colors may be added,
particularly as background colors, such as the ones shown in Figure 9.15. Notice how the text in the left
illustration is difficult to read, while it is not so in the right illustration, because white background is
used.

FIGURE 9.14 A screenshot of a design that uses complementary color, the palette of the colors used, and the configuration on the wheel.

FIGURE 9.15 Complementary colors (left), and with a neutral color as background (right).

NOTE: More about complementary scheme

Used when things are required to stand out and draw maximum attention.
When a warm color is used as accent, any complementary cool color can be desaturated
to give more emphasis to the warm color.

CHALLENGE 9.9
For which of the following types of websites would you use the complementary color scheme? Also,
how would you use the scheme? For example, what color would you use for background, header,
footer, text, aside, and so on?
A kids’ website.
 A marketing company.
A stock market website.
An e-commerce website.
A university website.

CHALLENGE 9.10
Picking a base color other than the one used in the example, choose two types of websites from the
list above and create a design for each by using the color and the complementary color scheme.

9.5.1.4 Split Complementary

The split complementary color scheme is a variation of the complementary scheme and includes a base
color and the colors on either sides of the complementary color on the color wheel. For example,
choosing purple color will give orange-yellow and yellow-green as split complementary colors. The
scheme produces the same strong visual contrast as the complementary scheme but with less tension.
Also, it produces more subtle variations than complementary scheme. Figure 9.16 shows a design that
uses these colors and their tints and shades.

FIGURE 9.16 A screenshot of a design that uses split complementary color, the palette of the colors used, and the configuration on the
wheel.

NOTE: More on split complementary scheme

Split complementary scheme is friendlier than complementary scheme.
Split complementary is generally not as jarring as complementary scheme.
A warm color can be combined with cool colors to give emphasis to the warm color.

CHALLENGE 9.11
For which of the following types of websites would you use the split complementary color scheme?
Also, how would you use the scheme? For example, what color would you use for background,
 header, footer, text, aside, and so on?
A kids’ website.
A marketing company.
A stock market website.
An e-commerce website.
A university website.

CHALLENGE 9.12
Picking a base color other than the one used in the example, choose two types of websites from the
list above and create a design for each by using the color and the split complementary color scheme.

9.5.1.5 Double Contrast

The double-contrast (or tetradic) scheme, too, is based on the complementary scheme technique and uses
four colors (i.e., two complementary color pairs). Basically, it is a double application of the
complementary scheme technique, in that the colors on either sides of each of the two complementary
colors are chosen. For example, if the complementary colors are blue and orange, then the colors chosen
are blue-purple and blue-green on the blue side and red-orange and orange-yellow on the orange side.
Because it uses four colors, the scheme offers more variety of colors than other schemes and produces
bold-contrasting designs. However, it is also the hardest to balance. Figure 9.17 shows a design that uses
double-contrast colors and their tints and shades.
A variation of the double-contrast scheme is the square scheme, in which the four colors are evenly
spaced on the wheel. The scheme’s characteristics are similar to those of double contrast. Figure 9.18
shows as illustration.

FIGURE 9.17 A screenshot of a design that uses double-contrast colors, the palette of the colors used, and the configuration on the wheel.
FIGURE 9.18 A variation of the double-contrast color scheme.

NOTE: More on double-contrast scheme

Using all four colors in equal amount may produce an unbalanced design, but this may be avoided
by making one color dominant and subduing the rest.

CHALLENGE 9.13
For which of the following types of websites would you use the double-contrast color scheme? Also,
how would you use the scheme? For example, what color would you use for background, header,
footer, text, aside, and so on?
A kids’ website.
A marketing company.
A stock market website.
An e-commerce website.
A university website.

CHALLENGE 9.14
Picking a base color other than the one used in the example, choose two types of websites from the
list above and create a design for each by using the color and the double-contrast color scheme.

9.5.1.6 Triadic
The triadic scheme involves three colors that are equidistant from each other on the color wheel, such as
red, yellow, and blue. Although it is not as contrasting as the complementary scheme, it, too, produces
strong vibrant designs, and it is relatively easy to achieve balance and harmony with it. Figure 9.19 shows
a design that uses triadic colors and their tints and shades.
FIGURE 9.19 A screenshot of a design that uses triadic colors, the palette of the colors used, and the configuration on the wheel

NOTE: More on triadic scheme

To ensure a harmonious design, one color can be made dominant and others can be used
for accent.
If colors are too showy, they can be subdued to achieve a more harmonious design.

CHALLENGE 9.15
For which of the following types of websites would you use the triadic color scheme? Also, how
would you use the scheme? For example, what color would you use for background, header, footer,
text, aside, and so on?
A kids’ website.
A marketing company.
A stock market website.
An e-commerce website.
A university website.

CHALLENGE 9.16
Picking a base color other than the one used in the example, choose two types of websites from the
list above and create a design for each by using the color and the triadic color scheme.

CHALLENGE 9.17
Visit color.adobe.com, if you have not already done so, and experiment with the color schemes that it
offers. Also, create a color scheme by uploading an image, and experiment on the color scheme
generated.
9.5.2 Color Proportions
While color schemes provide guidelines on the colors to combine, they do not provide information on
how much to use. Although there are no steadfast rules regarding this, there are common practices. A
basic rule of thumb is the 60-30-10 rule, which is traditionally applied in interior design to produce
professional quality color decoration for a space. In Web design, the space is the screen or page. The rule
recommends that it should be filled in the following proportions:
60% in the dominant color. This is the background, and typically used colors are light neutral
colors (e.g., gray, black, and brown) or tints of a hue.
30% in the subdominant (or secondary) color, which is typically a stronger color than the
background.
10% in the accent color, which is typically a vivid color and is commonly used to direct users’
attention to an important feature, such as a call-to-action button, for example, a “Register” button.
You may also encounter these three components being referred to by different names in Web design. For
example, dominant color may be described as base or subdominant color, secondary color as dominant,
and accent color as highlight, but the general concept of 60-30-10 still applies. However, the 60-30-10
proportion is not cast in stones; it can be varied slightly, as long as the 100% total is maintained.
Examples include 65-25-10 and 60-29-11. More than three colors can also be used, again, as long as the
100% total is maintained. When more than three colors are used, it is usually by adding more secondary
colors, in which case, the total space occupied should not be more than the 30% proportion for the
secondary color. The tints, tones, or shades of the secondary color or other colors may be used, based on
the relevant color scheme. The total number of colors is normally best kept at five plus/minus two colors,
as too many colors can make it difficult for the user to build a mental picture of a page and understand
how to interact with it. Consistency in the use of colors across pages, naturally, contributes to the
building of a mental picture of a website.

CHALLENGE 9.18
What should be the proportion of the color used for accenting? Also, which of the following colors
would you use for accenting, and why?

9.5.3 Color in Content Organization

Where a website is used to present a lot of data, especially numerical data, colors can be almost
indispensable in the organization. When colors are used in this way, rather than picking them randomly, a
set of colors should be chosen, then a purpose or meaning should be assigned to each color, and the
principle of usage should be maintained across pages for consistency. Color can also be used to label or
group related items to help remember more items than usual or to create a hierarchy according to the
order of importance; for example, the darkest and brightest colors can be used for the most important
information in order to draw attention to them and soft natural colors can be used for most other
information.
When color is used to separate items into groups, although the colors used should be distinctly different
from one another, they should not vary in perceived intensity, as this can cause one color to stand out more
than the others, falsely giving the impression that it is more important. For example, if red is used for one
group, then green, and not bright green, should be used for another group; otherwise, the bright green
group will appear more important.
Where a sequence of values is color-coded, a single hue is best used, with the intensity varying from
pale colors to darker and brighter colors for low to higher values, respectively. However, this technique
should be avoided where different concepts are being given colors, as shades of the same color can be
difficult to distinguish. Different concepts should be assigned different hues. Also, because visual
perception is relative and not absolute, the perception of the same color can change with different color
background or surrounding, giving the impression that the same color represents different concepts. To
avoid this (e.g., across pages), background or surrounding color must be consistent. To further ensure
color consistency in the colors that different users see, it is a good practice to check a color scheme
across various devices, since the appearance of colors often changes across devices.

CHALLENGE 9.19
For which of the following would you use variations of the same color and for which would you use
different colors to aid organization?
Categories of news items.
Columns of a table.
Series of recorded weights, with each weight indicating whether it is up or down compared
with the previous and next ones.

9.5.4 Color and Aesthetics

As mentioned earlier, colors and their combinations are capable of projecting aesthetics and are a
universally recognized measure of visual aesthetics. Numerous studies suggest that colors play important
role in users’ appraisal of the aesthetics of user interfaces, including websites’ user interfaces. Studies
also suggest that when users prefer the colors or color combinations of a website and judge them to have
high aesthetic quality, they end up making positive decisions about the website. For example, they are
highly likely to predict that the site will be easy to use as well as to decide, for example, to purchase from
it if it is selling something. Users typically describe color as a factor in how they judge the aesthetic
appeal of websites and how easy they feel the sites will be to use. Also, designs judged to be
aesthetically pleasing are typically characterized by the harmonious use of colors. Factors that contribute
to this judgment have been suggested to include preference for a color combination, perception of
harmony between the colors, and preference for a color in relation to its background. For example, the
more the hue’s contrast is between an object’s color and the background, the more the color of the object
is preferred. However, while color obviously plays a significant role in the aesthetics of a website, there
are also other important components of design that contribute to the aesthetics of a website as a whole.
Again, the role of aesthetics in Web design is discussed in Chapters 23 and 24.

CHALLENGE 9.20
 What in how colors are used contribute to a website’s aesthetics? Also, is just using the right color
scheme enough to achieve aesthetics? If no, say what else should be done. If yes, give reasons for
your answer.

9.5.5 Color and Physiological Considerations

On the physiological level, it is the incompatibility between the way the eyes work and some color
combinations that requires consideration. For example, the eyes normally cannot focus on certain shades
of certain colors simultaneously when they are adjacent to each other. This means that when objects or
texts are in these colors, they seem to vibrate, making the eyes to constantly refocus, which causes eye
muscles to tense up and relax constantly, resulting in eye fatigue or eyestrain. Various color combinations
can cause this problem. Having large areas of red and blue next to each other or red text on a blue
background, or vice versa, for example, can cause it. Such color combinations can not only cause
eyestrain but also poor visibility of shapes. For example, very bright, fluorescent, or vibrant colors can
produce edges that appear to blur and/or after-image (ghost-image) effect, both of which make it difficult
to make out shapes easily or correctly. An example is when yellow text is used on a white background.
Of course, colors do not have to be adjacent to each other for them to be incompatible with normal
vision. The use of multiple pure or highly saturated colors, too, can cause the eyes to constantly refocus,
because each color constantly attracts attention, again resulting in eyestrain. Like with legibility, these
problems can largely be avoided by combining colors that produce good contrast, which itself is
controlled primarily by luminance (lightness). Controlling saturation can also help; for example,
combining colors that are widely different in saturation, such as dark (rich) colors with light (pale) ones,
can produce good contrast.
Color combinations can also have more dire implications than simply compromising visibility,
legibility, and so on. Research has shown, for example, that response to photic stimulation (caused, e.g.,
by the flashing of lights or patterns), which is a potential health risk, because it causes seizure in some
people, happens more quickly and with more intensity with red color than with blue and green colors.
This means that flashing colors at the red/yellow end of the color spectrum are more likely to cause
seizure than flashing colors at the blue/green end. Also, flashing a darker color on a brighter one tends to
reduce the possibility of a seizure trigger.

CHALLENGE 9.21
Which elements of a website are likely to have properties and behavior that can cause photic
stimulation?

9.5.6 Color and Psychological Considerations

Different colors evoke different emotions in different people. This means that colors can be used to put
users in the right state of mind to help in the success of a website. Similarly, the language of color (or
color symbolism), which is what we have learnt colors to mean, based on natural, psychological, and
cultural associations, can be used to better communicate content to users. Basically, everyone in the
course of their lifetime invariably develops these associations in varying degrees. Natural association
happens as a result of the color that we have observed a natural object to have. This type of association is
universal and timeless. For example, vegetation is green and so everywhere on earth and will probably
always be so. Psychological association develops as a result of the psychological state that we have
commonly known a color to evoke. For example, deep colors are said to generally convey a sense of
mystery, while bright colors are linked with liveliness and light colors are linked with coolness. This type
of association is neither universal nor timeless, since it is subjective and can change. Cultural
association arises out of cultural or common usage, and it, too, is not universal or timeless, as a color that
means something in one culture or context may mean something different in another culture, today or in the
future. For example, in some countries, when looking for a post box, one looks instinctively for a red box,
because that is the color that symbolizes the post office in those countries, whereas in some countries, it is
yellow, and this may change in the future.
Colors (typically, color schemes) can also be used to create association. For example, using the color
scheme of a country’s flag for a website of national relevance, such as the website of the government of a
country, enhances the perception of the design. Similarly, colors can be combined to create branding, such
as for a company’s identity. Many organizations have brand colors that people automatically associate
with them. For example, for Coca-Cola, it is a particular shade of red and white; for Starbucks, it is green
and white; and for T-Mobile, it is hot pink, white, and black.
As subjective and non-standard as color symbolism is, its use should not be dismissed, especially
because it can help reinforce the message or the theme that a design is meant to communicate. Table 9.1
presents a list of common colors and their associations compiled by Jill Morton, a color consultant in the
use and meaning of colors, who has written many books on the subject and the use of color in Web design.
The list was compiled based on research and common color usage. Although it is not necessarily a
product of empirical science, it provides possible starting points that may otherwise not be considered
when choosing colors to use for different Web design situations. It can save time, while also leaving
ample room for experimentation. For example, it suggests that using a color such as purple for an
application that relates to spirituality, faith, mourning, or death (such as a website for a funeral home) is
more appropriate than using, for example, red color. On the other hand, red can be the main color used
when a website is required to project energy, dynamism, speed, or passion, while blue is unlikely to be
the best for projecting passion. Naturally, the same color can be suitable for multiple design situations,
just like the same situation may be well-served by different colors. Furthermore, color symbolism can
change or become obsolete over time. So, it is better to use timeless symbolisms than timely ones. For
example, colors should not be used because they are fashionable, as fashion is transitory.

TABLE 9.1
Common Colors and Their Associations
Source: Adapted from Jill Morton.

CHALLENGE 9.22
Using the information in Table 9.1 as a guide, state which colors you would use for the following
types of websites and also justify your choices.
 A bank
Luxury products
Sports
Hospital
Church

9.5.7 Color Preferences

Personal preference should not be the deciding factor when choosing colors; rather, factors relating to the
target audience and the purpose of website should be the deciding factors. This is because studies
generally show that different sexes prefer different colors. For example, women tend to like blue, pink,
purple, and green better than gray, orange, and brown, while men tend to like blue, green, and black better
than purple, orange, or brown. Similarly, adults prefer different colors and color combinations compared
with children. Children tend to like vibrant colors, while adults tend to like more subdued colors.

CHALLENGE 9.23
Perform a Web search for “kids websites” to see examples of the use of colors when children are the
target. Also, see if you can recognize any color schemes.

9.5.8 Color and Accessibility

The main accessibility consideration when using color is color blindness. Color blindness is quite
complex because there are different types of color blindness, and it can vary from person to person.
However, its detailed understanding is not essential to be able to create content that is accessible to the
color-blind people. The key point to know is that color-blind people cannot differentiate between certain
color combinations, because they perceive colors differently. The recommendation for Web design is that
visual information, messages, or instructions should not be conveyed via color only. This is achieved by
providing information through multiple forms. For example, you can:
Provide text explanation, such as “red dots on white background.” Note, however, that using the
technique of displaying text explanation on cursor hovering over an item will not work on a
touch-screen device. Also, you should use actual color names rather than aliases, wherever
possible. For example, purple should be used instead of grape, as not all grapes are purple.
Incidentally, the technique of providing text explanation also benefits blind users, since screen
readers can read out the text.
Annotate color use to provide more information. For example, apply labels that show category
name and, possibly, values or percentages. Such labels can be inside or outside the relevant
elements.
Use different text styles for different colors (e.g., italic, bold, underline), if possible and they
are compatible with overall design goal.
Use shades of the same color, since color-blind people can differentiate between lightness.
Use texture, pattern, shape, size, or data table in addition to color, where possible, to make
information more accessible to color-blind people. Typical candidates are pie and bar charts, as
well as maps. The illustration in Figure 9.20, for example, uses different patterns. A data table
 should provide exactly the same information and in the same order.

FIGURE 9.20 Using pattern to convey color information.

NOTE: Other uses of color

Color is also commonly used to:
Identify different types of elements or contents for easy search and recognition.
Attract attention to important information.
Give structure to content.
Differentiate between different types of information.
Create mood.
Communicate association between objects (e.g., by using the same color for different
objects).
Communicate identity (as in branding).

CHALLENGE 9.24
In which of the following cases is it necessary to provide a text explanation of the use of color or an
annotation for the benefit of color-blind or blind users? Also, give reasons for your answer.
The color scheme used on a page.
The image of a T-shirt on sale.
The color of call-to-action buttons.
A color railway network map.
A color swatch used to pick a color for the required item on a site.
A pie or bar chart.

9.6 Useful Info

9.6.1 Web Links
CSS specifications: w3.org/standards
Web development documents: docs.webplatform.org
Accessibility: w3.org/WAI/tutorials, webaim.org
CSS tutorials (Here are just a few free tutorial sites on CSS and other Web languages): w3.org/wiki,
html5rocks.com, sitepoint.com, w3schools.com, codecademy.com, quackit.com,
developer.mozilla.org/en-US/docs/Webtutorialspoint.com, htmldog.com, htmlcodetutorial.com,
echoecho.com, learn.shayhowe.com, html.net, tizag.com, cssbasics.com, cordova.apache.org,
developers.google.com, csszengarden.com, webdesignermag.co.uk, css.maxdesign.com.au
Color scheme tools: colorzilla.com, web.colorotate.org, colorlovers.com
Color wheel: colorschemedesigner.com, color.adobe.com, colorsontheweb.com
Color usage: colorusage.arc.nasa.gov
Color contrast and accessibility checker: wave.webaim.org
Color corrector for color blindness: vischeck.com
Color contrast checker: checkmycolors.com
10
Boxes: Size and Border

10.1 Introduction
The concept of CSS box model was introduced in Chapter 8. The concept says that every element in an
HTML document is represented with a rectangular box, whose properties, such as width, height, border,
padding, and margin, can be controlled to help determine the design of a Web page. This chapter presents
the CSS properties used to achieve this.

10.2 Learning Outcomes

After studying this chapter, you should:
Know how to specify the dimensions of an element’s box and how to control content overflow.
Be able to control an element’s border, padding, and margin.
Be able to control an element’s box sizes, including making boxes user-resizable.
Be able to add shadows to an element’s box.
Know how to add outline to an element.
Know how to convert between inline and block elements and why this can be necessary.
Know how to hide elements and when this is necessary.

10.3 Box Dimensions

The dimensions of a CSS box are defined mainly by width and height, min- width and max-width, and
min-height and max-height, all of which can take any of a number of value types. The commonly used ones
as of time of writing are auto (which is a keyword that lets the browser determine value), inherit (which
is a keyword that says to inherit value from the parent), initial (which sets value to default value), length
values (which are any measure of distance, such as px and em), and percentage values (which define
value as a percentage of the size of the containing block). Box dimensions can also be specified using
CSS logical properties. These properties define logical border edges based on flow direction of text
within a line (e.g., left to right) and the flow direction of lines of text (e.g., top to bottom). The property
used to define this direction is writing-mode and is introduced more fully later in Chapter 14. As of time
of writing, the CSS logical properties are still in the draft stage. This means that some of the things
presented here may be a little different in the finalized specification. Also, only Firefox supports the
properties as of time of writing.

10.3.1 width and height

The width and height properties, both of which are non-inherited, specify the width and height,
respectively, of an element’s box, which by default is just high enough for the element’s content but
occupies the full width of the page. Figure 10.1 shows how these properties are used with both absolute
and relative units, and Figure 10.2 depicts the result. In the example, 400px width and 200px height are
specified for the <div> element, and the width and height of the <p> element are specified as 90% and
50% of these, respectively.

FIGURE 10.1 Example usage of the width and height properties.

FIGURE 10.2 The rendered result of Figure 10.1

CHALLENGE 10.1
Modify the code in Figure 10.1, as necessary, to produce the output below:

10.3.1.1 Specifying Logical Width and Height

The properties used to specify the logical width and height of an element are block- size and inline-size,
and whether each defines width or height depends on the value of the writing-mode property (discussed in
Chapter 14). Both of them are non-inherited and take the same values as the width and height properties;
however, keyword values, such as border-box, content-box, min-content, max-content, available, fit-
content, and auto, may also be supported. Figures 10.3 and 10.4 show how the properties are used and
depict the result.

FIGURE 10.3 Example usage of the block-size and inline-size properties.

FIGURE 10.4 The result of Figure 10.3.

CHALLENGE 10.2
In the example, what would block-size and inline-size define if writing mode is from top to bottom
and right to left?

10.3.2 min-width and min-height and max-width and max-height

The min-width and min-height and max-width and max-height properties, all of which are non-inherited,
are used to control the lower and upper limits of the size of a box, that is, the smallest size and the largest
size at which a box can be displayed, irrespective of the size of browser window. Limiting dimensions in
this way is necessary for various reasons. With respect to width, it is to ensure that pages are not
displayed so small on small screens that their contents are not legible or so wide on large screens that
they require extreme movements of the eyes and head on the part of the user to view or read them. With
respect to height, although setting min-height may seldom be necessary, setting max-height can be
important, because if, during display, the depth of the content of a box is greater than the height of the box,
the content will likely overrun the content of the box below, creating an unsightly presentation and text that
is not possible to read. Figure 10.5 shows how the four properties are used, and Figure 10.6 depicts the
result.
The rules in the example basically specify that the content of each <div> element box should not be
displayed beyond the width of 630px, even if the width of the browser is greater than this. Similarly, it
specifies that the content should not shrink beyond 400px, which means that if the browser window
becomes narrower than this, the content will be cropped off. It also specifies a max-height of 120px,
which means that if the content is more in height than this, it overflows into the content of the box below,
displaying over it, as evident in Figure 10.6. Fortunately, CSS provides means of addressing this
overflow problem.

FIGURE 10.5 Example usage of min- and max-dimension properties.

FIGURE 10.6 The rendered result of Figure 10.5.

10.3.2.1 Handling Content Overflow

Content overflows, both the one that overflows the bottom of a box and the one that overflows the side,
are mainly handled using the combination of the overflow, white-space, and text-overflow properties, as
necessary. Some of them hide or show overflow, while some can be used to specify to wrap content to the
next line. When content wrapping is determined on the fly by the browser based on various current
conditions, it is generally known as a soft wrap, while a deliberate wrap, such as the one created by a
<p> element, is known as a hard wrap. The properties introduced here for managing content overflow in
an element’s box can also be used for the content of a table. The styling of tables is discussed in Chapter
17.

10.3.2.1.1 overflow
The overflow property, which is non-inherited, specifies what to do with the content that overflows the
borders of a box container or table cells. The common keyword values that it takes and their functions are
listed in Table 10.1.
Figure 10.7 shows the addition of the overflow property to the rules shown earlier in Figure 10.5, and
Figure 10.8 shows the effects. Notice that the browser sees it fit to add scrollbars.
TABLE 10.1
The Values Supported by the overflow Property
Value Function
visible Does not clip overflow, and the rendered content overflows the element’s box if too large for the box.
hidden Clips overflow and makes the rest of content invisible or unavailable.
scroll Clips overflow and provides a scrollbar to scroll to the rest of the content.
auto Lets the user agent (e.g., browser) to decide on the best solution.

FIGURE 10.7 How the overflow property is used.

FIGURE 10.8 The result of Figure 10.5, with the overflow property added to the rules, as shown in Figure 10.7.

CHALLENGE 10.3
Use the visible, hidden, and scroll values with the overflow property to see their effects. Notice
especially the difference between scroll and auto by resizing the width of the browser.
 CHALLENGE 10.4
The two rules in Figure 10.7 are identical. Implement Figure 10.5, substituting the rules, and then
modify the whole code to remove repetitions and to make it more efficient.

10.3.2.1.2 white-space
The white-space property is inherited and allows you to control how white space inside an element is
handled. The values that it supports are listed in Table 10.2.
Figure 10.9 shows how the property is used, and Figure 10.10 depicts the result. Notice in the code that
there is white space between the starting <p> tags and where the content starts. Then, notice how the
value used with each white-space property determines how the space is handled when the contents are
displayed.
TABLE 10.2
The Value Supported by the white-space Property
Value Function
normal Specifies to collapse sequences of white space. Wraps text.
nowrap Specifies to collapse white space as normal but ignores line breaks. Does not wrap.
pre Specifies to preserve sequences of white space and break lines at new-line characters or <br> elements. Does not wrap.
pre- Specifies to preserve sequences of white space and break lines at new-line characters or <br> elements and, as necessary, to fill box.
wrap Wraps text.
pre-line Specifies to collapse sequences of white space and break lines at new-line characters or <br> elements and, as necessary, to fill box.
Wraps text.

FIGURE 10.9 Example usage of the white-space property.

FIGURE 10.10 The result of Figure 10.9.

CHALLENGE 10.5
Given the CSS rule, .normal { white-space: normal; }, what is the rendered output for the following?
<p class=“normal”>
Phasellus sagittis, ipsum sed laoreet fermentum, lacus ...
</p>

10.3.2.1.3 text-overflow
The text-overflow property is non-inherited and is used to specify how the browser should communicate
to the user that there is content overflow that is not displayed. It applies to content that is overflowing
only the side of a container box, not the bottom. Text can overflow when it is stopped from wrapping, for
example, due to the use of white-space: nowrap declaration or a word being too long. The property does
not make overflow to occur by itself. So, for it to have an effect, properties that cause overflow, such as
the overflow property, must first be applied to an element. The typical values used with the property are
described in Table 10.3. Figures 10.11 and 10.12 show how it is used and depict the effect.
In the rule, the white-space: nowrap; declaration says not to wrap the text. This means that when the
text reaches the border, it is clipped. The overflow: hidden; declaration hides the overflow, and text-
overflow: ellipsis; adds ellipsis, as shown in Figure 10.12, to show that the text is clipped.
TABLE 10.3
Values Supported by the text-overflow Property
Value Function
clip Specifies to clip text at the border of the box. The clipping can occur in the middle of a character but can be made to occur between
characters if the empty string value ‘ ‘ is used. It is the default.
ellipsis Specifies to display an ellipsis (‘...’) to indicate that text has been clipped. If there is not enough space, the ellipsis is clipped.
<string> Specifies a custom string (e.g., ‘***’ and ‘-’) to use to indicated that text is clipped.
FIGURE 10.11 Handling horizontal overflow.

FIGURE 10.12 The result of Figure 10.11.

CHALLENGE 10.6
Implement the example and experiment with the values of the properties to see their effects.

10.3.2.1.4 overflow-wrap
The overflow-wrap allows you to specify whether or not the browser should break text lines in the
middle of words to prevent them from overflowing the right or left edge of an element’s box. The element
was originally known as word-wrap and is inherited. As of time of writing, only Chrome and Opera
support the new name. The values that the property takes are normal (which means to break lines at
normal word breakpoints) and break-word (which means that lines may be broken in the middle of
words). Figures 10.13 and 10.14 shows how the property is used and depict the result.

CHALLENGE 10.7
In the example, why is it necessary to specify width for the elements to demonstrate the overflow-
wrap property?
FIGURE 10.13 Example usage of the overflow-wrap property.

FIGURE 10.14 The result of Figure 10.13.

The word-break property, which is also inherited, performs similar functions as overflow-wrap, except
that it is more suitable for where text contains multiple languages, especially CJK (Chinese, Japanese,
and Korean). The values supported are normal (which means to use default line break rule), break-all
(which means to allow word breaks for non-CJK text), and keep-all (which disallows word breaks for
CJK text and behaves as normal for non-CJK text).

CHALLENGE 10.8
Implement the example in Figure 10.13 by using word-break and its values, instead of overflow-
wrap, to see the difference between the two.

10.3.2.1.5 hyphens
The hyphens property allows you to specify how to hyphenate words when text is wrapped. It is
inherited, and Table 10.4 lists the values that are supported. Figures 10.15 and 10.16 show how it is used
and depict the result.
In the example, the p.none{} rule says to wrap text, based on white space. The p.manual{} rule says to
break the word “demonstrates” where the soft (invisible) hyphen character is inserted. Note that the soft
hyphen can also be specified using its Unicode (thus: ​). The p.auto{} rule says that the browser should
decide.
TABLE 10.4
Values Supported by the hyphens Property
Value Function
none Wraps text only at white space.
manualWraps only where the characters in a word suggest it. You can suggest breakpoints by inserting in a word one of the two Unicode
characters, U+2010 (hard hyphen) and U+00AD (soft hyphen), which can be specified in HTML as &hyphen; and &shy;,
respectively. How to specify special characters is explained in Chapter 3. The hard hyphen is rendered even if word is not broken,
while the soft hyphen is rendered only if break is broken.
auto Browser determines where to break words.

FIGURE 10.15 Example usage of the hyphens property.

FIGURE 10.16 The result of Figure 10.15.

CHALLENGE 10.9
Implement the example in Figure 10.15 separately for each value, using a lot of text and a wider
width, to get a good sense of how the property works. Also, use the hard hyphen (i.e., &hyphen;)
where wrapping is not necessary, in order to see the effect. If the property does not work well in a
browser, try using the vendor prefixes, as shown in Chapter 8.
10.3.2.2 Specifying Minimum and Maximum Logical Width and Height
The properties used to specify the logical minimum and maximum width and height of an element are min-
block-size, min-inline-size, max-block- size, and max-inline-size, and whether each defines minimum or
maximum width or height depends on the value of the writing-mode property (discussed in Chapter 14).
They are non-inherited and take the same values as the min-width, min-height, max-width, and max-
height properties introduced earlier; however, keyword values, such as none, min-content, max-content,
fit- content, and fill-content, may also be supported in the finalized specification. Figure 10.17 shows how
the properties are used.

FIGURE 10.17 Example usage of properties for specifying the minimum and maximum logical width and height of an element.

In the example, given the value of writing-mode (which is in right-to-left, top-to- bottom text-flow
direction), min-block-size defines minimum height, max-block- size defined maximum height, min-inline-
size defined minimum width, and max-inline-size defined maximum width. The example produces the
same result as specifying min-height: 300px; max-height: 900px; min-width: 400px; max-width: 1200px;,
but if writing mode is changed, a different result is produced.

CHALLENGE 10.10
In the example, what would min-block-size, max-block-size, min- inline-size, and max-inline-size
define if writing mode is from top to bottom and left to right?

10.3.3 calc()
As mentioned in Chapter 6, the calc() function allows you to tell the browser to calculate values
dynamically and can be used with any CSS numeric values, such as length, angle, time, and integer. It
especially makes it easy to position elements symmetrically in a container, such as in the middle. It takes a
mathematical expression that evaluates to the value used for a property. The expression combines
operators such as +, -, *, and /, which specify addition, subtraction, multiplication, and division,
respectively. Figure 10.18 shows how the function is used, and Figure 10.19 depicts the result.
FIGURE 10.18 Example usage of the calc() function.

FIGURE 10.19 The result of Figure 10.18.

In the example, the rules say to make the widths of the <div> elements as the width of the browser
minus 90px and 200px, respectively. The browser-width percentages can also be specified using the vw
(viewport width) unit, introduced in Chapter 6, under responsive images. So, for example, the CSS
declaration min-width: calc(50vw- 10 0px) specifies that whatever be the width of the viewport, the
minimum width (min-width) of the element to which the declaration is applied should be 50% of it minus
100px. Using it in center-aligning an element requires the use of other CSS properties, especially margin,
which is discussed in the next section.

CHALLENGE 10.11
Place a <div> element inside another <div> element and use the calc() function to make the width of
the inner <div> element half of the outer one and the width of the outer one-three quarters that of the
viewport.

10.4 Border, Padding, and Margin

The border, padding, and margin of an element’s box can be manipulated independently, and all the CSS
properties used to do this have both longhand and shorthand formats to make working with elements’
boxes more flexible and more efficient. In principle, the longhand properties allow you to specify the
value for only one edge of a box at a time, while a shorthand property allows this to be done for more
than one edge at a time, using either one value that applies to all four edges or a list of space-separated
values that may contain two, three, or four values. How these values are assigned depends on whether
one, two, three, or four values are specified; this is explained later in this section under the individual
properties.
Like with properties for defining box dimensions, discussed earlier in the chapter, border, padding, and
margin can also be specified using CSS logical properties. Again, their effects depend on the set value
for the writing-mode property, discussed more fully in Chapter 14.

NOTE: About padding, border, and the size of element’s box

It is useful to know that, by default, the specified values for the padding and border of an element
are added to the specified width and height. However, there is a property, box-sizing, that allows
this to be changed, so that the values do not affect an element’s width or height. This property is
discussed more fully later in this chapter.

10.4.1 Border
The appearance of an element’s border, which is described mainly in terms of line style, color, and line
width, can be specified in different ways by using longhand and shorthand properties. There are:
Longhand properties for specifying line style, color, or line width for a specific border edge, for
example, border-top-style.
Shorthand properties for specifying line style, color, or line width for all or a combination of
border simultaneously, for example, border-style.
Shorthand properties for specifying line style, color, and line width for a specific border edge
simultaneously, for example, border-top.
Shorthand property, border, for specifying line style, color, and line width simultaneously.
In addition to properties for setting line style, color, and line width, there are those for specifying images
and radius to use for a border, all of which are available in longhand and shorthand. It is worth knowing
that for the border of a box and the changes made to it to be visible, the line style must be specified.
This is because the browser displays no border for an element by default. Note that border properties, in
general, can also be used for table’s <th> and <td> elements. How this is done is shown under the styling
of tables in Chapter 17.

10.4.1.1 border-style
The border-style property is a shorthand property for specifying the line style for all the four edges of an
element’s border. It is non-inherited, and the values that it supports are listed in Table 10.5. Figures
10.20 and 10.21 show how the property is used and depict the result.
TABLE 10.5
The Values Supported by the border-style Property
FIGURE 10.20 Example usage of the border-style property.
FIGURE 10.21 The rendered result of Figure 10.20.

Figure 10.22 shows how a list of space-separated values may be specified, so that different edges are
given different styles, without using the longhand border-style properties. Figure 10.23 shows the
rendered result. How the values are assigned to the edges is listed in Table 10.6.

FIGURE 10.22 Using border-style property to specify multiple values.

FIGURE 10.23 The result of Figure 10.22.

TABLE 10.6
How the Values of the Shorthand border-style Property Are Assigned
Number of Values Application of Values
One Value is assigned to all four edges.
Two First value is assigned to top and bottom, and second value is assigned to right and left.
Three First value is assigned to top, second to right and left, and third to bottom.
Four First value is assigned to top, second to right, third to bottom, and fourth to left.

CHALLENGE 10.12
Write the code to produce something similar to the following:
10.4.1.1.1 Longhand border-style
The longhand versions of the border-style property are border-top-style, border-right-style, border-
bottom-style, and border-left-style; these are used to apply style to the top, right, bottom, and left edges,
respectively. Like the shorthand, they are non-inherited. Figure 10.24 shows how they are used, and
Figure 10.25 shows the result.

FIGURE 10.24 Example usage of longhand border-style property.

FIGURE 10.25 The result of Figure 10.24.

CHALLENGE 10.13
In the code in Figure 10.24, what would happen if the <p> element contains no content, and what is
the reason for this?

CHALLENGE 10.14
Again, in relation to Figure 10.24, if you do not want any content in the <p> element but want it to be
as if it has content by putting space in it, how would you do this?

10.4.1.1.2 Specifying Style for Logical Border Edges

The properties used to specify the line style for the logical border edge of an element are border-block-
end-style, border-block-start-style, border- inline-end-style, and border-inline-start-style. Whether each
defines the style for the top, bottom, left, or right border edge of the element depends on the value of the
writing-mode property (discussed in Chapter 14). The properties are non-inherited and take the same
values as the border-top-style, border- right-style, border-bottom-style, or border-left-style property.
Figures 10.26 and 10.27 show the usage and result.
FIGURE 10.26 Example usage of properties for specifying line style for logical border.

FIGURE 10.27 The result of Figure 10.26.

CHALLENGE 10.15
Implement the example and experiment with the value of the border-block- start-style attribute.

10.4.1.2 border-width
The border-width property is a shorthand property for specifying the thickness of the border of an
element’s box. The longhand properties are border-top-width, border-right-width, border-bottom-width,
and border-left-width, and the values supported by the properties are non-negative length values (e.g.,
pixels, em, rem, and cm) and keywords (e.g., thin, medium, and thick). The properties are non-inherited.
Figures 10.28 and 10.29 show how they are used with various combinations of values and depict the
rendered result. Table 10.7 shows how the values are assigned to produce the result.

FIGURE 10.28 Different ways of using the border-width property.

FIGURE 10.29 The rendered result of Figure 10.28.

TABLE 10.7
How the Values of the Shorthand border-width Property Are Assigned
Number of Values Application of Values
One Value is assigned to all four edges.
Two First value is assigned to top and bottom, and second value is assigned to right and left.
Three First value is assigned to top, second to right and left, and third to bottom.
Four First value is assigned to top, second to right, third to bottom, and fourth to left.

CHALLENGE 10.16
Using the example in Figure 10.24 as guide, write a code by using longhand properties to specify the
width for each of the four edges of a <div> element separately.

CHALLENGE 10.17
Using the example in Figure 10.28, write a code by using the shorthand border- width property to
specify the width for the four edges of a <div> element, making the right and left edges the same and
the top and bottom edges different.

CHALLENGE 10.18
In the example in Figure 10.28, why is it necessary to specify the border-style property?

10.4.1.2.1 Specifying Width for Logical Border Edges

The properties used to specify the logical border width of an element are border- block-end-width,
border-block-start-width, border-inline-end- width, and border-inline-start-width. Whether each defines
the thickness of the top, bottom, left, or right border edge of an element depends on the value of the
writing-mode property (discussed in Chapter 14). The properties are non-inherited and take the same
values as the border-top-width, border-right-width, border-bottom-width, or border-left-width property.
Figures 10.30 and 10.31 show the usage and the result.
FIGURE 10.30 Example usage of properties for specifying width for logical border.

FIGURE 10.31 The result of Figure 10.30.

CHALLENGE 10.19
Implement the example and experiment with the value of the border-block- start-width attribute.

10.4.1.3 border-color
The border-color property is a shorthand property used to specify the color of the four edges of an
element’s border. Like other border properties, it has longhand versions for specifying colors of
individual edges, which are border-top-color, border- right-color, border-bottom-color, and border-left-
color, all of which are non-inherited. The values that they support are color names and color values in
decimal and hexadecimal numbers, and the alpha channel (i.e., rgba and hsla) is supported. See Chapter
9 for more on the syntax used for specifying color. Figure 10.32 shows how the