15 HTML Questions for Testing Your Knowledge

Think you know HTML? Most developers probably feel they have a good handle on modern Web standards. It's with this in mind that I offer you a challenge.

Below you'll find some HTML questions that will test your familiarity and understanding of the markup language. And if you're conducting job interviews, you can use these questions to gauge a candidate's knowledge of the Web's standard markup language.

You will also find questions about closely-related markup languages and standards such as XML, XHTML, and microformats in order to really test your mettle.

There isn't a time limit or score-tracking for this "quiz", so take your time. Then, share your results in the comments.

How well do you know HTML?

Beginner Questions

Question 1

What's the name of the main international standards body that publishes HTML specifications?

See the answer

Answer: World Wide Web Consortium (W3C).

The W3C was formed in October 1994. You can find the current recommended HTML specs at w3.org, the official site of the W3C.

Question 2

How many HTML heading levels are there?

See the answer

Answer: 6.

The HTML heading elements are h1, h2, h3, h4, h5, and h6. You can use these elements to create a hierarchical outline of the contents of an HTML document.

Question 3

What's wrong with the following HTML markup?

<p style"font-size:10px;">Copyright <span>2015</span></p>

See the answer

Answer: The style attribute is missing an equals (=) sign.

But, did you know that under the current HTML standards, the double-quotes (") above are optional? As long as the attribute value has no spaces, you can drop the double-quotes. Thus, the following is valid HTML markup:

<p style=font-size:10px;>Copyright <span>2015</span></p>

Learn more about the unquoted attribute value syntax in section 8.1.2.3 Attributes of the HTML5 specs.

Question 4

Which version of Internet Explorer was the first to natively support new HTML5 elements?

See the answer

Answer: Internet Explorer 9 (IE9).

IE9 was released in March 2011. IE9 was the first to support new semantic HTML elements such as article and section, as well as canvas and inline SVG support, and more.

Question 5

What is the name of the metadata that allows you to set a value of initial-scale=2, causing a page to zoom to twice its natural size?

See the answer

Answer:viewport.

In the following example, the viewport meta tag (as it's commonly called) is used to specify that the zoom level must be twice the device's width:

<meta name="viewport" content="width=device-width, initial-scale=2">

The viewport meta tag is not a standard metadata name for the meta element. However, it is well-supported by browsers. Quirksmode has a good guide on the viewport meta tag.

Question 6

What's the name of the microformat in the following example? Fill in the blank (???).

<span class="???"><span class="latitude">52.48</span>, <span class="longitude">-1.89</span></span>

See the answer

Answer:geo.

geo is a microformat designed for semantically marking up geographic coordinates in HTML and other standard markup languages. Read more about the geo format in the Geo Microformats Wiki.

Question 7

What markup language do RSS, Atom and OpenSearch use?

See the answer

Answer: Extensible Markup Language (XML).

XML is short for EXtensible Markup Language. Learn more about the language by reading XML's W3C specs.

Question 8

What's the name of the new HTML5 element that begins with the letter K?

See the answer

Answer:keygen.

The keygen element is for marking up a control element that generates a public-private key pair, which is typically used for encryption.

Intermediate Questions

Question 9

If a hyperlink points to a resource containing copyright information about the current web page's main content, what link type can you specify on the hyperlink?

See the answer

Answer:license.

The license link type can be used as follows:

<main>
<img src="freephoto.gif" />
<a rel="license" href="copyright.html">Copyright info.</a>
</main>

Learn more about the license link type (and other hyperlink link types) by reading this guide.

Question 10

According to Microdata and Schema.org vocabulary, what's the name of the microdata boolean attribute which indicates that the element's descendants may contain information about the element?

See the answer

Answer:itemscope.

When the itemscope attribute is specified on an HTML element, it informs search engines and web browsers that descendants of the HTML element may be carrying machine-readable information about the HTML element. Search engine like Google, Microsoft, and Yahoo! use microdata markup to improve their search results.

Question 11

What is the HTML5 element that represents a line break opportunity?

See the answer

Answer:wbr.

The wbr element indicates a location in the document where there's a good opportunity to render a line break if needed. Quirksmode describes the utility of the wbr element if you are curious about this obscure HTML tag.

Question 12

What attribute can you use to specify a regular expression which describes a valid value for an input element?

See the answer

Answer:pattern.

The pattern attribute exposes a client-side, machine-readable description of how an input element is being validated. This, in turn, can be used by software such as assistive technologies to help its users understand why the form submission was not successful. The attribute can also be used for client-side input validation logic in conjunction with JavaScript.

Expert Questions

Question 13

According to the HTML5 W3C Recommendation, how many states/values does the type attribute have?

See the answer

Answer: 18.

You can see all states of the type attribute in section 4.10.5.1 States of the type attribute.

Question 14

Which HTML element can be used to express and annotate the pronunciation of East Asian characters?

See the answer

Answer:ruby.

Ruby characters are annotative characters typically associated with East Asian (e.g. Japanese and Chinese) typography.

Here is an example from the HTML5 specs which uses the ruby element:

<ruby>?<rt>?</rt></ruby><ruby>?<rt>??</rt></ruby>
4.5.21 The ruby element

Question 15

Which ARIA landmark role does the HTML5 footer element default to, if the footer element isn't inside an article or section element?

See the answer

Answer:contentInfo.

ARIA landmark roles are regions of a web page that contain navigational aids. Navigational aids are things such as a website's navigation menu or breadcrumb navigation. The contentInfo role is one of these standard landmark roles.

The contentInfo role states that the element contains information about the web page. As defined in section 3.2.7.3 Strong Native Semantics, if the footer element isn't inside an article or a section element, its role is implicitly set to contentinfo.

How Did You Do?

Don't feel bad if you didn't get them all right. I'd be quite surprised if anyone got the right answer for every single question. For the questions you managed to answer correctly, congratulations!

How many questions did you answer correctly? Which questions gave you a tough time? Share your thoughts in the comments.

Related Content

Alexander Dawson is a web designer/developer and book author specializing in web standards, accessibility, and UX design. Learn more about him over at his personal site, HiTechy.