HTML5 Basics

Every valid HTML document starts with the same five-line skeleton. The <!DOCTYPE html> declaration tells the browser to use HTML5 standards mode — without it, older quirks mode kicks in. The <html lang="en"> attribute sets the document language for search engines and screen readers. Inside <head> you place metadata (the page title, charset, viewport scaling instructions) that is never shown on screen. Everything visible lives inside <body>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Portfolio</title>
  </head>
  <body>
    <header className="site-header">
      <nav><a href="#about">About</a></nav>
    </header>
    <main>
      <article>
        <h1>Hello World</h1>
        <p>Welcome to my site.</p>
      </article>
    </main>
    <footer>&copy; 2026</footer>
  </body>
</html>

HTML provides a rich set of tags for marking up text with semantic meaning. Headings: h1 through h6 create a document outline. Use exactly one <h1> per page — search engines treat it as the main topic. Subheadings (h2, h3…) create hierarchy. Emphasis: <strong> marks text as critically important (bold by default). <em> marks text with stress emphasis (italic by default). Prefer these over the purely visual <b> and <i> tags. Special text: <mark> highlights text like a pen marker. <sub> creates subscripts (H₂O), <sup> creates superscripts (E=mc²). <code> wraps inline code snippets.

This is a classic interview question — know it cold. Block-level elements always start on a new line and stretch to fill their container's full width. You can set their width/height/margin/padding freely. Examples: <div>, <p>, <h1>–<h6>, <ul>, <ol>, <table>, <section>, <article>. Inline elements sit inside the flow of text and only take up as much space as their content. Setting width/height has no effect. Examples: <span>, <a>, <img>, <strong>, <em>, <code>, <label>. The <img> tag is technically inline but behaves specially — it is a "replaced element" that can have dimensions, so it is often described as "inline-block" in practice.

Three attributes power most media and navigation in HTML: href — "hypertext reference" — specifies a destination URL for links (<a>). Add target="_blank" rel="noopener noreferrer" when linking to external sites (the rel prevents tab-napping attacks). src — "source" — specifies the URL of an embedded resource: images, audio, video, scripts, and iframes all use src. alt — "alternative text" for images. If the image fails to load, the alt text is shown. Screen readers read it aloud to visually impaired users. Empty alt="" is correct for purely decorative images. Leaving it out entirely is an accessibility error.

HTML tables display tabular data — rows and columns of related information. Never use tables for page layout (use CSS flexbox/grid instead). Key tags: <table> is the container. <thead> groups header rows. <tbody> groups data rows. <tfoot> groups footer rows (totals etc.). <tr> is a table row. <th> is a header cell (bold + centered by default). <td> is a data cell. The colspan and rowspan attributes let a cell span multiple columns or rows.

Forms collect user data and send it to a server. The <form> tag's action attribute sets the destination URL; method sets the HTTP method (GET or POST). Every input should have a paired <label> — either wrapping the input or linked via for/id. This improves accessibility and increases the clickable area of inputs.