Top HTML Interview Elements

A cheat sheet table of the most common tags that come up in technical screens.

These are the tags that interviewers ask about most frequently in frontend developer interviews. Make sure you can describe the exact semantic meaning and correct nesting structures for each of them.

Cheat Sheet Table

Tag	Purpose
`<div>`	Block-level container
`<span>`	Inline container
`<section>`	Groups related content
`<article>`	Self-contained content
`<header>`	Top section of a page or section
`<footer>`	Bottom section
`<nav>`	Navigation links
`<main>`	Main content of the document
`<form>`	User input form
`<input>`	Input field
`<button>`	Clickable button
`<label>`	Describes a form control
`<table>`	Displays tabular data
`<ul>`, `<ol>`, `<li>`	Lists
`<img>`	Displays an image
`<a>`	Hyperlink
`<video>`, `<audio>`	Multimedia
`<iframe>`	Embeds another webpage
`<meta>`	Metadata for the page
`<script>`	JavaScript inclusion
`<link>`	External resources (e.g., CSS)

Interview questions

What is the difference between a block-level element and an inline element?

A block-level element (like div, p, header) starts on a new line and stretches to fill the full width of its parent container. An inline element (like span, a, img) does not start on a new line and only occupies the width bounded by its content.

Practice

Name three semantic sectioning elements introduced in HTML5.

Hint: Examples include <section>, <article>, <nav>, <header>, and <footer>.