Menu

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.

This was published on May 13, 2015

23 Comments

This was fun! This would be a great test for beginners! Thanks for the share.

    Skweekah May 14 2015

    Beginners! I think that this would stump many advanced users.

Nimsrules May 14 2015

The article is no doubt informative but you can’t expect to test out beginners or as a matter of fact any regular HTML5 developer with most of these because they’re rarely ( or never ) used in day to day life.

    So, heading tags, equals signs and viewport (among others) are rarely used? Where do you work?

      Jacob Gube May 14 2015

      To be fair to Nimsrules, in the 15+ years I’ve been using HTML, I’ve never had the opportunity to use the <ruby> and <keygen> tags.

      Nimsrules May 14 2015

      I thought you missed the word ‘most’.

Wow, in the 10 years I work as a front-end/back-end developer I must say I never heard of the tag before…!

Thanks for sharing this list!

    Jacob Gube May 14 2015

    For security purposes, the WordPress comment system removes HTML tags unless you convert them to escaped characters. Sorry about that Ewout. A tool such as this one can help.

Rashmi Reddy May 14 2015

I was able to answer only 6 and thanks for the questions.

nathaniel May 14 2015

Wow i am the chief designer at flywebmedia.com & i only got 9 correct!

Ricardo Zea May 16 2015

Very interesting bunch of questions.

Question 13 is a bit misleading with the term “states” and I understand this comes from the W3C’s documentation.

I thought “states” referred to :hover, :active and :focus.

What those “states” really mean is “values”. You always refer to this kind of thing as ‘attribute, value pair’.

    Jacob Gube May 16 2015

    I agree with you. The term “states” is not very common. Sometimes (or rather, many times) the standards use terms that are not very intuitive. The W3C vocabulary is accurate and unambiguous, but not very reader-friendly. So I updated that question so that it now reads, “states/values”.

    P.S. :active, :focus, etc. are CSS pseudo-classes.

      Ricardo Zea May 16 2015

      Thanks for updating the question, it’s much clear now.

      Yes, pseudo-classes. I was referring to the states as ‘hover’, ‘active’ and ‘focus’… They just happen to use the same terms as the pseudo-classes :p

      Jacob Gube May 16 2015

      @Ricardo Zea Ah, yes. Definitely confusing. “State” can be seen as the current state of the input field, such as if it’s being hovered on, or if it’s the active input field, or if it has the focus. Good point. For me, what you’ve just said really highlights the vocabulary’s un-intuitiveness for this particular part of the specs.

I only got 5 right, but I’m still learning… there is soooo much to learn, but it makes my day when I can answer one question and not quess… thanks for the quiz..

    Jacob Gube May 16 2015

    That’s pretty good, especially considering that you’re still learning! Great job Jacks, and keep it up!

Jesse Nichols May 19 2015

I’m pretty proud of myself! I got 13/15! I haven’t used a lot of the knowledge, but I obsessively read documentation. Lol. I missed 13 and 14…

    Jacob Gube May 19 2015

    Wow! Great job Jesse! This is a tough set of questions. To get that many correctly means you’ve got a really good knowledge of HTML.

Wow!! nice dude..thanks for sharing this awesome questions…but swear, i never use and tag in my life and some questions are really new for me.

    Jacob Gube May 28 2015

    Awesome!

    BTW, sorry Pranab, our commenting system removes HTML tags unless you escape the reserved HTML characters, so the phrase in your comment “i never use and tag in my life” will appear incomplete.

Naveed Baig Jun 16 2015

Thanks For Sharing This Questions.

This was great! MORE MORE MORE!

This comment section is closed. Please contact us if you have important new information about this post.

Partners