🪴 Notes

HTML Element Cheat Sheet

Dec 16, 20244 min read

Course: CSCI 1210

Block Elements

<html>

  • Description → the root element of an HTML document.
  • Attributes:
    • lang → specifies the language of the document (e.g., lang="en") (optional)
    • xmlns → XML namespace attribute (e.g., xmlns="http://www.w3.org/1999/xhtml") (optional)
  • Description → container for metadata (title, scripts, open-graph, etc.)
  • Attributes: none

<body>

  • Description → contains the content of the document.
  • Attributes:
    • onload → script to be run when the document loads (optional)
    • onunload → script to be run when the document is unloaded (optional)
  • Description → represents introductory content or a group of navigation links.
  • Attributes: none
  • Description → represents the footer for its nearest sectioning content or root element.
  • Attributes: none

<section>

  • Description → represents a standalone section of content.
  • Attributes:
    • id → unique identifier for the section (optional)
    • class → CSS class names (optional)

<article>

  • Description → represents a self-contained composition that can be independently distributed or reused.
  • Attributes:
    • id → unique identifier for the article (optional)
    • class → CSS class names (optional)

<aside>

  • Description → represents a portion of a document whose content is indirectly related to the document’s main content.
  • Attributes:
    • id → unique identifier for the aside (optional)
    • class → CSS class names (optional)

<div>

  • Description → generic container for flow content, used for styling or scripting purposes.
  • Attributes:
    • id → unique identifier (optional)
    • class → CSS class names (optional)

<figure>

  • Description → represents self-contained content, often used for images, illustrations, or diagrams.
  • Attributes: none

<figcaption>

  • Description → provides a caption or legend for the <figure> element.
  • Attributes: none

Inline Elements

<span>

  • Description → generic inline container for phrasing content, typically used for styling purposes.
  • Attributes:
    • id → unique identifier (optional)
    • class → CSS class names (optional)

<a>

  • Description → defines a hyperlink, linking to another location within or outside the document.
  • Attributes:
    • href → specifies the URL of the linked resource (required)
    • target → specifies where to open the linked document (optional)

<img>

  • Description → embeds an image in the document.
  • Attributes:
    • src → URL of the image (required)
    • alt → alternative text for the image (required)
    • width → width of the image (optional)
    • height → height of the image (optional)

<strong>

  • Description → indicates that its contents have strong importance, typically rendered in bold.
  • Attributes: none

<em>

  • Description → indicates emphasis, typically rendered in italics.
  • Attributes: none

<code>

  • Description → represents a fragment of computer code.
  • Attributes: none

<br>

  • Description → produces a line break in text.
  • Attributes: none

<input>

  • Description → represents a typed data field, used for form controls.
  • Attributes:
    • type → specifies the type of input (e.g., text, password, checkbox) (required)
    • name → name of the input (optional)
    • value → default value of the input (optional)

<picture>

  • Description → container for multiple sources of images for different screen sizes or formats.
  • Attributes: none

<source>

  • Description → specifies multiple media resources for <picture> or <video>.
  • Attributes:
    • srcset → defines the URL of the image to be used (optional but typically used)
    • media → media query for responsive images (optional)
    • type → MIME type of the resource (optional)

<iframe>

  • Description → embeds another HTML page within the current document.
  • Attributes:
    • src → URL of the embedded page (required)
    • width → width of the iframe (optional)
    • height → height of the iframe (optional)

Table Elements

<table>

  • Description → represents a table.
  • Attributes:
    • border → specifies the border width of the table (optional)
    • cellspacing → specifies the space between cells (optional)
    • cellpadding → specifies the space between cell content and cell borders (optional)

<thead>

  • Description → groups the header content in a table.
  • Attributes: none

<tbody>

  • Description → groups the main body content in a table.
  • Attributes: none

<tfoot>

  • Description → groups the footer content in a table.
  • Attributes: none

<tr>

  • Description → represents a row in a table.
  • Attributes:
    • rowspan → specifies the number of rows a cell should span (optional)
    • colspan → specifies the number of columns a cell should span (optional)

<th>

  • Description → represents a header cell in a table, typically bold and centered.
  • Attributes:
    • scope → indicates whether the header is for a row, column, or group of rows or columns (optional)
    • colspan → specifies the number of columns the header cell should span (optional)
    • rowspan → specifies the number of rows the header cell should span (optional)

<td>

  • Description → represents a standard cell in a table.
  • Attributes:
    • colspan → specifies the number of columns the cell should span (optional)
    • rowspan → specifies the number of rows the cell should span (optional)

<caption>

  • Description → provides a title or caption for the table.
  • Attributes: none

Graph View

Backlinks