Typical HTML Interview Exercises

Markup validation

Consider the following markup.
Is it valid? If not, can you explain why?

#html

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.

#html

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.

#html

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

#html

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

#html

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

#html