HTML Elements and Their Summaries

Posted on 2025-01-20 14:28:46

HTML Elements and Their Summaries

Nothing fancy just a few of the most common HTML elements and a one word summary to help out with your web dev exam.

Head Section Elements

  • head: Contains metadata about the document, such as links to stylesheets and scripts.
  • title: Defines the title of the webpage, shown in the browser tab.
  • style: Allows CSS styles to be embedded directly within the HTML document.
  • meta: Provides metadata such as character encoding, viewport settings, and SEO descriptions.
  • link: Used to link external resources like stylesheets (CSS) or icons.

Body Section Elements

  • body: Contains the main content of the HTML document, visible on the webpage.

Text Formatting Elements

  • a: Defines a hyperlink to another page or section within the same page.
  • b: Makes text bold without adding importance.
  • i: Italicizes text, typically for emphasis or stylistic purposes.
  • p: Represents a paragraph of text.
  • q: Used for short inline quotations.
  • s: Strikes through text to indicate deletion or inaccuracy.
  • u: Underlines text, though it's not commonly used for styling.
  • h1-h6: Define headings, with h1 being the largest and h6 the smallest.

List Elements

  • menu: Represents a list of interactive commands or options.
  • ol: Ordered list where items are numbered.
  • ul: Unordered list where items are bulleted.
  • li: Defines an item in a list.
  • dd: Provides details for a term in a description list.
  • dl: Represents a description list.
  • dt: Specifies a term in a description list.
  • br: Inserts a line break within text.

Structural Elements

  • header: Represents introductory content, such as a logo or navigation links.
  • nav: Defines a section containing navigation links.
  • main: Represents the main content of the page.
  • article: Defines an independent, self-contained piece of content.
  • section: Groups related content within a webpage.
  • aside: Contains additional content related to the main content, such as sidebars.
  • footer: Represents the bottom section of a page, often containing copyright or contact info.
  • summary: Used inside a <details> element to provide a brief heading.
  • details: Creates a collapsible section that can be toggled open or closed.
  • hgroup: Groups multiple headings (h1-h6) together.
  • figure: Represents self-contained content like images, diagrams, or code snippets.
  • figcaption: Provides a caption for a <figure> element.

Text Styling Elements

  • em: Emphasizes text, usually rendered in italics.
  • strong: Highlights important text, typically displayed in bold.
  • span: A generic inline container for styling purposes.
  • hr: Inserts a horizontal line to separate sections.
  • abbr: Defines an abbreviation, often with a tooltip when hovered.
  • address: Specifies contact information.
  • blockquote: Defines a block-level quotation.
  • button: Creates a clickable button.
  • cite: Represents the title of a work, like a book or article.
  • mark: Highlights text for reference.
  • code: Displays code snippets in a monospaced font.
  • del: Marks deleted text with a strikethrough.
  • output: Displays the result of a calculation or script.
  • pre: Displays preformatted text with preserved spaces and line breaks.
  • sub: Formats text as a subscript (e.g., H₂O).
  • sup: Formats text as a superscript (e.g., x²).
  • small: Reduces the font size of text.
  • textarea: Defines a multi-line input field for text.

Media Elements

  • img: Embeds an image in the document.
  • picture: Defines multiple image sources for different screen sizes.
  • canvas: Creates a space for dynamic graphics via JavaScript.
  • video: Embeds a video player.
  • audio: Embeds an audio player.
  • source: Specifies alternative media sources for <video> and <audio>.

Table Elements

  • table: Defines a table structure.
  • td: Represents a table cell.
  • th: Represents a table header cell.
  • tr: Defines a table row.

Form Elements

  • input: Creates an interactive input field.
  • optgroup: Groups related <option> elements within a <select>.
  • option: Defines an item in a dropdown list.
  • label: Describes an input field for accessibility.
  • select: Creates a dropdown menu.
  • data: Links a value to machine-readable data.
  • datalist: Provides autocomplete suggestions for an <input> field.

Miscellaneous Elements

  • ins: Marks inserted text, typically underlined.
  • kbd: Represents user keyboard input.
  • meter: Displays a visual representation of a value within a range.
  • progress: Represents a progress bar.
  • dfn: Identifies a term being defined.
  • div: A generic block-level container for structuring content.
  • embed: Embeds external content, such as a video or plugin.
Back to Home