HTML interview questions

1. What does the <h1> tag do?

The <h1> tag defines a heading. The tags <h1> to <h6> define headings from largest to smallest.

<h1>This is a heading</h1>

Full lesson: Html basic

2. What does the <p> tag define?

The <p> tag defines a paragraph. Each <p> tag starts a new paragraph.

<p>This is a paragraph.</p>

Full lesson: Html basic

3. How do you make a link in HTML?

Use the <a> tag to make a link. Put the link address in the href attribute.

<a href="https://www.example.com">This is a link</a>

Full lesson: Html basic

4. What is the <!DOCTYPE html> declaration?

The <!DOCTYPE html> declaration marks the document as HTML5. It goes on the first line of the page.

<!DOCTYPE html>

Full lesson: Html intro

5. What does the <head> element contain?

The <head> element contains document metadata. It can hold the title, the character set, styles, and scripts.

<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>

Full lesson: Html intro

6. How do you make an unordered list?

Use the <ul> tag to make an unordered list. Put each item in an <li> tag.

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

Full lesson: Html lists

7. How do you show an image on a page?

Use the <img> tag to show an image. Put the image address in the src attribute.

<img src="photo.jpg" alt="A photo">

Full lesson: Html images

8. How do you make a table row and a cell?

Use the <tr> tag to make a table row. Use the <td> tag to make a data cell in the row.

<table>
  <tr><td>A</td><td>B</td></tr>
</table>

Full lesson: Html tables

9. How do you add CSS to an HTML element?

Use the style attribute to add CSS to one element. This is called an inline style.

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Full lesson: Html css

10. What is a URL?

A URL is a Uniform Resource Locator. A browser uses a URL to request a page from a web server.

Full lesson: Html url

11. How do you add a form input field?

Use the <form> tag to make a form. Put input fields inside the form element.

<form action="/submit">
  <input type="text" name="name">
</form>

Full lesson: Html forms

12. How do you add an iframe to a page?

Use the <iframe> tag to show one page inside another page. Put the page address in the src attribute.

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Full lesson: Html iframes

13. How do you add an SVG image in HTML5?

Use the <svg> tag to draw SVG graphics in HTML5. The <circle> tag draws a circle.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red"></circle>
</svg>

Full lesson: Html5 svg

14. Mistake: why does a page show garbled text?

The page has no declared character set. Add the meta charset tag to the head to fix the text.

<meta charset="utf-8">

Full lesson: Html tutorial

15. Mistake: why does an image not show?

The src value is wrong or the file is in a different folder. Check the image path in the src attribute.

<img src="images/photo.jpg" alt="A photo">

Full lesson: Html images

16. What is an HTML block element?

A block element starts on a new line. The browser also puts a line break after it. Common examples are <h1>, <p>, <ul>, and <table>.

<p>This is a block element.</p>

Full lesson: Html blocks

17. What is an HTML inline element?

An inline element does not start on a new line. It sits inside the text flow. Common examples are <b>, <a>, <img>, and <td>.

<p>This text is <b>bold</b> inside a line.</p>

Full lesson: Html blocks

18. What does the <div> element do?

The <div> element groups other elements. It is a block-level container. It has no special meaning by itself.

<div>
  <h1>Title</h1>
  <p>Text</p>
</div>

Full lesson: Html blocks

19. How do you define a color in HTML?

HTML colors mix red, green, and blue values. You can write a hex code or an RGB value. Each value goes from 0 to 255.

<p style="color:#FF0000;">Red text</p>

Full lesson: Html colors

20. How do you play a video in HTML?

Use the <video> element with the controls attribute. Add <source> tags for each file format. The browser picks a format that it can play.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Full lesson: Html videos

21. How do you play audio in HTML5?

Use the <audio> element with the controls attribute. Add a <source> tag for the audio file. The browser shows a player on the page.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>

Full lesson: Html5 audio

22. What is XHTML?

XHTML is HTML written in XML format. It is a stricter and cleaner version of HTML 4.01. All major browsers support XHTML.

Full lesson: Html xhtml

23. What is SVG in HTML5?

SVG means Scalable Vector Graphics. It defines vector graphics for the web in XML format. An SVG image keeps its quality when you zoom in.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Full lesson: Html5 svg

24. What is a browser plugin in HTML?

A plugin is a small program that adds functions to a browser. You can load plugin content with the <object> or <embed> tag. These tags hold non-HTML resources.

<embed src="movie.swf" width="320" height="240">

Full lesson: Html sounds

25. What is the <base> tag in the head?

The <base> tag sets the default link target for all links. It goes inside the <head> element. The browser uses it for relative URLs.

<head>
  <base href="https://www.example.com/">
</head>

Full lesson: Html head

26. Mistake: why does a form send data to the wrong page?

The action attribute sets the target URL for the form data. A wrong or missing action sends data to the wrong place. Check the action value first.

<form action="/save" method="post">
  <input type="text" name="name">
</form>

Full lesson: Html forms

27. Mistake: why does a link go to the wrong place?

The href attribute holds the link target. A wrong path or a missing href breaks the link. Check the href value and the file path.

<a href="page.html">Go to page</a>

Full lesson: Html links

28. Mistake: why does an audio file not play in some browsers?

Browsers support different audio formats. One source file can fail in another browser. Add more than one <source> tag for safety.

<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
</audio>

Full lesson: Html5 audio

29. Mistake: why does a video show no controls?

The controls attribute adds the play and pause buttons. Without it, the user cannot start the video. Add the controls attribute to the <video> tag.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Full lesson: Html videos

30. Mistake: why does an SVG image not show?

Some old browsers do not support inline SVG. The browser then shows only the fallback text. Test the page in a modern browser.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Full lesson: Html5 svg

31. What is the <title> element?

The <title> element sets the page title. The browser shows the title in the tab. Search engines use the title in results.

<head>
  <title>My Page</title>
</head>

Full lesson: Html head

32. How do you make an ordered list?

Use the <ol> element to make an ordered list. Put <li> elements inside the <ol> element. The browser adds numbers to the items.

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Full lesson: Html lists

33. How do you open a link in a new tab?

Add target="_blank" to the <a> tag. The browser opens the link in a new tab. The rel="noopener" attribute adds safety.

<a href="https://example.com" target="_blank" rel="noopener">Open</a>

Full lesson: Html links

34. What does the <meta> tag do?

The <meta> tag gives data about the page. The charset attribute sets the character encoding. The viewport setting helps on mobile screens.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Full lesson: Html head

35. How do you add a caption to a table?

Use the <caption> element inside the <table> element. Put the <caption> element first. The browser shows the caption above the table.

<table>
  <caption>Sales</caption>
  <tr><td>10</td></tr>
</table>

Full lesson: Html tables

36. How do you add a text input with a label?

Use the <label> element with the for attribute. Set the for value to the input id. A click on the label focuses the input.

<label for="name">Name</label>
<input type="text" id="name" name="name">

Full lesson: Html forms

37. How do you add a video with more than one source?

Use the <video> element with the controls attribute. Add one <source> element for each file format. The browser picks a format that it can play.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Full lesson: Html videos

38. How do you add audio with the HTML5 <audio> element?

Use the <audio> element with the controls attribute. Add a <source> element for the audio file. The browser shows a player with play and pause buttons.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>

Full lesson: Html5 audio

39. How do you add an object to a page with the <object> tag?

Use the <object> tag to add external content. The data attribute sets the file. The browser shows the content in a box.

<object data="movie.mp4" width="320" height="240"></object>

Full lesson: Html object

40. What is the HTML5 code convention for tag names?

Use lowercase letters for tag names. This is the HTML5 convention. Lowercase names are easy to read and to check.

<p>Hello</p>

Full lesson: Html5 syntax

41. Mistake: why does a table show no border?

The table has no border by default. Add the border attribute or CSS to show a border. The border attribute is a quick fix.

<table border="1">
  <tr><td>Cell</td></tr>
</table>

Full lesson: Html tables

42. Mistake: why does a list item show no bullet?

The <li> element is outside a list element. Put each <li> element inside a <ul> or <ol> element. The browser then shows the bullet or number.

<ul>
  <li>Item</li>
</ul>

Full lesson: Html lists

43. Mistake: why does a label not focus its input?

The for value does not match the input id. Set the for value to the exact input id. A click on the label then focuses the input.

<label for="email">Email</label>
<input type="email" id="email">

Full lesson: Html forms

44. Mistake: why does a video not play on some browsers?

The video has only one file format. Add more <source> elements for other formats. The browser then picks a format that it can play.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

Full lesson: Html videos

45. Mistake: why does an audio player not show in old Internet Explorer?

Internet Explorer 8 and earlier versions do not support the <audio> element. Add fallback content inside the <audio> element. The fallback text shows in old browsers.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

Full lesson: Html5 audio