HTML5

Question 1

What is the ‘small’ tag used for?

Answer 1

It’s for short pieces of text, such as terms of service, caveats, copyright etc. It should not be used for extended text (i.e. multiple paragraphs).

Small text does not diminish the importance of text contained within it - i.e. if you have something wrapped in a strong tag, it’s still strong regardless of whether it’s in the small tag.

Question 2

The colgroup tag is used in tables to apply styles to an entire column - what is the problem with using this in HTML 5?

Answer 2

Most of the attributes are not supported in HTML.

Question 3

Why does the HTML5 doctype not have a version number in it?

Answer 3

It’s considered a living standard and will change as new specifications are released.

Question 4

Why does HTML5 no longer require a reference to a DTD in the doctype declaration?

Answer 4

Because it is no longer based upon another standard. HTML5 is simply HTML.

Question 5

Is it possible to have an XML compliant version of HTML5 document?

Answer 5

Yes, you can specify that by adding

the attribute xmlns=”http://www.w3.org/1999/xhtml” to the HTML tag in the document.

Question 6

Why would you want an XML compliant HTML5 document?

Answer 6

Generally you wouldn’t - but it’s useful if you wanted to parse the document in an XML parser.

Question 7

Is the HTML tag required?

Answer 7

No - it’s actually optional - but it’s a good idea to use it anyway as it makes the markup clearer. Also there are some bugs relating to this in IE9 and lower.

Question 8

Why should you always specify that your site is UTF-8 encoded?

Answer 8

You may open yourself up to a XSS attack via UTF-7

Question 9

What does the following do in IE?

meta http-equiv=’X-UA-Compatible’ content=’ID=Edge’

(note normally in HTML angle brackets)

Answer 9

In IE users can specify how to read a document. This will force IE to use the latest mode for HTML5, possibly preventing XSS attacks.

Question 10

What is the section tag is used for?

Answer 10

Represents a generic document or section of an application. It should be to stand on it’s own.

Question 11

What is the header tag used for?

Answer 11

It represents the introductory section of a HTML document or section (note it can appear multiple times in a page, even once for each section).

Question 12

What is the footer tag used for?

Answer 12

Represents information that should come at the end of a document or section, again, can appear multiple times in a single document.

Question 13

What is the aside tag used for?

Answer 13

It is used for content that is loosely associated with other content around it, but could be considered separate. An aside will often be visually separated from the content around it by a border or different font.

Question 14

What is the article tag used for?

Answer 14

Should be used to separate content that could be distributed separately or independantly from other content within the document. This could be something like a blog post or a review. It’s similar to a section, but it should ONLY be used to separate content, not generic sections of the document.

Question 15

What is the details tag used for?

Answer 15

Contains additional details that a user can choose to show or hide.

Question 16

What is the summary tag for?

Answer 16

Contains a summary of the contents that appears in the details tag. The idea being that if the summary can be shown to the user when the document loads, they can choose to view the details if they so wish.

Question 17

What is the main tag for?

Answer 17

This should be used to surround the main section of the document. Should only be used once per page.

NOTE: It should only contain the main content of THAT document, and not include things that are spread across multiple pages (i.e. nav menus, search boxes, widgets etc).

Main should not be a descendant of article/aside/footer/header or nav elements.

It’s recommend that the ARIA role ‘main’ is used until agents properly implement the role mapping. I.e. (main role=’main’)

Question 18

What is the nav tag for?

Answer 18

Contains a set of navigation links - such as menus etc.

Question 19

What is the dialog tag for?

Answer 19

Used for dialog boxes and windows. The element supports an attribute called ‘open’ that indicates whether the dialog is active to the user.

Question 20

What is the wbr tag for?

Answer 20

It provides a hint to the browser that it could add a line break. Useful if the browser is adding line breaks in the wrong place due to a long word.

Question 21

What is the mark tag for?

Answer 21

Used to indicate a piece of text is highlighted. Browsers will add a background color to the text that can be overridden in CSS.

Question 22

What is the figure tag for?

Answer 22

Can be used to surround self contained content such as photos and illustrations. This element is block display, rather than inline-block (which images usually are).

Question 23

What is the figcaption tag used for?

Answer 23

Providing a legend for a figure.

Question 24

What is the address tag used for?

Answer 24

Providing address information.

Question 25

Will XHTML validate when using the HTML5 doctype?

Answer 25

Yes.

Question 26

If you don’t want to put a video on youtube, what HTML5 element can you use to embed a video?

Answer 26

the “video” tag

Question 27

What HTML5 API is used to store data locally on the browser?

Answer 27

localStorage();

Question 28

What HTML5 API is used to store data in a session for short lived data?

Answer 28

sessionStorage();

Question 29

When using the canvas element, there is a possibility that the user may not have a browser that supports the element - how do we communicate this to the user?

Answer 29

Anything within the canvas element will be written to the screen (like the noscript tag) if the canvas element is not supported. So you can put an error message in here in HTML.

Question 30

What is the simplest way to start a script executing, using the HTML attributes of a page?

Answer 30

in the body tag there is an ‘onload’ attribute. Simply point that to the appropriate function.

body onload=’init()’

Question 31

What are the basic steps to setting up 2D drawing in the canvas?

Answer 31

Get the element id of the canvas
Get a 2D context
call the draw method

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');

draw(); // Function which handles actual drawing

Question 32

What are the steps required to draw a basic line?

Answer 32

set the stroke style
set the fill style
set the linewidth
call "beginPath()"
move to start position
draw line to end position
stroke the line (actually draw it)
call "close path"

// Define a line

ctx. strokeStyle = “#000000”;
ctx. fillStyle = “red”;
ctx. lineWidth = 2;
ctx. beginPath();
ctx. moveTo(90, 90);
ctx. lineTo(350, 90);
ctx. stroke();
ctx. closePath();

Question 33

What are the steps required to draw a red square?

Answer 33

Set the fill style
Fill the rect
Set the stroke style // This adds an outer border
Set the line width // This sets the border width
Stroke the rect

// Red square

ctx. fillStyle = ‘#ff0000’;
ctx. fillRect(30, 30, 50, 50);
ctx. strokeStyle = ‘#000000’;
ctx. lineWidth = 3;
ctx. strokeRect(30, 30, 50, 50);

NOTE: If you don’t want a line around the square, you don’t have to set the stroke style or the line width.