13 Most Helpful HTML Interview Questions & Answers

Whether you’ve learned HTML through online courses or at college, you need to impress at the interview to land that coveted job. We’ve prepared these common HTML interview questions and answers for beginners, to help you do just that. If you’ve got the answers for the basics and can show your interviewer that you know how to keep your skills up to date, you’ll increase your chances of landing that job exponentially.

Looking for more intervew prep? Check out our guides on CSS interview questions and Python interview questions. 

1. What is HTML?
2. What is the difference between HTML elements and tags?
3. What are attributes and how do you use them?
4. When should you use comments?
5. What’s the difference between a block-level element and an inline element?
6. Do you know what these tags are used for?
7. How is an HTML document structured?
8. What do you know about HTML5?
9. What new features were added to HTML5?
10. Are there changes to DOCTYPE for HTML5?
11. What browsers support HTML5?
12. How do you apply CSS styles to a web page?
13. How do you apply JavaScript to a web page?

1. What is HTML?

The odds are that you won’t be asked this directly, but it can’t hurt to remind yourself what HTML stands for: Hyper Text Markup Language. This means that an HTML document, written in plain text, is used to describe the structure and content of web pages, with links to other pages and resources. In its most basic form, you can define blocks of content, which are displayed depending on the type of block you used.

2. What is the difference between HTML elements and tags?

Elements

Each part of a web page, such as a paragraph, an image, a link or anything else you can interact with, is an element. Each type of element has its own behavior - for example you can click on links, or type in text boxes.

Tags

An HTML document is a simple, plain text document, which you are able to open with any text editor on your computer. When you open one, you’ll see the document is made up of tags, which are keywords surrounded by angled brackets, each of which describes an HTML element. Here you can see HTML tags telling the browser how to render the text element inside:

<span>This text is surrounded by HTML tags!</span>

Most tags have opening and closing tags. The opening tag is written with the tag name in angled brackets, like <tagname> whereas the closing tag adds a forward slash: </tagname>. Anything between these opening and closing tags is considered to be contents of that tag.

Some tags, like the <img> tag are self-closing. This means that they cannot have any content. For example, an image can’t contain additional HTML elements within it. The only way to change their behavior or appearance is through attributes or CSS.

<img src="http://placekitten.com/200/300" />

3. What are attributes and how do you use them?

Each tag can also have additional attributes, which change the way the tag behaves or is displayed. For example, an <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.

Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags - they can never be in closing tags. They are followed by an equals sign = and the chosen value in double quotes ". Take care not to include any spaces before and after the equals sign! Multiple attributes can be defined on a single tag, separated by a space.

<!-- Text field -->
<input type="text" />

<!-- Checkbox -->
<input type="checkbox" />

<!-- Radio button -->
<input type="radio" value="on" />

There are some attributes that are available on every single tag - like the style attribute - however, most tags also have their own specific ones as those attributes simply wouldn’t make sense on tags of a different type (like an image source attribute on a paragraph tag).

4. When should you use comments?

Sometimes it can be useful to add code comments to your HTML document. These will not be displayed in the browser, but they can be useful to leave notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!-- and the end is marked by -->. Anything in the middle will be completely ignored, even if it contains valid HTML.

<!-- This is a comment! -->
<!-- Comments can
     span multiple
     lines too -->
<!-- All of this is ignored. Even valid HTML like this: <span>Ska—doosh!</span> -->

While comments are useful, try to keep them to a minimum. Only use them when something is not quite clear enough, or else your documents will become more ‘comment’ than code!

5. What’s the difference between a block-level element and an inline element?

Each element in HTML is displayed in one of a few ways. By default, most tags are either displayed as block-level or inline. This value can be overridden using CSS.

Block

As the name suggests, a block-level element is drawn as a block that stretches to fill the full width available to it (the width of its container) and will always start on a new line.

Examples of elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.

Inline

Unlike the block-level elements, inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going. If you were to tack more text onto an existing line of text, it will stay on the same line, as if it was all part of the same text to begin with.

Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.

6. Do you know what these tags are used for?

There are a lot of different HTML elements, which can be a little overwhelming. Luckily, they are also generally pretty intuitive! To help you prepare for a pop quiz in your next interview, we’ve organized some of the most common elements in sections below:

Text

Tag	Description
p	Paragraph block. Has margin above and below by default.
span	Inline text, no distinguishing styling by default. Generally used to style parts of a block of text differently (e.g. underlined, different background or font)
a	Anchor or link. The href attribute defines where it takes you upon clicking it. This can be a reference point on the same page or a different page.
button	A clickable element styled differently depending on the browser and operating system (e.g. Windows, Mac, Linux) used, though these can be overridden. What happens upon click is up to you to decide!
strong, b	Renders a piece of text bold.
i	Renders a piece of text italic.
h1, h2, …, h6	These are headings of different levels. For example, you would generally have a single h1 tag, which can have multiple h2 tags inside of it. Each of those in turn can have multiple h3 tags inside them, and so on.
br	Denotes a line break. HTML ignores white space in your code when it becomes more than a single space. Therefore, to break text onto a different line, you can use this tag. Alternatively, you could put the different pieces of text in two separate block-level elements.

Layout

Tag	Description
div	This is your basic container element. It is a block-level element but has no additional styling by default.
ul	This stands for unordered list, also known as a bulleted list. Inside the ul element you can have any number of li elements. Using CSS you can define whether it displays as bullet points, empty circles or squares.
ol	Stands for ordered list. Each item inside this list will have an incremented number or symbol beside them (e.g. 1, 2, 3 or a, b, c). The symbols can be numbers, letters or roman numerals.
li	Stands for list item. These live inside ul or ol elements. Each li is a separate item in the list, denoted by bullet point, number or any other symbol chosen by you.
table	Sometimes you need to display related data in a table format. Hurray for tables! Just be sure not to use them for your page’s layout, or you might get a phone call from the 90s.
tr	Used to define table rows inside table elements.
td	Used to define table cells inside tr elements, which in turn are inside a table element.
thead	Optional (but recommended) part of your table. Use it to group a table row (tr) that contains the column titles of your table.
tbody	Like thead, this is optional. If you have a thead in your table, you should also include a tbody. It should contain all rows that are not in your thead.
section	Behaves like a div but it’s used to mark a specific section of a page. Each section can have its own h1 tag, whereas normally you should only have one h1 per page. Introduced in HTML5.
nav	Behaves like a ul but specifically for navigation items. Introduced in HTML5.

Visual

Tag	Description
img	Used to show images on your page. Use the src attribute to specify which file you’d like it to load.
video	Like img, this is used to display video on your page. If you don’t want to embed video from another source (like YouTube or Vimeo), then this is your best bet. Use source tags with the src attribute inside the video tag to specify which file to load, including backup options with different file types.   Just make sure your video is small in file size or you might get some angry emails. You can specify whether you want it to show video controls (like a play/pause button) and whether it autoplays. Older browsers do not support this.
audio	Similar to the above elements, but of course this only loads audio. As with the video element, this will display audio controls if you specify so. As before, use source tags with the src attribute inside the audio tag to specify which file to load, including backup options with different file types.

Forms

Tag	Description
form	As the name suggests, this creates a form. Every input element inside a form tag belongs to that form. The action and method attributes are used to specify what to do when submitting the form.
input	These elements are very versatile and can take on many forms using the type attribute, from text fields and radio buttons, to date fields and Submit buttons.
textarea	These are larger than simple text fields and allow the user to enter line breaks as well. The size can be adjusted.
label	This defines a label for an input element. When using the for attribute, this can be clicked on to select its associated input field.
select	Your classic dropdown. Each item inside the dropdown list is defined using the option tag, nested inside the select tag. You can of course have many option tags inside a select.
option	An individual item in a dropdown list.

7. How is an HTML document structured?

While each page is different, there are a few rules around the overall structure of the HTML document. Let's look at the structure below:

DOCTYPE tag

DOCTYPE is a special tag and must be the first one in an HTML document. It tells the browser what version of HTML you want to use. You can read more about this and the latest version (HTML5) in the next section. For now, you’ll likely want to use the following:

<!DOCTYPE html>

HTML tag

Next, we have the <html> tag. Each document only has one <html> tag, and it serves as a ‘container’ for the rest of the page’s elements. You will place the rest of your html code for the page within the <html> tag.

<html>
    <!-- The rest of your code -->
</html>

Head tag

The first element inside the <html> tag is the <head> tag. Content inside this tag is only meant for the browser and is not visible on the page directly. Among other things, it contains the title of your page (as shown in your browser tab), the character set used to display content and more metadata (meaning data about data). This is also where you define CSS and load some JavaScript (more about that later).

<head>
    <title>The title of your page</title>
    <meta charset="UTF—8">
    <meta name="description" content="A description of your page">
</head>

Body tag

After the <head> tag, still inside the <html> tag, we have the <body> tag. It contains all the content that’s displayed in the browser.

<body>
    <h1>Welcome to my website!</h1>
    <p>This is where I'll put some content :)</p>
</body>

All together now

With all of the above rules combined, we get something like this:

<!DOCTYPE html>
<html>
    <head>
        <title>The title of your page</title>
        <meta charset="UTF-8">
        <meta name="description" content="A description of your page">
    </head>
    <body>
        <h1>Welcome to my website!</h1>
        <p>This is where I'll put some content :)</p>
    </body>
</html>

8. What do you know about HTML5?

Throughout the history of the internet, there have been many versions of the HTML standard. The versions varied in features and how strict they were. In 2014, the official recommendation for HTML5 by the World Wide Web Consortium was released. It is a living standard, meaning new features can be added over time.

9. What new features were added to HTML5?

It introduced a number of semantic elements, which is to say elements that convey meaning. Some of the new semantic elements are <header>, <footer>, <section>, and <article> . They are semantic in that they are not just simple containers, but they tell the browser more about their contents.

There are additional form element types, like "number", "date", "calendar" and "range". Video and audio elements have also been added, as well as new graphic elements, such as <svg> and <canvas>.

10. Are there changes to DOCTYPE for HTML5?

The DOCTYPE for HTML5 is simple. Once you’ve added this to your page, the browser will interpret everything else as HTML5.

<!DOCTYPE html>

11. What browsers support HTML5?

All modern browsers support HTML5, however some older browsers do not. Luckily, most browsers will simply handle the new elements as inline elements. You can then use CSS to change certain elements to be displayed as block-level elements where needed.

12. How do you apply CSS styles to a web page?

When you’ve got a good grasp of HTML, your interviewer may ask you some questions on how HTML works with CSS and JavaScript, to tie everything together. If you are planning on working as a front end developer, employers prefer some proficiency in all three languages.

CSS (Cascading Style Sheets) allows you to change the look of elements on the page, transforming it from a simple text document to a fully fledged website. We won’t go into too much detail on CSS here, but you can read our article on CSS interview questions for more.

There are three main ways to apply CSS styles to a webpage:

Inline styles

You can add a style attribute to almost any tag. Inside this attribute you can write your CSS rules.

<div style="background-color: red;">A container with a red background.</div>

A style block

You are able to define one or more style blocks inside the head section of your HTML document. Inside these blocks you can write your CSS rules. You will have to specify which elements on the page you’d like to style. In the below example, we’re targeting the <body> tag and an element with a class attribute equal to .button.

<head>
    <style>
         body {
             font-size: 16px;
         }

         .button {
             padding: 10px;
         }
    </style>
</head>

Link to a CSS file

By far the most recommended option is to link to a CSS file. This way you are able to keep the content (HTML) separate from the way you present that content (CSS). It also means you can use the same styles on multiple pages. To link to a CSS file, you will have to add a <link> tag to the <head> section in your document with an href attribute that specifies the location of the CSS file.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

13. How do you apply JavaScript to a web page?

In order to add interactivity to your page, other than what’s already provided through HTML, you will need JavaScript. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three main ways of including JavaScript:

Inline

Certain HTML elements allow you to execute a piece of JavaScript when a certain event occurs. For example, a button allows you to run a script when you click on it. These events are accessed through attributes and differ based on the events that are available on each element. The following example shows an alert with a message when the user clicks on it.

<button onclick="alert('You clicked on me!');">Click me!</button>

A script block

You can define a script block anywhere on the page, which will get executed as soon as the browser reaches that part of the document. Note that this can be inside the <head> or <body> section of your document.

<script>
    var x = 5;
    var y = 6;
    var result = x + y;
    alert(“X + Y is equal to " + result);
</script>

Link to a JavaScript file

Again, as with CSS, this is the preferred way of including JavaScript. It allows you to keep the content of the page separate to how users interact with that content, and it allows you to load the same script on multiple pages. As with the script block, you can load a JavaScript file from the <head> or <body>, but keep in mind it will be loaded in the order you’ve structured your document.

<script src="my-code.js"></script>

Further resources

While we’ve covered a lot of the basic HTML interview questions here that you might be quizzed on, there are more resources to help you prepare.

If you’re looking for differences between browsers and whether certain features are supported by them, check out Can I Use. It’s a helpful resource not just for HTML, but also helps with CSS and JavaScript.

If your resume needs sprucing up, or you'd like to show off your HTML skills further, check out our free HTML resume templates that will impress employers.

Even pros are constantly learning and developing their skills, so if you need a refresher, check out our development courses. And if you’re planning on applying for a job at a start-up, you might like our top eight startup interview questions that will help you ace your next interview.

Prepare for your dream job!

Start learning for free and ace that interview!

Start a free trial