Learn efficiently and remember over time.
Start Long-Term Learning
Add this set to a folder
Hypertext Markup Language (HTML) is called a markup language because ___
you use it to describe (mark up) pieces of content to display on a Web page.
A Web page with markup means it includes tags, which are ___
keywords that help to give an HTML page structure.
When a Web browser or mobile device such as a smartphone opens an HTML file, it ___
renders (interprets and reproduces) the content of the page.
Most tags come in pairs; one tag is called the ___, and the other is the
closing or end tag.
opening or start tag
Most tags come in pairs; one tag is called the opening or start tag, and the other is the
closing or end tag.
A closing tag is identical to an opening tag except the closing tag includes a ___
slash before the keyword.
HTML5 is less restrictive than HTML 4. You don't have to ___ for all elements (although some elements still require start and end tags), and you can enter tags in uppercase or lowercase.
include end tags
HTML5 is less restrictive than HTML 4. You don't have to include end tags for all elements (although some elements still require start and end tags), and you can enter tags in ___
uppercase or lowercase.
The <html> tag encompasses everything on the page other than the ___
doctype declaration at the top.
<head> ? ___
Contains markup and code used by the browser, such as scripts that add interactivity, and keywords to help search engines find the page. Content in the <head> tag can also include formatting styles for the page.
<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.
<a href=URL> ? ___
Generally used to «anchor» a URL to text or an image; can also create a named «anchor» within a document to allow for linking to sections of the document.
A tag pair or an empty tag is also called an ___
element. An element can describe content, insert graphics, and create hyperlinks.
Not all tags describe data on their own or at least not in enough detail for rendering, so some elements must include ___
«attributes», which are modifiers of HTML elements that provide additional information.
You must include an attribute within a tag so that the Web browser knows how to handle ___
A good example of an attribute is when creating a hyperlink, as follows: ___
<a href="http://www.xpto.com">This is a link.</a>
HTML5 includes several «global attributes», which you can use with any HTML5 element. Examples of global attributes include ___
id, lang, and class, etc
example of correct nesting: ___
<p>Make sure your pet has plenty of <i><b>fresh water</b></i> during hot weather.</p>
When two or more elements apply to the same block of text, you should nest tag pairs appropriately so that ___
they do what you intended.
An «entity» is a special character, such as the ___
dollar symbol, the registered trademark (a capital R within a circle), and accented letters.
Each «special character» that can be reproduced in a Web page has an ___
«entity» name and a numerical code.
the «entity» ® represents the ___
registered trademark symbol (®), and its numerical code is ®
Another important thing to know about character encoding in HTML5 is that you should use UTF-8 encoding whenever possible, because ___
most browsers use UTF-8.
you should use UTF-8 encoding whenever possible, because most browsers use UTF-8. That means you add the following declaration to the head element: ___
The HTML5 specification requires that the whole meta element fits in the first 1,024 bytes of the document, which is why you include it at ___
the top of the page in the head element.
When a Web browser reads a doctype declaration, the browser assumes that everything on the Web page uses the ___
language or rules specified in the declaration.
The DTD is simply a set of rules that help a Web browser turn tags and content into ___ ( html4)
the pages you see on the Web.
This simplified doctype is partially responsible for why HTML5 pages easily lend themselves for viewing in a ___
Web browser on a computer or a mobile device.
The blank lines between parts of the page, such as between the doctype declaration and the <html> tag, don't ___
appear on a Web page.
you can use the W3C's validation service at http://validator.w3.org to ___
check and validate HTML code.
In Internet Explorer 9, you can press F12 to open browser mode. This mode enables you to edit pages without leaving the browser. In addition, you can click «Document Mode» on the menu bar and then ___
select an older version of the browser to see how a page renders.
it's best to use a variety of Web browsers to ensure your markup ___
renders as expected for the widest audience.
HTML5 also includes many new elements that increase the ___
functionality of Web pages or streamline the markup.
Some HTML 4 text-related elements now have slightly different ___
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.
Note that the strong element will look like the bold element. The W3C prefers that you use <strong> over ___
<b>, although they seem to produce nearly identical results.
New text-related elements in HTML5 include ___
<command>, <mark>, and <time>, <meter> and <progress>..
<command>: The command element is used to define a command button that ___
users click to invoke a command.
<time>: The time element indicates content that is a ___
time or date, which can be made machine-readable with the «datetime» attribute.
<time>: The time element indicates content that is a time or date, which can be made machine-readable with the ___
One benefit of making times and dates machine-readable on your Web page is that it helps ___
search engines produce better
<mark> element example: ___
<p>Your dog is a <mark style="background-color:orange;"> friend for life</mark>.
<time> element examples: ___
Removing elements from the
list of available HTML elements is referred to as ___
deprecation. (The same thing applies
Cascading Style Sheets (CSS) : ___
to change the look and feel of text, images, and other Web content separates style from content.
The following HTML elements are considered deprecated and are not supported in HTML5 pages: ___
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
<strike> element is considered deprecated so use ___
the <del> tag instead for small amounts of text, or use CSS for large blocks of text.
a best practice is to create pages assuming Web page visitors use a current or near-current browser, which means using ___
the latest HTML elements.
The following attributes are not used in HTML5, although these attributes are not actually part of any HTML specification: ___
bgcolor, bordercolor, bordercolorlight, bordercolordark
The «figure» and «figure caption» elements are new to HTML5, and give you more ___
control of the type of image you are displaying and the ability to include captions.
The «canvas» element is used for ___
drawing, rendering, and manipulating images and graphics dynamically in HTML5.
Scalable Vector Graphics (SVG) enables you to create ___
scalable objects that resize to best fit the screen on which they're viewed, whether a PC screen or a smartphone.
You can display different kinds of images on a Web page, most of which fall into two main categories: ___
raster (or bitmap) and vector
A photograph is a type of raster image and is most often in JPG format. Other raster file formats that work well on Web pages are ___
PNG, GIF, and BMP
raster images lose quality (they become pixelated) as you enlarge them, but vector images ___
maintain quality even when enlarged.
to insert an image named redball.jpg that's in a subfolder called images, type this element: ___
<img src="images/redball.jpg" alt="Red ball graphic" />
The W3C requires the «alt attribute» for accessibility by ___
people with disabilities. People with limited vision may use a screen reader, which reads aloud the alternate text for each image.
Search engines also use the «alt attribute» to identify types of images and what's in them, since search engines can't ___
"see" pixels in images.
to insert an image named bluelogo.png that's accessible from another Web site, type the following element: ___
<img src="http://www.example.com/mrkt/images/bluelogo.png" alt="Company XYZ blue logo" />
The «figure» element specifies ___
the type of figure you want to use in an HTML document, such as an illustration or photo.
The «figure» element specifies the type of figure you're adding, such as an image, diagram, photo, and so on. This element provides a major benefit: ___
the ability to easily add multiple images side by side.
The «figcaption element» is optional. It adds a caption to an image on a Web page, and you can display the caption ___
before or after the image.
The following markup uses the figure element, specifies the width and height of the image, and adds a caption: ___
<img src="doghappy.jpg" alt="Happy dog" width="100" height="125" />
<figcaption>Happy dogs are good dogs</figcaption>
The following markup is for a figure with multiple images that share a single caption, the results of which are: ___
<img src="x.jpg" alt="xxx" width="100" height="125"/>
<img src="y.jpg" alt="yyy" width="100" height="125"/>
<img src="z.jpg" alt="zzz" width="100" height="125"/>
<figcaption>xxx yyy zzz ytytytt</figcaption>
The «canvas» element is new in HTML5 and creates a container for ___
draw pixel-based shapes on a canvas that include color, gradients, and pattern fills.
Canvas also enables you to render ___
text with various embellishments, and animate objects by making them move, change scale, and so on.
The basic syntax for the canvas element is as follows: ___
<canvas id="smlRectangle" height="100" width="200"></canvas>
<!-- This element creates your drawing pad. -->
The canvas element requires the «id» attribute to reference the canvas in ___
head element of your HTML document, or in an external file.
<body onload = "f1();">
This script first finds the element with the id smlRectangle: ___
var canvas = document.getElementById("smlRectangle");
The context.fillStyle method fills the rectangle with a blue color using the RGB values 0, 0, 255 : ___
context.fillStyle = "rgb(0,0,255)";
context = canvas.getContext("2d");
The context.fillRect method creates a 200-pixel wide x 100-pixel tall rectangle, positioned 10 pixels down and 20 pixels over from the upper-left corner of the canvas and fills it using the color specified by fillStyle: ___
context.fillRect(10, 20, 200, 100);
To create an outline of a rectangle without a fill color, use the context.strokeRect method: ___
context.strokeStyle = "red";
Some older browsers cannot render canvas drawings or animation. Therefore, you should add an ___
image, text, or some other HTML content within the canvas element that will display if the drawing cannot.
The "backup" content, also referred to as fallback content, won't display if ___
canvas is supported.
To add a fallback to your HTML document, replace the canvas element with the text (e.g.): ___
<canvas id="smlRectangle" height="100" width="200"> Your browser does not support the canvas tag. </canvas>
Scalable Vector Graphics (SVG) is a language for describing ___
2D graphics in Extensible Markup Language (XML).
SVG technology is not new, but HTML5 now enables SVG objects to be embedded in Web pages without ___
using the <object> or <embed> tags.
The main purpose of SVG, as its name implies, is to create ___
scalable vector graphic shapes, but you can create images and text as well.
Because only the XML that describes the SVG graphic is transmitted, even large images don't require a lot of ___
You can include attributes such as color, rotation, stroke color and size, and so on, to ___
each SVG object.
The following markup can be included in an HTML file to create a purple ball: ___
<svg id="svgpurpball" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="purpball" cx="40" cy="40" r="40" fill="purple" />
There are no hard and fast rules for choosing to use canvas or SVG. Your choice depends mainly on the nature of ___
your project, and your skill level in one or the other.
If the drawing requires a large number of objects, use canvas. SVG begins to ___
degrade as it continually adds objects to the DOM.
As the size of the screen increases and more pixels are needed, canvas begins to pixelate so use ___
If you are ___, such as maps, map overlays, weather data, and so on, use canvas.
displaying real-time data output
A tip from Microsoft: Think of canvas as being similar to ___. You can draw images using shapes and other tools, and the result is pixel based.
The audio element and video element are two of the major changes in HTML5, enabling you to ___
provide multimedia from a Web browser without the need for plugins.
You use the «video» element along with the «src» attribute to designate a ___
a video file to be played in an HTML document.
The following is an example of the markup for adding an MP4 file to a Web page: ___
<video src="intro.mp4" width="400" height="300">
Other attributes are available that you can add for control of the video: ___
poster, autoplay, controls, loop
Displays a set of controls for playing, pausing, and stopping the video, and controlling the volume
This markup refers to an MP4 video file: ___
<video src="/videos/x.mp4" width="400" height="300" poster="x.jpg" autoplay="autoplay" controls="controls" loop="loop">
Other popular Web video formats also include H.264, OGG, and ___
WebM, although WebM is used less than 10 percent of the time.
Along with a video format, you should also specify the «codec», which is a technology used for ___
«Compression» reduces the amount of space needed to store a file, and it reduces the ___
bandwidth needed to transmit the file.
«Video compression» reduces the size of video images while retaining the highest quality video with the minimum ___. All of this makes for better performance.
The main video formats along with codecs (for the last two) are: ___
• MP4 or H.264
• OGG + Theora with Vorbis audio
• WebM + VP8
The <source> tag is being used as content of the video element so that the type attribute can be set and so that the multiple format option is available: ___
<source src="intro.mp4" type="video/mp4" />
Not all video formats are supported by all browsers, although MP4/H.264 is the most widely used by both ___
Web browsers and mobile devices.
To help make your video viewable by the majority of browsers and devices, you can use the source attribute to ___
include multiple formats in your markup.
This example shows the same video available in two formats, and the OGG format specifies codecs: ___
<video width="400" height="300" poster="x.png" autoplay="autoplay" controls="controls" loop="loop">
<source src="x.mp4" type="video/mp4"/>
<source src="x.ogv" type='video/ogg codecs="theora, vorbis"'/>
HTML5 allows you to use a shorthand method of specifying the controls attribute: ___
replace controls="controls" with simply «controls». The same principle applies to the «autoplay» and «loop» attributes.
To use the «audio» element, include the <audio> tag and a path to the file on your hard drive or a ___
uniform resource locator (URL) that points to the audio file.
The «audio» element enables you to incorporate audio, such as ___
music and other sounds, in HTML documents.
To help ensure your audio plays on the majority of ___, use the source attribute to include multiple formats in your markup.
browsers and devices
This example shows the same audio file available in two formats: ___
<source src="x.ogg" type="audio/ogg" />
<source src="x.mp3" type="audio/mp3" />
Vector graphic changes size to fit the screen on which it's displayed, whether the screen is on a 32-inch computer monitor or a ___
mobile device like a smartphone.
A tip from Microsoft: Think of SVG as being similar to an ___ slide, which uses scalable objects.
The <object> tag defines an ___
embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
Text between the <video> and </video> tags will only display in browsers that ___
do not support the <video> element.
HTML5 defines DOM methods, properties, and events for the <video> element. This allows you to ___
load, play, and pause videos, as well as setting duration and volume.