- Home
- Blog
- Web Design 15 HTML Questions for Testing Your Knowledge
15 HTML Questions for Testing Your Knowledge
- 7 min. read
-
William CraigCEO & Co-Founder
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
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.
Beginner Questions
Question 1
What’s the name of the main international standards body that publishes HTML specifications?
See the answer
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
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
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
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
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
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
Question 8
What’s the name of the new HTML5 element that begins with the letter K?
See the 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
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
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
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
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
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
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
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
- 20 Questions to Know for Avoiding Website Project Disasters
- 60 Questions to Consider When Designing a Website
- Semantic HTML for Web Content
- 10 Useful Infographics about HTML5
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.
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorWeb Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator