HTML is the backbone of web development, and HTML5 is its most powerful and versatile iteration. If you’re looking to build a high-performance web page, you won’t get very far without an understanding of HTML5.
Of the top 10 million websites on the internet, just shy of 90% use HTML5. Most businesses, therefore, depend on HTML5 developers to uphold their online operations. But as with any computer language, it takes time to be mastered, and finding the right HTML5 developer is not always an easy feat.
With a well-planned recruitment process, you can find the perfect HTML5 developer who will take your organization’s web presence to the next level. Interviews are a crucial part of the process and work best alongside practical assessments like an HTML5 skills test or other role-specific skills assessments.
HTML5 interview questions to help you gauge the right fit
Whether you’re looking for an HTML5 fresher or a seasoned software specialist, the interview questions below will help you identify the right fit. Sample answers are included so that you can evaluate candidates effectively, even if you aren’t familiar with markup languages yourself.
12 beginner HTML5 interview questions
We’ve chosen the beginner interview questions below with junior or entry-level positions in mind, where the candidate has limited professional experience with HTML5.
1. What is HTML5?
HTML5 is a markup language used for structuring and displaying content on the internet. This includes animations, audio, images, and text, among many other things, and all without the need for additional software. HTML5 is the most recent and most advanced version of HTML.
2. What are the key differences between HTML and HTML5?
HTML5 has made several steps forward compared to its previous versions. Notable changes include:
- HTML5 supports video, graphics, and audio, whereas HTML only supports them through third-party extensions
- HTML5 is mobile-friendly, whereas HTML is not
- HTML5 is compatible with all major web browsers, whereas HTML is not
- HTML5 offers several options for local storage, whereas HTML only offers cookies
- HTML5 supports multi-threading, whereas HTML operates only in one thread
3. What are tags in HTML5 and how many are required to make a basic web page?
Tags are pieces of HTML5 code used to define the structure of the page. There are more than 100 tags in HTML5, with each one serving a unique purpose, such as positioning text or supporting audio.
In their most basic form, most web pages will need around four tags to get started. These are <html>, <head>, <title>, and <body>.
4. What are elements in HTML5?
Elements are components of HTML5 code that instruct the web browser how to structure and interpret the HTML5 document. Typically, they encompass an opening tag, a closing tag, and specified content between the opening and closing tags, depending on the type of tag used.
5. What are attributes in HTML5?
Attributes are special properties or characteristics used within an element to modify its behavior. For example, attributes can be used to specify the dimensions or positioning values of an image. Attributes are specified within the opening tag and must be enclosed in quotation marks.
6. What is CSS and what is its relationship with HTML5?
CSS, or Cascading Style Sheet, is a style sheet language used with HTML5 to format and display the elements specified by the markup language for the end user. While HTML5 defines the structure of a page, CSS specifies the document’s style, including page layout, colors, and fonts.
7. What are the key HTML5 page structure elements?
The most important HTML5 structure elements are:
- <header>, containing the header or top of the page
- <footer>, containing the footer or bottom of the page
- <section>, containing one section that is thematically similar to other sections
- <article>, containing standalone content
- <nav>, containing the navigation functionality of the page
- <aside>, containing secondary content
8. What is the role of drag and drop in HTML5?
Drag and drop is a user interface tool used to copy, reorder, and delete items with the cursor. It’s new to HTML5 and helps save a significant amount of time and effort while coding. Once an element’s ‘draggable’ attribute is set to true, it can be dragged and dropped with the mouse.
9. What are input elements in HTML5?
Input elements are used to create interactive controls that receive and process information from the user. For example, inputs could be used to process login details, collect customer feedback, or display a form.
10. What is meant by web storage in HTML5?
Web storage refers to HTML5’s new storage features. Previous HTML versions relied on cookies for storage in the server, but web storage now means data can be stored locally within the user’s browser. Web storage also offers a larger storage limit and is more secure.
11. How do you link to another web page using HTML5?
The anchor tag, or <a> tag in code, is used with the ‘href’ attribute to link to other web pages. The URL and linked text are both included in the element.
For example, a link to the Google homepage would look like this in HTML5 code:
<a href="http://www.google.com/">Google Search Engine</a>
12. What are the three types of lists in HTML5?
The three types of HTML5 lists are:
- Ordered list, which is used to group related items in a specific order
- Unordered list, which is used to group related items in no particular order
- Description list, which is used to group terms and their descriptions
12 intermediate HTML5 interview questions
You can use these intermediate interview questions when hiring for mid-level web developer roles, where candidates have some working experience with HTML5.
13. What are the key benefits of HTML5?
HTML5 improves on its previous versions in a multitude of ways. Among its biggest strengths we have HTML5’s:
- Compatibility with all web browsers and devices
- Cleaner code for developers
- Native support for multimedia content
- Quicker load times due to offline storage cache
- Introduction of geolocation
14. What is the role of formatting tags in HTML5?
Formatting tags allow text to be stylized in HTML5 without the need for CSS. There are a number of HTML5 formatting tags, and the most popular ones include:
- <b> - used to make text bold
- <i> - used to italicize text
- <u> - used to underline text
- <mark> - used to highlight text
- <strong> - used to mark text as important
15. What types of graphics are supported by HTML5?
Unlike previous versions, HTML5 offers inbuilt graphics features. The two types of graphics supported by HTML5 are:
- SVG (Scalable Vector Graphics), used to create vector-based graphics, such as diagrams and icons
- Canvas, used to draw graphics, such as shapes
16. What is new about the relationship between the <header> and <h1> tags in HTML5?
The <header> tag is used to design the header of a web page and can contain a range of elements including text, logos, or a navigation bar.
The <h1> tag is the textual part of the header and is used to specify the most important section of a piece of content. It’s often used alongside other header tags (through to <h6>) to format and prioritize content sections.
17. What are some of the new input types in HTML5?
HTML5 introduces several new input types to create a more interactive user experience. The new input types include:
- Date, used to select a date from a drop-down calendar
- Time, used to enter a time
- Email, used to enter an email address
- Tel, used to enter a telephone number with a specific pattern
- Color, used to select a color from a color picker
- Range, used to select a range of values on a slider
18. What are image maps in HTML5?
Image maps are images with several clickable areas that link to different web pages. They use the <map> and <area> tags. Coordinates are specified to segment the image into different areas and then relevant links are applied.
19. What are some of the most important APIs in HTML5?
HTML5 supports a wide range of APIs. Some of the most popular ones include:
- Geolocation API, used to identify the user’s location
- Web Speech API, which provides speech recognition functionality
- Clipboard API, which provides copy, cut, and paste functionality
- History API, which provides access to the browser navigation history
- Web Notifications API, used to send web-based notifications to users
20. How can a copyright symbol be added to the webpage using HTML5?
The ‘©’ code is used to generate the copyright symbol (©). As a best practice, it should be accompanied by a year and the name of the organization.
To include copyright information in the footer of a web page, the code would look like this:
<footer> <small>© Copyright Date, Organization Name</small> </footer>
21. What is the role of DOCTYPE in HTML5?
All HTML pages (HTML5 included) need to have their document type declared in the first line of code. DOCTYPE instructs the browser how to interpret the document by indicating what type and version of markup language are being used.
For HTML5 documents, the following DOCTYPE declaration code is used:
22. What are the different types of storage in HTML5?
HTML5 supports two types of web storage. These are:
- sessionStorage: temporary storage available for the duration of the page session
- localStorage: permanent storage available until data is deleted by the user
23. What is metadata in HTML5 and how is it specified?
Metadata is data that describes other data, providing additional information about an HTML document. Its purpose is to help browsers, search engines and other web applications better interpret a document. Examples of metadata include the description, author, and keywords.
The <meta> tag is used to define metadata about an HTML document. <meta> tags are always enclosed within the <head> of the HTML document.
24. What are the new tags for multimedia in HTML5?
Unlike previous versions, HTML5 allows developers to create multimedia objects without the need for additional plugins. The new tags that facilitate this are:
- <audio> - used to embed audio content
- <video> - used to embed video content
- <embed> - used to embed content from an external source
- <source> - used to embed multiple media resources
- <track> - used to specify text tracks (such as subtitles) for audio and video content
11 advanced HTML5 interview questions
You can use the advanced interview questions below when hiring for senior roles, where candidates have lots of experience with HTML5.
25. What are some of the main issues with HTML5?
While HTML5 is an effective markup language, it can still pose problems to web developers. Some challenges include:
- New security threats associated with local storage
- Advanced features are not necessarily supported by all browsers
- Mobile compatibility requires additional coding
- Its limited access to hardware APIs
- Its steep learning curve
26. What are the best audio and video formats to use in HTML5?
HTML5 supports MP3, Ogg, WebM, ADTS, FLAC, and WAV audio formats. A WAV file is uncompressed and typically large, making it unsuitable. Each browser supports its own set of audio formats; MP3 is the only audio format that is currently compatible with all major browsers.
In terms of video, HTML5 supports MP4, WebM, and Ogg formats. While MP4 is generally considered the recommended video format, not all browsers support it natively due to licensing issues. In these cases, WebM can be used as an alternative.
27. How can HTML5 be used for data storage purposes?
While HTML5 doesn’t include data storage functionality as part of its native specification, it’s possible to store data through the integration of data-related APIs. These can be used with HTML5 documents to manipulate client-side databases with SQL.
The two HTML5 APIs for data storage and querying are:
- IndexedDB API, a standard maintained by the World Wide Web Consortium
- Web SQL Database, now considered deprecated
28. What is microdata in HTML5 and how is it created?
Microdata allows developers to define the custom semantics of elements and embed custom properties within the web page.
It’s used to provide browsers and search engines with more information about the contents of the web page so that they can display results that best match the user’s search intent.
Microdata is created using the <itemscope> element. Information about the item is then specified using the <itemprop> element.
29. How is the Geolocation API implemented in HTML5?
The HTML5 Geolocation API uses the device’s GPS, WiFi or mobile signal to triangulate the user’s latitude and longitude coordinates. The user must give their permission before geolocation services can be used on their device.
From the developer’s point of view, the Geolocation API is implemented firstly by calling the geolocation.navigator object. Three methods are then used by the API to handle location data:
- getCurrentPosition identifies the device’s current location and returns a position object with data
- watchPosition returns a value whenever the device location changes
- clearWatch cancels the previous watchPosition call
30. What are some of the key global attributes in HTML5?
Global attributes are attributes that can be applied to all HTML5 elements. Some of the most important global attributes are:
- accesskey, used to specify a keyboard shortcut for an element
- class, used to assign one or more class names to an element
- dir, used to specify the base direction of the element’s text
- data-*, used to store custom data specific to the web page
- contenteditable, used to indicate whether the content is editable or not
31. What is the role of the WebSocket API in HTML5?
The WebSocket API facilitates two-way, interactive communication between the web browser and the web server. This enables a real-time, event-driven data transfer to and from the server. It’s a very popular API that brings speed, security, and flexibility.
32. When should <div> tags be used in HTML5?
HTML5 introduces a number of new tags (such as <aside>, <footer>, and <header>) that take the place that <div> has traditionally occupied in previous HTML versions.
However, <div> should still be used in HTML5 when no other semantically appropriate element is available. Generally, this will be for styling purposes, such as wrapping the web page or introducing the opening paragraph.
33. What is the role of the Web Workers API in HTML5?
The Web Workers API makes it possible to run scripts independently in a background thread, separate from the main execution thread of the HTML5 document. This allows developers to continue working on the page without affecting its performance, while scripts run in the background.
34. How can the performance of an HTML5 web page be measured?
Measuring performance is an important step for developers to gauge the competitiveness of their web page and can be achieved using APIs and extensions. Popular solutions include the Navigation Timing API and the User Timing API.
These tools provide insights into specific performance metrics such as:
- Page load speed: The time it takes for the full page to load
- Time to interact: The time it takes for the user to be able to interact with the page
- Bounce rate: The proportion of users that leave the page without interacting with it
- Error rate: The proportion of visits to the page resulting in errors
- Conversion rate: The proportion of users that complete a specified action, such as subscribing to a mailing list
35. How can HTML5 web pages be optimized?
If a web page is performing poorly, developers have several HTML5 optimization strategies at their disposal:
- Compress CPU-intensive assets such as high-resolution images
- Bundle code into single files to reduce the number of HTTP requests
- Minify code to remove all unnecessary whitespace
- Offload operations to the Graphics Processing Unit (GPU)
- Use CSS3 for animations and transitions
At which stage of the hiring process should you use these HTML5 interview questions?
Interviews should take place after the initial screening stages, i.e. after you have identified the candidates that would potentially be a good fit. At this point, you can use the HTML5 interview questions above to learn more about the candidate’s web development skills, experience and knowledge.
It’s very important to accompany interviews with practical assessments, such as role-specific HTML5 tasks or programming skills tests to create a more rounded selection process. Using pre-employment skills tests before the interview will help you identify promising candidates early on in the process and filter out unqualified applicants.
Here is a sample outline of the hiring process for an HTML5 developer:
- Application: Clearly specify the HTML5 business requirements in the job advert and provide information about day-to-day responsibilities.
- Resume screening: Shortlist candidates with the skills and experience that match your needs.
- Skills and personality assessment: Invite shortlisted candidates to complete an online skills assessment, featuring tests such as an HTML5 test, CSS test, or other role-specific tests; combine these with personality and culture tests to assess personality traits or culture add potential.
- Screening call: Arrange an informal chat with candidates who performed well on the assessment to find out if expectations align.
- Role-specific task: Present candidates with an HTML5 task similar to what they would do in the role, such as correcting coding errors or embedding an animation.
- Interview: Use some of the interview questions above, alongside culture and soft skills questions to identify the best match.
- Reference check: Check the candidate’s references.
- Job offer: Make your final decision and submit a job offer to the best applicant.
This thorough recruitment process leaves no stone unturned and provides all the information you need to make the right hiring decision.
Make the perfect hire with skills tests and the right HTML5 interview questions
A skilled HTML5 developer will elevate your organization’s online presence and enhance customer experience. The ubiquity of this markup language makes HTML5 a skill that most companies simply cannot go without.
By creating a multi-stage candidate selection process that draws on skills assessments as well as interview questions adapted to the role you’re hiring for, you can find the right HTML5 specialist that your business deserves.