0 / 18 read

HTML

HTML fundamentals, semantic elements, forms, media, and accessibility

18 questions0 read6 interview prep

Questions12 shown

HTML stands for HyperText Markup Language.

Hyper: Refers to the non-linear nature of hypertext, allowing users to jump between documents via links.

Text: The content displayed on web pages — text, images, media.

Markup: The system of tags and attributes that annotate content to define its structure.

Language: A standardized set of rules and syntax for creating web documents.

HTML is the backbone of every web page, defining the structure and semantics of content that browsers render.

Full page

HTML is case insensitive. Tags like <DIV>, <div>, and <Div> are all treated the same by browsers. However, best practice is to use lowercase tags for consistency and readability. Note that XHTML, the stricter version, requires lowercase tags.

Full page

The <head> tag contains metadata about the HTML document that is not displayed on the page. It includes:

<title> — Sets the browser tab title

<meta> — Charset, viewport, description, keywords

<link> — External stylesheets, favicons

<script> — JavaScript files (with defer/async)

<style> — Internal CSS

<base> — Base URL for relative links

The <head> section is critical for SEO, accessibility, and proper rendering.

Full page

Use the <meta> tag with the http-equiv attribute:

Code

<meta http-equiv="refresh" content="60">

This tells the browser to automatically refresh the page every 60 seconds. You can also redirect to a different URL:

Code

<meta http-equiv="refresh" content="60;url=https://example.com">

Note: This approach is generally discouraged in modern web development. Use JavaScript setInterval() or server-sent events for dynamic updates instead.

Code

<meta http-equiv="refresh" content="60">

Full page

Block elements take up the full width available and start on a new line:

<div>, <p>, <h1>-<h6>, <section>, <article>, <ul>, <ol>, <form>

Inline elements only take up as much width as necessary and do not start on a new line:

<span>, <a>, <strong>, <em>, <img>, <input>, <label>

Key differences:

Block elements can contain inline elements, but inline elements should not contain block elements.

Block elements respect width/height properties; inline elements do not.

display: inline-block combines features of both.

Full page

The <table> tag creates tabular data in HTML.

Code

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>25</td></tr>
  </tbody>
</table>

Key elements: <thead>, <tbody>, <tfoot>, <tr> (row), <th> (header cell), <td> (data cell).

Importance: Tables should only be used for tabular data (spreadsheets, schedules, comparisons) — never for page layout. Use CSS Grid or Flexbox for layout instead.

Code

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>25</td></tr>
  </tbody>
</table>

Full page

HTML provides multiple input mechanisms: 1. **`<input>`** — text, password, email, number, date, checkbox, radio, file, range, color 2. **`<textarea>`** — Multi-line text input 3. **`<select>` + `<op...