HTML Basics Interview Questions

HTML (HyperText Markup Language) describes the structure and meaning of a web page. The browser parses it into the DOM; CSS styles it and JavaScript adds behavior.

Follow-up: is HTML a programming language? No, it has no variables, conditions or loops.

<h1>Orders</h1>
<p>You have <strong>3</strong> open orders. <a href="/orders">View them</a>.</p>

A tag is the markup in angle brackets (<a>), an element is everything from the start tag to the end tag including the content, and an attribute is a name and value on the start tag (href="/docs"). After parsing, tags are gone: the DOM is a tree of elements.

<!DOCTYPE html> tells the browser to render in standards mode. Without it, browsers fall back to quirks mode, which imitates old browser bugs, so the same CSS can lay out differently. It is a declaration, not a tag; the doctype page shows the old HTML 4 forms.

A doctype, an <html> root, a <head> with metadata that is not displayed, and a <body> with the visible content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>This text is inside the body, so it is visible.</p>
</body>
</html>

Mention lang on <html>, <meta charset="utf-8"> early in the head, and the viewport tag, without which phones render the page at desktop width.

<head> holds metadata (title, meta tags, stylesheets, scripts), is never displayed, and appears once. <header> is visible introductory content for the page or a section, such as a logo, title and navigation, and a page can have several.

A block element starts on a new line and takes the full width (<div>, <p>); an inline element flows inside text and is as wide as its content (<span>, <a>).

<!DOCTYPE html>
<style>
  div, p { background: #dbeafe; }
  span, a { background: #fde68a; }
  span { width: 300px; height: 80px; } /* ignored: span is inline */
</style>
<div>A div takes the whole line.</div>
<p>A paragraph with <span>a span</span> and <a href="#">a link</a> that stay in the text.</p>

The trap: width, height and vertical margins do not apply to inline text elements such as <span> and <a>. The CSS display property changes the type.

Both are generic containers with no meaning: <div> is block-level and groups layout, <span> is inline and wraps text. Use them only when no semantic element such as <nav> or <button> fits, because those tell screen readers what the content is. More on the span page.

Void elements cannot have content, so they have no end tag: <img>, <br>, <hr>, <input>, <meta>, <link>, <source> and a few others.

Follow-up: what about <br />? The slash is allowed and ignored. On other elements it means nothing: <div /> opens a div, and everything after it ends up inside.

An id must be unique and identifies one element; a class can be shared by many elements, and an element can have several.

<!DOCTYPE html>
<style>
  .tag { background: #e0e7ff; padding: 2px 8px; border-radius: 4px; }
  #featured { outline: 2px solid #f59e0b; }
</style>
<p>
  <span class="tag">html</span>
  <span class="tag" id="featured">css</span>
  <span class="tag">javascript</span>
</p>
<a href="#featured">Jump to #featured</a>

Ids are targets for fragment links, <label for> and getElementById. Use classes for styling, since id selectors have higher specificity. See class selectors.

Semantic elements (<header>, <nav>, <main>, <article>), native <audio> and <video>, <canvas>, new input types with built-in validation, data-* attributes, APIs such as Web Storage and Web Workers, and the short doctype.

Follow-up: is there an HTML6? No. HTML is now a Living Standard, updated continuously.

alt is the image's text alternative, read by screen readers, shown when the image fails to load, and used by search engines. Describe what the image shows or does in its context.

<img src="chart.png" alt="Sales grew from 40 to 65 orders a day in March">
<a href="/"><img src="logo.svg" alt="Coddy home"></a>
<img src="divider.png" alt="">

Use alt="" for decorative images. Leaving alt out is worse: some screen readers then read the file name.

Three: <ul> for unordered items, <ol> for steps or rankings, and <dl> for term and description pairs.

<!DOCTYPE html>
<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>
<ol start="3">
  <li>Third step</li>
  <li>Fourth step</li>
</ol>
<dl>
  <dt>HTML</dt>
  <dd>Structure of the page</dd>
  <dt>CSS</dt>
  <dd>How it looks</dd>
</dl>

Only <li> (plus <script> and <template>) may be a direct child of <ul> or <ol>, so a nested list goes inside an <li>. More on the lists page.

A <table> holds rows (<tr>) of header cells (<th>) and data cells (<td>), optionally grouped in <thead> and <tbody>. colspan stretches a cell across columns, rowspan across rows.

<!DOCTYPE html>
<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #94a3b8; padding: 4px 10px; }
</style>
<table>
  <caption>Timetable</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">9:00</th><th scope="col">10:00</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Mon</th><td colspan="2">Lab (two hours)</td></tr>
    <tr><th scope="row">Tue</th><td>Maths</td><td rowspan="2">Physics</td></tr>
    <tr><th scope="row">Wed</th><td>English</td></tr>
  </tbody>
</table>

Use tables for data, never for layout. See colspan and rowspan.

Entities are codes for characters that would be read as markup or are hard to type, like <, &,   or €.

<!DOCTYPE html>
<p>To start a paragraph, write &lt;p&gt;.</p>
<p>Tom &amp; Jerry &copy; 1940, price 10&nbsp;&#x20AC;</p>

On a UTF-8 page only <, & and quotes inside attribute values need escaping. Escaping user input this way is the basis of XSS prevention.

Add target="_blank", plus rel="noopener" so the new page cannot reach yours through window.opener.

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

Without it, the opened page could redirect your tab to a phishing page (reverse tabnabbing). Chrome 88, Firefox 79 and Safari 12.1 and later apply noopener to target="_blank" by default (see MDN on noopener), but writing it is still expected. See opening links in a new tab.

Write <!-- text -->. Comments are not rendered but are sent with the page, so anyone can read them in View Source; never put keys or internal notes there. They cannot be nested: the first --> ends the comment.

Three: an inline style attribute, an internal <style> element, and an external stylesheet linked with <link rel="stylesheet">.

<head>
  <link rel="stylesheet" href="styles.css">  <!-- external -->
  <style>p { line-height: 1.6; }</style>      <!-- internal -->
</head>
<body>
  <p style="color: crimson;">Inline</p>       <!-- inline -->
</body>

Use external stylesheets on real sites, since the browser caches them. Inline styles beat stylesheet rules unless a rule uses !important. See external CSS.

Tag and attribute names are not; the parser lowercases them. Many attribute values are: id="Main" and id="main" are different ids, and class names are compared exactly (quirks mode makes CSS class and id matching case-insensitive). Write everything lowercase.

XHTML is HTML in XML syntax, read by a parser that stops at the first error; the HTML parser repairs mistakes. Only a page served as application/xhtml+xml gets the XML parser, so text/html is HTML however it is written.

A boolean attribute is true when present and false when absent, whatever its value. So disabled="false" still disables the element.

<button disabled>Disabled</button>
<button disabled="false">Still disabled</button>
<button>Enabled</button>

To turn one off, remove the attribute (removeAttribute("disabled")) or set the property button.disabled = false. Others: checked, required, readonly, multiple, open.