HTML5 Flashcards Preview

Web Technologies > HTML5 > Flashcards

Flashcards in HTML5 Deck (33)
Loading flashcards...
1
Q

What is the ‘small’ tag used for?

A

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.

2
Q

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

A

Most of the attributes are not supported in HTML.

3
Q

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

A

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

4
Q

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

A

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

5
Q

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

A

Yes, you can specify that by adding

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

6
Q

Why would you want an XML compliant HTML5 document?

A

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

7
Q

Is the HTML tag required?

A

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.

8
Q

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

A

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

9
Q

What does the following do in IE?

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

(note normally in HTML angle brackets)

A

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.

10
Q

What is the section tag is used for?

A

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

11
Q

What is the header tag used for?

A

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).

12
Q

What is the footer tag used for?

A

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

13
Q

What is the aside tag used for?

A

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.

14
Q

What is the article tag used for?

A

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.

15
Q

What is the details tag used for?

A

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

16
Q

What is the summary tag for?

A

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.

17
Q

What is the main tag for?

A

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’)

18
Q

What is the nav tag for?

A

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

19
Q

What is the dialog tag for?

A

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

20
Q

What is the wbr tag for?

A

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.

21
Q

What is the mark tag for?

A

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

22
Q

What is the figure tag for?

A

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).

23
Q

What is the figcaption tag used for?

A

Providing a legend for a figure.

24
Q

What is the address tag used for?

A

Providing address information.

25
Q

Will XHTML validate when using the HTML5 doctype?

A

Yes.

26
Q

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

A

the “video” tag

27
Q

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

A

localStorage();

28
Q

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

A

sessionStorage();

29
Q

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?

A

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.

30
Q

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

A

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

body onload=’init()’

31
Q

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

A

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

32
Q

What are the steps required to draw a basic line?

A
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();

33
Q

What are the steps required to draw a red square?

A

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.