HTML & CSS
Article

10 Typical HTML Interview Exercises

By Aurelio De Rosa

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 &amp;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 &amp;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 (h1h6) 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:

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.

Meet the author
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.
  • Chris Emerson

    Question 5 asks “Can you describe why hgroup was dropped”, but the answer given doesn’t do that at all. Some interesting questions though!

    • LouisLazaris

      You’re right, the answer didn’t really explain exactly why it was removed, but the answer was kind of there, just in a roundabout way. I added a small sentence in there to clarify it a little bit. It now says:

      The hgroup element was introduced to address this issue with ease, but it turns out this did not really solve the problem outlined above.

      Maybe Aurelio can clarify further, but I also think the reason it was dropped is because browsers and screen readers did not implement any kind of behaviour in relation to hgroup. Or possibly it was causing accessibility problems. But I’m not sure, I’d have to confirm those facts, but I think I read something about that before.

    • Aurelio De Rosa

      Hi Chris. You’re right, I missed that. We’ll fix it very soon but in the meantime the reason is: “due to lack of implementations, lack of use cases, and promoted markup anti-pattern.”

  • M S i N Lund

    What job is this for?

    Obscure HTML5 specialist?

    • Aurelio De Rosa

      No, it’s for someone who has really a good grasp of HTML and how it should be written instead of writing code like this: https://pbs.twimg.com/media/B1IdqOOIAAAop1l.png:large

      • M S i N Lund

        Yeah, because that’s how everyone wrote HTML before …

      • CTN

        Knowing html well does not make a good designer.

        • artuska

          Actually, it does — without HTML knowing you are just a picture draftsman. Knowing HTML and CSS is a must for a good web designer. (Of course, actually doing HTML/CSS and coding layout is not necessary for a designer, but he must know HTML/CSS on very good level).

          • CTN

            whatever. my experience shows differently.

          • Kelderic

            Designer != developer. I can write great code with a terrible design, and I can draw up a wonderful design on Photoshop but code it horribly. You need both good design and good code to make a great website. This article is clearly aimed at coders, not designers. If you personally do both, that’s great. That means you’re doing two jobs, not that both jobs are the same.

        • Aurelio De Rosa

          Not knowing HTML does not make a good designer either. Also because, you know, design is all about CSS not HTML.

          • CTN

            design has got nothing to do with either. it’s a raw talent. you can know html and css inside out and still be clueless as to how to make a good design.

          • Tor Iver Wilhelmsen

            You are making is sound like a designer is a divea that goes: “I have this wonderful dream in my head, why can’t the stupid technology magically do what I want?”

          • CTN

            Shut it. You’re replying to a topic that is months old and was a particularly frustrating and bad article. I don’t read SitePoint for articles like this.

            The angle of this article was all wrong.

            Your comment is just totally out of left field.

            A designer is someone who is an artist. They learn to manipulate their chosen medium. An artist who wants to do web design, would learn just enough html, css, js to make that happen.

            I am a developer. I never learn any language or coding schema inside-out. I don’t learn the most arcane and obscure things about it. I learn the parts that I need at any given time. I don’t even remember all of it. If I forget, I just google it and refresh my memory.

            Humans only retain what we use. The rest gets discarded.

          • Tor Iver Wilhelmsen

            Months old, but recently reposted in Sitepoints newsfeed. Complain to them. Also, congrats on your minimum effort.

          • CTN

            Yeah, I’m lazy and even Bill Gates insists that he’d rather hire a lazy programmer.

            I wish disqus had a block function so I could block your stupid arse. Piss off now.

        • LouisLazaris

          Did this article give you the impression that this knowledge was essential for a “design” role? Nobody said that.

          • CTN

            Give it a rest, why don’t you? You’re just becoming bloody annoying now.

            This is clearly aimed at web designers. While this article was vaguely interesting, I doubt any interviewer will ask these kinds of questions. They’re more interested in seeing portfolios.

    • LouisLazaris

      “HTML5 Ninja”

    • Jesse Supaman Nichols

      Assuming you are a developer… If you didn’t know all (Or at least MOST) of these… Then you may not be keeping up with the latest standards the way that you should be… Study up! You don’t want to get left behind! =)

    • http://www.ascendiv.com Jason (Ascendiv)

      Yeah, I have to agree, at least partially… Especially for the questions asking you to explain why “hgroup” was dropped and to explain the definition of the “main” element. The former is not something that a typical developer will need to know at all (he/she may need to know *that* hgroup was dropped, but not *why* it was; it seems unreasonable to expect developers to have delved into the history of the debate concerning specific, now-obsolete aspects of the HTML5 spec). And the latter is still a very new element, remains controversial, and doesn’t even have a firm definition yet (since there are two competing specifications), so it might be that developers concerned with getting stuff done just avoid it and use role=”main” to achieve essentially the same thing.

  • jamesthemonkeh

    I answered 2 out of 10. Going to be a long time before I can ditch this finance job!

    • Aurelio De Rosa

      A read of some articles will be enough to fix it all, don’t worry about that.

  • LouisLazaris

    Just a few thoughts on this article and similar ones we’ve published:

    In my opinion, I don’t see much value in a developer being interviewed and knowing these sorts of things from memory. I see much more value in someone who can do a quick Google search and find the answers to these questions in the right places, when necessary.

    If I was doing this interview, I’d let the interviewee use whatever he wanted to find the answers, as long as he was able to explain the answers to me in his own words, showing that he grasps what the sources are saying.

    • Stevie_D

      I disagree. Obviously it depends exactly what the work will entail, but as far as I’m concerned there is great value in having someone who knows what they are doing without having to go straight to Google every time. No, you wouldn’t expect people to get all 10 exactly right, but you would expect to see people making a reasonable stab and showing some signs of knowledge. In an interview situation, you can pick up on the difference between a candidate who knows nothing at all, and a candidate who knows something about the topic but not quite enough to articulate a perfect answer. The ‘y’ instead of ‘w’ in the picture question is pretty obscure, but the others I would say are mostly fair game.

      • LouisLazaris

        I have no problem with what you said. It will always depend on the job, but I do think an experienced front-end interviewer should have no trouble telling the difference between someone who knows their stuff and someone who’s just reading stuff from searches.

        I’m just looking at it in practical terms: Half of a web developer’s job is Googling around for solutions. So why should the interview assume any more than that? Just my two cents, like you said, every situation will be different.

        • seangore

          Being able to learn, and already knowing are two separate things. This is what makes the diffrence between a junior and a senior front-end developer. The time it takes to look something up is time that could be spent coding a semantic, structured, accessible html5 document.

          • M S i N Lund

            Being able to learn, seems infinitely more important.

            These new tags are useless until they start actually working in peoples browsers, not just ours.

            If they are useful we will use them, otherwise whats the point of having memorized a bunch of stuff you never use?

            These things are very easy to look up, when and if you need them.
            And if you actually use them often, its not as if you have look them up over and over.

            I didn’t recognize most of them, and would have flunked this.
            But once i looked them up, i realized that i had actually tried some of them out before, concluded that they didn’t work enough to be useful, and eventually forgot them again.

            There is an awful lot of new stuff being churned out these days, and it seems that most shrivel up and die.
            I have no doubt some of these tags will be regarded about as highly as once the dust settles.

            That type of natural selection, for what you know or not, seems more natural and realistic, than the idea of the rock-star-dev who knows everything.

    • markware.gr

      Luis I couldnt agree more!!!

  • Vedran Mandić

    Very informative and concise Aurelio, it’s always good to learn new (old) stuff, even when it’s not for an interview.

    • Aurelio De Rosa

      Hi Vedran.
      I’m glad you liked the article.

  • seangore

    Some great points here. Kind of funny, because I’ve been asking most of these questions too, to potential new hires.

    The longdesc is new to me, and it seems a lot like the summary attribute on a table caption (except that it accepts a link).

    For accessibility, it turns out that you don’t role=main or role=article, as those roles are now implicit in modern browsers. However, if instead of a main element, you have an article, then the role will be needed. For older browsers, of course (IE 9-), the roles will be needed.

  • Free

    I’d consider most of these questions to be more geared towards specialist accessibility than a general web designer role?

    On question 5. Would not wrapping the heading and sub heading in a header element give the appropriate semantic heading/subheading to content relationship? Putting the subheading in a span inside the h1 element gives it too much weight and seems like a hack to me.

    • Aurelio De Rosa

      Hi.
      This is what the W3C specifications suggest to do in such cases.

  • Ronnie_Gardocki

    I have some painful experience with longdesc :)

    I’m supporting a site, which is completely awful in every aspect. And the guy, who was writing it, for some reason thought that it’s a good idea to use longdesc, but he completely misunderstood how it works. So he simply duplicated ALT attribute. And now, when you checking this site with any seo broken-link inspector, you getting HUNDREDS OF THOUSANDS errors.

  • artuska

    You are reading too much specification. All this questions are absolutely useless and non-important in real life, you are just trying to be smarty interviewing web developers in your company.

    • Aurelio De Rosa

      To me this is really what make the difference between any random developer on the internet (and there are a lot of theme these days) and someone who really stands out of the crowd. That’s basically why people like John Resig are considered gurus and why the typical John Doe is not.

      • whiteknight

        One day i had an interview with amazon, they needed front end developers. One of the questions was: How do you think the browsers enggines renders HTML in the screen??

        ¬ ¬ what i mean, fuck this article!! ¬ ¬

  • Aqeel Ahmad

    It seems like I have to learn a lot

  • http://jitendravyas.com/ Jitendra Vyas

    The article is good and it’s important to know about semantics but my point is unless you work in a project where you have used the above tags and cases you would not know about it unless you follow HTML5 news. Also it may be possible that you ask all these during interview but not use all or any of them in your project.

  • http://shellshockuk.com/ shelli walsh

    This is a great article Aurelio. I love the concept of how to test your knowledge.

    It reminds me of when I went for a mac test with an agency 20 years ago when I was starting out as a graphic designer – I thought I knew how to do everything in Quark/Illustrator and then I had to sit a practical test and totally failed – was so embarrassing. But I learnt a lot about what I didn’t know.

    I thought I knew HTML… And then I read this article haha : )

    *Quickly gets out Sitepoint ‘Jump Start’ books*

    • Aurelio De Rosa

      I’m really glad you didn’t feel bad about not knowing some of the answers. The important bit here is to keep learning. I hope you’ll succeed in improving your skills with our articles.

  • Julius Koronci

    So what is wrong with this article? The answer: the title..10 typical html exercises..so there are ten questions which realty are not typical for html and it realy depends on what kind of people are you looking for..I would say most of the time you are looking for guys who are able to do the job and follow the standards set up and expected by the company..
    So does knowing the answer on the above shows anything about if someone is capable or not? I don’t think so..
    Are the questions interesting and should html developers know the answer ..maybe..

    My point is that I have a friend who would answer all the questions right but he just develops in wp and can’t really do any html :)

    Otherwise an interesting article but the title is realy wrong

  • http://www.vasta.com.ar Ale Vasta

    Great article Aurelio ! also i liked very much the JS tips typically used in a interview.

  • http://www.prollygeek.com Mohammad Taher

    I will never use these to interview someone to know his skills , been 7 years with web design and development , and i always have to search to find these little info , a good designer or developer doesnt mind these crappy stuff in his head , instead have pretty cool ideas to be different from others.

  • Randy_A

    I was under the impression that you shouldn’t be using multiple H1 tags, and should progress in numerical progress with them down the page to provide a level of importance for SEO value. I see two H1 tags…..

    • Aurelio De Rosa

      Having two or more h1 in a page won’t hurt if they are organic.

  • http://webworksagency.com WEBWORKS Agency

    Great article. Might be useful for students in the field

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.