Helpful HTML Elements
This page will be a collection of helpful HTML elements that I can use in my projects. Each element will have a description of what it does and how to use it.
Document Structure
These tags define the overall shell of your webpage.
- !DOCTYPE html
- Declares the document type and version of HTML.
- html
- The root element that wraps all content on the page.
- head
- Contains metadata (behind-the-scenes info) like the title and links to CSS.
- title
- Sets the name of the page shown in the browser tab.
- meta
- Defines metadata like character encoding or mobile responsiveness.
- body
- Contains all the visible content (text, images, buttons).
Text Content & Hierarchy
Used to organize and display written information
- h1 to h6
- Heading elements used to create a hierarchy of importance.
- p
- Defines a paragraph of text.
- br
- Produces a line break in text (empty element).
- hr
- Represents a thematic break or horizontal rule between sections.
- strong
- Indicates that its contents have strong importance or urgency (usually bold).
- em
- Marks text that has stressed emphasis (usually italicized).
Hyperlinks & Media
The "web" part of a webpage—connecting to other files and adding visuals.
- a
- The anchor element used to create hyperlinks via the href attribute.
- img
- Embeds an image into the document.
- video
- Embeds media players for video playback.
- audio
- Embeds sound content in documents.
Lists and Layout Containers
Crucial for grouping items and creating page layouts.
- ul
- An unordered list, typically rendered as a bulleted list.
- ol
- An ordered list, typically rendered as a numbered list.
- li
- Represents an item in a list.
- div
- A generic block-level container for flow content.
- span
- A generic inline container for phrasing content.
- dl
- A description list.
- dt
- Defines a term in a description list.
- dd
- Provides the description or definition for the preceding term.
Semantic Layout (Modern Best Practices)
These tags tell the browser (and Google) exactly what part of the page they are looking at.
- header
- Represents introductory content or a set of navigational links.
- nav
- A section of a page that links to other pages or parts within the page.
- main
- Indicates the dominant content of the body of a document.
- section
- Represents a standalone section of a document.
- footer
- Contains information about its containing element (author, copyright, etc.).
Forms & Tables
Used for organizing data and collecting user input.
- form
- Represents a document section containing interactive controls for submitting info.
- input
- Used to create interactive controls for web-based forms.
- button
- A clickable button used to submit forms or trigger functions.
- table
- Represents data in a two-dimensional table format.
- tr
- Defines a row of cells in a table.
- td
- Defines a standard data cell in a table.