A list of top frequently asked HTML interview questions and answers are given below.
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.
Web developers are responsible for managing the way content appears to the users on a particular website. The field includes working with programming languages to create web applications that combine databases and other tools to create company’s web managment systems. However, apart from the complex part, it can also be about creating static pages and designing stuff.
As big data is more and more part of systems, its manipulation and maintenance may as well come with errors, which then will have to be debugged by members of the web development team in companies. In a general viewpoint, web developers are the ones who work behind the scenes to provide not just sites, but services people use everyday. While there are a lot to be asked in such interviews, let us have a look at what most of these questions might be.
W3C stands for World Wide Web Consortium which is the international standard for World Wide Web. W3C is constantly busy trying to standardize the web and to make it accessible to all users. The company was created in 1994.
Use create click area on the image.
DOM = Document Object Model
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
Graceful degradation refers to the property that enables a system to function properly even in the event of failure of either the system or a component of it.
Web development includes a lot of processes, and Web Design is part of it. Web design is used to represent page layouts and graphical user interface. Web development is a wider term to mean planning, coding, testing, debugging etc.
HTTP/2 among other improvements, provides decreased latency to improve page load speed by supporting:
Cross-origin resource sharing (CORS) is a mechanism that allows many restricted resources (e.g. fonts, js etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It’s a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.
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.
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.
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="https://skillsbattle.com/images/logo/logo.png" />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).
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!
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.
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>.
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>.
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:
| 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. |
| 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. |
| 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. |
| 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. |
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 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>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>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>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>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>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.
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>.
The DOCTYPE for HTML5 is simple. Once you’ve added this to your page, the browser will interpret everything else as HTML5.
<!DOCTYPE html>
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.
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:
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>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 >
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>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:
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>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>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>DTD stands for Document Type Declaration and it tells the browser which version of either HTML or XHTML is being used.
There are several ways to do this, for example: file concatenation, file compression, CDN Hosting, offloading assets, refining code etc.
Because web developers should be familiar with all browsers in terms of testing their web projects the best answer here is: All of them.
Quirks mode is a default compatibility mode and may be different from browser to browser, which may result to a lack of consistency in appearance from browser to browser.
Long polling is a web application development pattern used to emulate pushing data from the server to the client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available.
The main limitation is the poor browser support of XHTML. Internet Explorer and other user agents cannot parse XHTML as XML. Thus, it is not that extensible language as one might think.
Bulleted lists use the <ul> tag, which stands for “unordered,” whereas <ol> is used to create an ordered list.
<div> and a <frame>? A <div> is a container element for grouping and styling, whereas a <frame> creates divisions within a web page and should be used within the <frameset> tag. The use of <frame> and <frameset> are no longer popular and are now being replaced with the more flexible <iframe>, which has become popular for embedding elements from other websites (ie. Youtube videos) into a page.
There is not a big difference between the two. HTML5 is a continuum of HTML. There has been no major paradigm shift.
From a broader viewpoint, HTML was a simple language for laying out text and ../images on a webpage, whereas HTML5 can be viewed as a development platform that does what HTML does that and more, including better support for audio, video, and interactive graphics. It has a number of new elements, supports offline data storage for applications, and has more robust exchange protocols.
Among several: <article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section> and <time>.
The new image elements in HTML5 are Canvas and WebGL. <canvas> is a new element that acts as a container for graphical elements like ../images and graphics. WebGL stands for Web Graphics Language, a free cross-platform API that is used for creating 3D graphics in web browsers.
Class selectors are used to apply style to multiple HTML elements identified with the same class. Class selectors are called within the CSS document by a ‘.’, followed by the class name, like this:
Although these two properties seem similar, there is quite an important difference between the two:
visibility:hidden hides the element, but it will still takes up space, this way affecting the layout of the document.display:none also hides the element, but will not take up space and the page will appear as if the element is not present.CSS preprocessors convert code written in a preprocessed language like SASS or LESS into the same old CSS we’ve been using for such a long time now. The main advantages of using preprocessors are:
Child selectors represent a way of grouping (for styling) a set of elements that descend from a parent element. Example:
1section > span {{"{"}}
2 background-color: #eee;
3}
Grid systems are structured rules that enable content to be stacked horizontally and vertically in a consistent and sustainable way. They find heavily usage in today’s websites because they offer increased producitvity while coding, they’re versatile and ideal for responsive layouts.
The z-index property specifies the stack order of an element within the document area (or a part of it). An element with greater stack order will always be in front of an element with a lower stack order. However, z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). It can have four kind of values:
CSS preprocessors convert code written in a preprocessed language like SASS or LESS into the same old CSS we’ve been using for such a long time now. The main advantages of using preprocessors are:
