Ten Typical Questions at HTML Interviews
Aurelio De Rosa a few days ago released, in my opinion, a very attractive article that I want to share with you in case you are not good with English.
A few weeks ago, two of my articles were published on SitePoint, in which I reviewed the most frequently asked JavaScript questions during the interview (in case you missed: “5 Typical JavaScript Interview Exercises” and “5 More JavaScript Interview Exercises” ).
Both of these articles were a huge success, which was very unexpected. I decided it was time to write a similar article, but already on the subject of HTML - and that's what I did.
Consider the following markup:
')
Is this code valid? Explain why.
The markup uses the picture tag , which has just recently entered the specification. The code is valid up to the last image in the
Define the
The W3C specification describes an element as the main content of the page, that is, content that describes the main theme of the page or is a key element of the application's functionality. The specification also states that the page can not have more than one
The WHATWG specification does not endow the
Consider the following markup:
Can you improve the accessibility of markup using WAI-ARIA roles, where possible, given the old technology?
The code should be rewritten as follows:
To improve accessibility, a navigation list has been placed in the
Another improvement concerns the search form. At first, the
Element
Tell us when the use of the
The
An example of use is shown below:
Subheadings are one of the most common elements in any website. A few years ago, the
The
This is what we get if we try to draw a hierarchy of the above markup:
This simple scheme clearly shows that a paragraph is the content of the
Actually, the
The solution to the problem of creating a subtitle so that the following paragraph is related to
Is the
The alt attribute is required for the
Is it possible to display a date range with a single
No impossible. You can present this information using two time elements . For example, in order to submit a time interval from November 6, 2014 to November 9, 2014, the developer can write:
What is the difference between the
“The meter element is intended to represent a scalar measurement within a known range or fractional value. This element is not well suited for measuring something like temperature, because it does not have a fixed range. However,
The progress element is used to show the progress of the task. Unlike the
What is the
The
The following is an example of using the
What is the
The mark element highlights the text. A common usage example is highlighting a keyword or keywords that the user is looking for.
In this article, I looked at ten interview questions that you can use to test your knowledge of HTML. In your next job interview, you can use one or more of them.
To help you learn these and other related semantics questions, I recommend reading some of the following SitePoint articles:
If you have interesting questions on HTML? Share them in the comments, perhaps, by doing so, you will help other developers when they pass their interview.
A few weeks ago, two of my articles were published on SitePoint, in which I reviewed the most frequently asked JavaScript questions during the interview (in case you missed: “5 Typical JavaScript Interview Exercises” and “5 More JavaScript Interview Exercises” ).
Both of these articles were a huge success, which was very unexpected. I decided it was time to write a similar article, but already on the subject of HTML - and that's what I did.
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 this code valid? Explain why.
Answer
The markup uses the picture tag , which has just recently entered the specification. The code is valid up to the last image in the
srcset attribute; 320y - invalid value. If you change y to w , then the code will be completely valid.main element
Define the
main element. What is its purpose? Do the definitions of this element meet the W3C and WHATWG specifications?Answer
main element does not have a single definition and in each specification it is different.The W3C specification describes an element as the main content of the page, that is, content that describes the main theme of the page or is a key element of the application's functionality. The specification also states that the page can not have more than one
main element.The WHATWG specification does not endow the
main tag with any semantics and describes the element as a container for the predominant content of any element. Also, according to the WHATWG, you are not prohibited from having several main elements on one page. If you have several article elements on the page, then you can select the main content of each article with the help of the main tag.WAI-ARIA
Consider the following markup:
<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 © Aurelio De Rosa 2014</small> </footer> Can you improve the accessibility of markup using WAI-ARIA roles, where possible, given the old technology?
Answer
The code should 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 © Aurelio De Rosa 2014</small> </footer> To improve accessibility, a navigation list has been placed in the
nav tag. To improve accessibility for old technologies that do not support new semantic tags, the header , navigation , main , article , and contentinfo have been added to the header , nav , main , article , and footer elements, respectively.Another improvement concerns the search form. At first, the
search role was added to the form. Then the label element was added, which is associated with the input element using the for attribute.Element small
Tell us when the use of the
small element is appropriate and give an example.Answer
The
small element was introduced in HTML 4.01 and was intended to make the text small. In HTML5, this tag has been given a semantic meaning and is recommended to place in it various kinds of warnings, legal texts, etc., which should be written in small print. In this case, the text may look small, but this is no longer necessary.An example of use is shown below:
<img src="image.jpg" alt="London by night"> <small> .</small> Subheads
Subheadings are one of the most common elements in any website. A few years ago, the
hgroup tag was introduced just for these needs, but more recently it was removed from the specification. Can you describe why you abandoned the hgroup and how they solve the problem with header layout today?Answer
The
hgroup element was created in order to group headers ( h1 - h6 ) and thereby exclude the possibility of inadvertently creating a sublevel in the hierarchy. In order to understand to which problem this tag still calls, 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> This is what we get if we try to draw a hierarchy of the above markup:
h1 | ---h2 | p This simple scheme clearly shows that a paragraph is the content of the
h2 element instead of being the content of the h1 element, regardless of whether it was planned to do so. If there was an intention to create a subtitle, and p to associate with h1 , then this markup is incorrect.Actually, the
hgroup element was created in order to solve this problem. However, it was removed from the HTML5 specification in April 2013 due to the lack of implementations and the absence of precedents, which makes its use unacceptable.The solution to the problem of creating a subtitle so that the following paragraph is related to
h1 is set forth below: <article> <h1> Main title <span>This is a subtitle</span> </h1> <p>This is the content of this section</p> </article> Images and availability
Is the
alt attribute required for the img element? If not, give an example in which the alt attribute can be null. Will the availability of this element change in this case?Answer
The alt attribute is required for the
img tag, but the value of this attribute may be empty (i.e. alt="" ). It makes sense to leave the attribute value empty when the image is used only for decorative purposes and is not part of the page content. Regarding accessibility, if the alt attribute contains nothing, then on-screen announcers will ignore the image. Leaving the attribute empty in this case is highly recommended, because something like the “Content Separator” will only annoy those who listen to the narrator.time element
Is it possible to display a date range with a single
time element?Answer
No impossible. You can present this information using two time elements . For example, in order to submit a time interval from November 6, 2014 to November 9, 2014, the developer can write:
<time datetime="2014-11-06">6</time>- <time datetime="2014-11-09">9 November 2014</time> meter and progress
What is the difference between the
meter and progress elements?Answer
“The meter element is intended to represent a scalar measurement within a known range or fractional value. This element is not well suited for measuring something like temperature, because it does not have a fixed range. However,
meter can be used to describe the hard disk space occupied.The progress element is used to show the progress of the task. Unlike the
meter element, the progress described by the progress element may not be defined. For example, you could use this element to show that there is progress in completing the task, but you cannot indicate when the task will be completed.longdesc attribute
What is the
longdesc attribute? Can you explain his purpose?Answer
The
longdesc attribute of the longdesc element was in the days of HTML4, but is still considered valid in HTML5. This attribute was made in order to allow more detailed description of images, rather than the alt attribute. An interesting thing: instead of being a description of an image (as the alt attribute does), longdesc points to a hyperlink containing a description.The following is an example of using the
longdesc attribute: <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> mark element
What is the
mark element? Give an example of using this element.Answer
The mark element highlights the text. A common usage example is highlighting a keyword or keywords that the user is looking for.
Conclusion
In this article, I looked at ten interview questions that you can use to test your knowledge of HTML. In your next job interview, you can use one or more of them.
To help you learn these and other related semantics questions, I recommend reading some of the following SitePoint articles:
- 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
If you have interesting questions on HTML? Share them in the comments, perhaps, by doing so, you will help other developers when they pass their interview.
Source: https://habr.com/ru/post/244929/
All Articles