• Tags are keywords that determine structure of an HTML page
• Keyword is surrounded by angled brackets
• Most tags come in pairs
Opening or start tag
Closing or end tag
<h1>Pet Care 101</h1>
• Closing tag must have same case as opening tag

• A declaration found at the very top of
almost every HTML document
• Specifies the language or rules the page
uses
• In HTML, the DOCTYPE is case insensitive.
The following DOCTYPEs are all valid:
<!doctype
<!DOCTYPE
<!DOCTYPE
<!DoCtYpE
html>
html>
HTML>
hTmL>

• <html>: Identifies the page as an HTML document
• <head>: Contains markup and code used by the
browser, such as scripts that add interactivity, and
keywords to help search engines find the page
• <title>: Displays the title of the Web page, which
appears at the top of the Web browser, usually on
the page’s tab in a tabbed browser
• <body>: Surrounds content that’s visible on the Web
page when viewed in a Web browser

• <a href=URL>: Generally used to anchor a URL to
text or an image; can create a named anchor within a
document to allow for linking to sections of the
document
• <b>: Applies boldface to text
• <hx>: Creates a heading, which can be first level (h1)
through sixth level (h6)
• <img>: Inserts an image from a file or another Web
site
• <p>: Defines text as a paragraph

• A special character, such as the dollar
symbol, the registered trademark (a capital
R within a circle), and accented letters
• Begins with an ampersand (&) and ends
with a semicolon (;)
• Examples:
entity &reg; represents the registered
trademark symbol
Its numerical code is &#174;

• Called character encoding
• Use UTF-8 encoding whenever possible
• Add the following declaration to the head
element:
<meta charset="UTF-8">

18. HTML 4 Text-related Elements with New Meaning or Functionality in HTML5

• The <b> element should now be used to offset
text without conveying importance, such as for
keywords or product names.
• The <i> element now indicates content in an
alternate voice or mood, like spoken text.
• The <strong> element indicates strong
importance.
• The <em> element indicates emphatic stress.
• The <small> element should be used for small
print, like a copyright line.

• The <mark> element highlights text on a page,
similar to the highlighting feature in Microsoft Word.
• The <time> element displays a machine-readable
time and date, such as 10:10 A.M., CST, July 19, 2012,
which is handy for blogs and calendars, and
potentially helps search engines provide better
results when time and date are part of the search
criteria.
• The <wbr> defines possible line-break.

• While new elements become available, the
W3C earmarks other elements for eventual
removal because their functionality is no
longer useful.
• Removing elements from the list of
available HTML elements is referred to as
deprecation.
• Note: The same thing applies to attributes and CSS
properties.

• A raster image is made up of pixels.
Example: A photograph
Formats: JPG, PNG, GIF, BMP
• A vector image is made up of lines and
curves based on mathematical expressions.
Example: Adobe Illustrator AI file
Formats: PNG or GIF for Web display

• Use img to add images to an HTML
document
• Example: <img src="images/redball.jpg"
alt="Red ball graphic" />
• The src attribute and the alt attribute are
required to be fully valid.
• The W3C requires the alt attribute for
accessibility by people with disabilities.

• Use JavaScript to draw pixel-based shapes on a
canvas
• Include color, gradients, and pattern fills
• Render text with various embellishments
• Animate objects by making them move, change
scale, and so on
• Basic syntax for the canvas element:
<canvas id="smlRectangle" height="100"
width="200"></canvas>

• “Backup” content that displays if primary
content cannot
• Can be a problem with some older
browsers
Cannot render canvas drawings or animation,
for example
• Fallback adds an image, text, or some other
HTML content within the canvas element
that displays if the drawing cannot

• If the drawing is relatively small, use canvas.
• If the drawing requires a large number of objects, use
canvas; SVG degrades as it continually adds objects
to the DOM
• Generally, use canvas for small screens and SVG for
larger screens.
• If you must create highly detailed vector documents
that must scale well, go with SVG.
• If you are displaying real-time data output, such as
maps, map overlays, weather data, and so on, use
canvas.

• poster: Displays a static image file before
the video loads
• autoplay: Start playing the video
automatically upon page load
• controls: Displays a set of controls for
playing, pausing, and stopping the video,
and controlling the volume
• loop: Repeats the video