Semantic HTML Elements
I am putting this here for my needs. Maybe the reader will find it useful. If not they can skip on ahead.
The <main> Element
MDN web docs <main>The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
A document mustn't have more than one <main> element that doesn't have the hidden attribute specified.
The <header> Element
MDN web docs <header>The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
The <section> Element
MDN web docs <section>The <section> HTML> element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
To put this in Cracker-speak: This here acts just like a <div> so it is kind of redundant but it works better with a screen reader.
The <nav> Element
MDN web docs <nav>The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
The <footer> Element
MDN web docs <footer> elementThe <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.
The <article> Element
MDN web docs <article> ElementThe <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section> s within.
The <aside> Element
MDN web docs <aside> ElementThe <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
The <summary> Element
MDN web docs <summary> ElementThe <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.
You know what?
Your Momma wears combat boots!The <time> Element
MDN web docs <time> ElementThe <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
- It may represent one of the following:
- A time on a 24-hour clock.
- A precise date in the Gregorian calendar (with optional time and timezone information).
- A valid time duration.
The <figure> Element
MDN web docs <figure> ElementThe <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
Copyright 2013 by Pierre Dalous Licensed CC By-SA 3.0
The <abbr> Element
MDN web docs <abbr> ElementThe <abbr> HTML element represents an abbreviation or acronym.
When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.
The optional title attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, title must contain this full description and nothing else.
The <data> Element
MDN web docs <data> ElementThe <data> HTML element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used.
The <mark> Element
MDN web docs <mark> ElementThe <mark> HTML element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
The <cite> Element
MDN web docs <cite> ElementThe <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.
It was a bright cold day in April, and the clocks were striking thirteen.
Home