It is the first line of code in any modern HTML5 document. It is not an HTML tag, but an instruction to the web browser about which version of HTML the page uses, ensuring it renders in Standards Mode rather than Quirks Mode.
Without it, browsers default to Quirks Mode, a legacy rendering mode that emulates the non-standard behaviors of older browsers (like Internet Explorer 5) to maintain backward compatibility with ancient websites.
In Quirks Mode, modern CSS layouts (like Flexbox and Grid) often break, the box model behaves inconsistently, and JavaScript features may malfunction. Including the doctype guarantees that the browser interprets your code according to current W3C standards, providing a consistent experience across all devices.
It is case-insensitive (e.g., <!doctype html> works too) and requires no reference to external files.
This tag is the root element of an HTML document, serving as the top-level container that wraps all other elements on a webpage.
Every valid HTML document must have exactly one <html> element, which encloses both the <head> (metadata) and <body> (visible content) sections.
lang (accessibility, search engines, browser behavior) and dir (Vital for supporting Right-to-Left) are by far the most useful and critical attributes specifically for the <html> tag in modern web development.
The <head> element acts as the "brain" of the document. Its contents are not displayed directly on the webpage but provide essential instructions to the browser and search engines.
<title> Sets the page title shown in browser tabs and search results (distinct from the visible <h1> heading).
<meta> Specifies character encoding (charset="UTF-8"), viewport settings for mobile, and descriptions for search engines.
<link> Connects external stylesheets (CSS) and favicons.
<style> Contains internal CSS rules.
<script> Can load JavaScript (often with the defer attribute to delay execution until the body is ready).
Only one <head> tag is allowed per document, and it must appear before the <body>.
The <body> element represents the "payload" of the document. Everything placed inside this tag is rendered and visible to the user in the browser window. Hosts the actual content users interact with.
<h1>,<h6>,<p>,<span> Text & Headings.
<img>,<video>,<audio> Media.
<div>,<section>,<article>,<header>,<footer> Structure.
<a>,<button>,<form>,<input> Interactivity.
<script> Scripts. JavaScript that manipulates the DOM is often placed at the end of the <body> to ensure elements are loaded before the script runs.
There can only be one <body> tag per document.
Define headings, with <h1> being the most important. They are critical for Search Engines (SEO), accessibility, and readability. They maintain logical order and semantic structure over styling.
The <nav> element explicitly defines a section of a page containing navigation links, providing semantic meaning that helps search engines and screen readers understand the page structure. While older practices often wrapped navigation links in unordered lists (<ul>) within <nav>, modern approaches sometimes use direct anchor tags or other elements inside <nav> if it better suits accessibility needs or layout requirements.
Using <nav> is preferred over generic <div> tags for navigation sections because it clearly communicates the content's purpose. <a> (anchor) tags are inline elements by default, just like <span>.
The <span> tag is a non-semantic, inline container used to apply styles or attributes to small portions of text or other inline content without affecting the document layout.
Unlike <div>which is a block-level element that creates line breaks, <span>,allows for precise formatting changes, such as changing the color or font of specific words within a paragraph. It is best used when no other semantic tag (like <strong> and <em>) adequately describes the content's meaning.
The <div> tag group pieces of content (like text, images, or buttons) so they can: