A few weeks ago SitePoint published two of my articles discussing some commonly asked JavaScript job interview questions (in case you missed them, the articles are 5 Typical JavaScript Interview Exercises and 5 More JavaScript Interview Exercises).
Both these articles have been a huge success in terms of page views and shares, which was quite unexpected. So, I thought it was time to write a similar article based on job interview questions on HTML and this is the result of my effort. Have fun!
1. Markup validation
Consider the following markup:
<figure>
<picture>
<source media="(min-width: 40em)"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320y">
<img src="medium.jpg" alt="London by night">
</picture>
<figcaption>A landscape of London by night</figcaption>
</figure>
Is it valid? If not, can you explain why?
Answer
The markup uses the picture element, which is a pretty new addition to the specification. The code is all valid apart from the last image specified in the srcset
attribute; 320y
isn’t a valid value. If the y
is replaced with a w
, it becomes valid though.
2. The main
element
Can you explain the definition of the main
element? What is its goal? Are the two specifications (WHATWG and W3C) in agreement on its definition?
Answer
The main
element has two different definitions depending on the specification used.
The W3C specification describes it as the main content of the page, that is, the content that describes the main topic of a page or is the central functionality of an application. The specification also states that a document must not include more than one main
element.
The WHATWG specification doesn’t assign any semantic value to the main
element and describes it as a container for the dominant contents of another element. Also, according to WHATWG, you don’t have a limit in the number of times you can use the main
element in a single document. If you have multiple article
elements on a page, you may want to markup the main content of each article
with a separate main
element.
3. WAI-ARIA
Consider the following snippet:
<header>
<h1>Main title</h1>
<form action="/" method="get">
<input type="search">
<input type="submit">
</form>
</header>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
</ul>
<main>
<article>
<h1>Main title</h1>
<p>This is the content of this section</p>
</article>
</main>
<footer>
<small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>
Can you improve its accessibility using WAI-ARIA roles where appropriate, taking into account older technologies?
Answer
The code can be rewritten as follows:
<header role="header">
<h1>Main title</h1>
<form action="/" method="get" role="search">
<label for="search">Search:</label>
<input id="search" type="search">
<input type="submit">
</form>
</header>
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main role="main">
<article role="article">
<h1>Main title</h1>
<p>This is the content of this section</p>
</article>
</main>
<footer role="contentinfo">
<small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>
To improve the accessibility, the main navigation list has been wrapped with a nav
element. To improve the accessibility in older technologies that don’t support the new semantic elements, the role of header
, navigation
, main
, article
, and contentinfo
have been added to the header
, nav
, main
, article
, and footer
elements respectively.
Other improvements have been made on the search form. First of all the form has been marked using the search
role. Then, an explicit label
element has been added to give context for the input
field, and it has been associated with the input
through the use of the for
attribute.
4. The small
element
Describe when it’s appropriate to use the small
element and provide an example.
Answer
In HTML 4.01 the small
element was a presentational element to mark up smaller text. In HTML5 it should be used semantically to represent legal disclaimers, caveats, and so on. The text may well be “small”, but this isn’t required.
An example of its use is shown below:
<img src="image.jpg" alt="London by night">
<small>The copyright of this image is owned by Aurelio De Rosa</small>
5. Subheadings
Subheadings are one of the most common elements in any website. A few years ago the hgroup
tag was introduced to address this need, but it has since been removed from the specs. Can you describe why hgroup
was dropped and how the markup can be addressed today?
Answer
The hgroup
element was introduced to group multiple heading elements (h1
–h6
) in order to avoid the creation of an unintended sublevel in the hierarchy. To understand what problem it tried to address, let’s consider the following markup:
<article>
<h1>Main title</h1>
<h2>This is a subtitle</h2>
<p>This is the content of this section</p>
</article>
Outlining the document hierarchy of the previous snippet gives us the following representation:
h1
|
---h2
|
p
This simple schema shows that the paragraph content of the snippet is seen as the content of the h2
instead of the h1
, regardless if this was the intended behavior or not. So if the intention was simply to create a subheading and to associate the p
with h1
, the original markup was incorrect.
The hgroup
element was introduced to address this issue with ease. Therefore, it was removed from the HTML5 specification in April 2013, due to lack of implementations and lack of use cases, making its use invalid.
A possible solution to create a subtitle so that the paragraph is associated to the h1
is shown below:
<article>
<h1>
Main title
<span>This is a subtitle</span>
</h1>
<p>This is the content of this section</p>
</article>
6. Images and accessibility
Is the alt
attribute mandatory on img
elements? If not, can you describe a scenario where it can be set to an empty value? Does an empty value affect accessibility in any way?
Answer
The alt attribute is mandatory on img
elements but its value can be empty (i.e. alt=""
). An empty value is recommended when the image shown is used for decorative purposes only and therefore isn’t part of the content of the page. With regards to accessibility, if the alt
attribute is empty, screen readers will ignore the image. This is highly recommended because using a value of something like “Content separator” will only disturb the user when this text is spoken.
7. The time
element
Is it possible to express a date range using a single time
element?
Answer
No, it isn’t possible. The information can be expressed using two time elements though. For example to describe a time interval ranging from November 6, 2014 to November 9, 2014, a developer can write:
<time datetime="2014-11-06">6</time>-
<time datetime="2014-11-09">9 November 2014</time>
8. meter
and progress
What’s the difference between the meter
element and the progress
element?
Answer
The meter element represents a scalar measurement within a known range, or a fractional value. This element isn’t a good fit to measure something like external temperature because it doesn’t have a fixed range. However, meter
can be used to describe the occupied memory of a hard disk.
The progress element is used to show the completion progress of a task. Unlike the meter
element, the progress described by progress
can be indeterminate. For example you could describe that a given task is progressing but that it is unknown when the task will be completed.
9. The longdesc
attribute
What is the longdesc
attribute? Can you explain its purpose?
Answer
The longdesc
attribute of the img
element has been around since HTML 4 and is also valid in HTML5. This attribute is designed to provide a more detailed description of an image, compared to the information offered in the alt
attribute. The interesting thing is that instead of providing a description by itself (like the alt
attribute does), longdesc
points to a hyperlink containing the description.
An example of the use of longdesc
is presented below:
<img src="italy.jpg"
alt="This image represents the map of Italy" longdesc="italy.html#description">
<!-- other content here ... -->
<section id="description">
<h2>Italy</h2>
<p>The shown map of Italy illustrates its division
in regions...</p>
</section>
10. The mark
element
What is the mark
element? Can you describe an example of use for this element?
Answer
The mark element represents highlighted text. A typical use is to highlight every instance of the keyword or keywords searched by a user.
Conclusion
In this article I’ve discussed ten potential interview questions that you can use to test your knowledge of HTML. The questions you may be asked in your next interview may include one or more of these.
To help you study up on these and other semantics-related topics, be sure to check out the links provided in the article to the spec, and here are some further SitePoint resources:
- 5 Obsolete Features in HTML5
- A Guide to the HTML5 ‘time’ Element
- 20 HTML Elements for Better Text Semantics
- Replacing Radio Buttons Without Replacing Radio Buttons
- Everything You Need to Know About HTML’s ‘pre’ Element
Have you been asked some other interesting HTML questions in interviews? Share them with us, they may help other developers when doing interviews for positions in the future.
Frequently Asked Questions (FAQs) about HTML Interview Exercises
What are some common HTML5 features that interviewers ask about?
HTML5, the latest version of HTML, has introduced several new features that are often the focus of interview questions. These include semantic elements like
How can I explain the difference between HTML elements and attributes during an interview?
HTML elements refer to the individual components of an HTML document or web page. They are represented by tags and usually come in pairs, including a start tag and an end tag. For example,
is a paragraph element. On the other hand, attributes provide additional information about an element. They are always specified in the start tag and usually come in name/value pairs. For example, in
, “align” is an attribute name and “center” is its value.
What is the Document Object Model (DOM) and why is it important in HTML?
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree-like model, allowing programmers to manipulate the content and structure of the document. Understanding the DOM is crucial for HTML as it allows the creation of dynamic web pages. With the DOM, JavaScript can create, read, update, and delete HTML elements.
How can I describe the function of Doctype in an HTML document?
The Doctype declaration is the first line in an HTML document and it is used to inform the browser about the version of HTML that the page is written in. It ensures that the browser renders the page in standards mode, which supports the latest HTML specifications. Without specifying a Doctype, the browser may render the page in quirks mode, which is a backward-compatible mode with older versions of HTML.
How can I explain the concept of Semantic HTML?
Semantic HTML refers to the use of HTML markup to reinforce the semantics or meaning of the content. In other words, it uses HTML tags for their given meaning, not for their physical appearance. This makes the web content more accessible and easier to understand for both the users and search engines. Examples of semantic elements include
What is the importance of HTML validation?
HTML validation is the process of checking a web page against the formal grammar of the HTML specification. It is important because it ensures that the HTML code is in compliance with the web standards, improves web page performance, and enhances its accessibility and cross-browser compatibility. It also helps in identifying and fixing errors in the code.
How can I describe the role of CSS in HTML?
CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in HTML. It separates the content of the document from its presentation, making it easier to maintain and update the website’s design. CSS can control layout of multiple web pages all at once, and it can be used to create a responsive design that makes web pages look good on all devices.
What is the significance of HTML entities?
HTML entities are used to represent reserved characters in HTML that have a special meaning. For example, the less than (<) and greater than (>) signs are used to define HTML tags. To display these characters as text on a web page, you would use the entities < and >. HTML entities can also be used to display characters that are not present on the keyboard, like copyright symbol (©) or mathematical symbols.
How can I explain the concept of HTML forms?
HTML forms are used to collect user input. The
What is the role of meta tags in HTML?
Meta tags provide metadata about the HTML document, which is information about the document that is not displayed on the page itself. They are placed inside the
element at the top of the HTML document. Meta tags can be used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content), search engines (keywords), or other web services.I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.