HTML interview questions

HTML quiz questions

1.
Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.

Answer:

The <header> element is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.

The <article> element is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaining. Individual blog posts or news stories are good examples.

The <section> element is a flexible container for holding content that shares a common informational theme or purpose.

The <footer> element is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.

View
2.
Discuss the differences between an HTML specification and a browser’s implementation thereof.

Answer:

HTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.

A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations.

In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one that contains syntactical errors), invalid documents may contain anything, and it is impossible for the specification to handle all possibilities comprehensively. Thus, many decisions about how to handle malformed documents are left up to the browser.

View
3.
How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?

Answer:

In HTML5, the encoding used can be indicated with the charset attribute of a <meta> tag inside the document’s <head> element:
```
<!DOCTYPE html>
<html>
<head>
...
<meta charset="UTF-8">
...
</head>
...
</html>
```
This is a slightly simpler syntax from older HTML standards, which did not have the charset attribute. For example, an HTML 4.01 document would use the <meta> tag as follows:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    ...
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    ...
  </head>
  ...
</html>
```
View
4.
What are “web workers”?

Answer:

Web workers at long last bring multi-threading to JavaScript.

A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.

View
5.
What are some of the key new features in HTML5?

Answer:

Key new features of HTML5 include:
- Improved support for embedding graphics, audio, and video content via the new , , and tags.
- Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.
- Introduction of “web workers”.
- Several new semantic tags were also added to complement the structural logic of modern web applications. These include the
  , , , , , , and tags.
- New form controls, such as , , , , , and .
View
6.
What were some of the key goals and motivations for the HTML5 specification?

Answer:

HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.

Major goals of the HTML specification were to:
- Deliver rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash).
- Provide better semantic support for web page structure through the introduction of new structural element tags.
- Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behavior, and simplify backward compatibility with documents written to older standards.
- Provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).
View
7.
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.

View
8.
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:

Italy

The shown map of Italy illustrates its division in regions...

View
9.
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.

View
10.
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:
```
6-
9 November 2014
```
View
11.
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.

View
12.
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>
```
View
13.
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:
```
The copyright of this image is owned by Aurelio De Rosa
```
View

14.

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.

View

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

View
16.
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.

View

HTML interview questions

HTML quiz questions

`Italy`

Topics you may like