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 primary purpose of the <a> tag is to define a starting point that, when clicked, redirects the user to a specified destination. This destination can be:
To work correctly, the tag requires an opening , a closing , and, mandatorily, the href attribute (Hypertext Reference), which indicates the destination address. The text or element placed between the tags is what becomes clickable.
In addition to href, other common attributes include:
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:
The <p> tag defines a paragraph and is a block-level element, meaning it starts on a new line and spans the full width of its container.
Browsers automatically add white space (margins) before and after each paragraph to separate it from adjacent content.
The <br> tag is a void element used to insert a single line break in text without starting a new paragraph. It is commonly used for formatting addresses, poems, or song lyrics where specific line breaks are part of the content structure.
The HTML <button> element is a semantic interactive control used to trigger actions, such as form submissions or JavaScript events.
It is distinct from <input type="button"> because it allows phrasing content (like text, images, or icons) inside its opening and closing tags. It is valid to nest a button within a paragraph (<p>), as the button is considered phrasing content, though developers should ensure accessibility by linking descriptive text to the control using attributes like aria-describedby. Because buttons are block-level interactive elements that default to display: inline-block in many frameworks, they may not wrap naturally within text flows; for seamless text wrapping, it is often better to use an inline element with a role="button" attribute or a link styled as a button.
The <img> tag is the standard HTML element for embedding images into a webpage. It is an empty element (self-closing), meaning it contains attributes but no closing tag or inner content.
The <audio> tag embeds sound content. To make it functional, you typically add the controls attribute, which displays the play/pause button and volume slider. You can also combine it with autoplay (often requiring muted to work in modern browsers), loop to repeat the track, and preload to manage data usage.
The text 'Your browser does not support the audio element.' is fallback content written directly inside the HTML tags. The browser automatically displays this text only if it does not recognize the <audio> element.
The <video> tag embeds sound content. To make it functional, you typically add the controls attribute, which displays the play/pause button and volume slider. You can also combine it with autoplay (often requiring muted to work in modern browsers), loop to repeat the track, and preload to manage data usage.
The text 'Your browser does not support the video tag.' is fallback content written directly inside the HTML tags. The browser automatically displays this text only if it does not recognize the <video> tag.