Semantic HTML

Here are some old notes that I took on the meaning behind HTML elements. I was trying to getter Search Engine Optimization results for a React application, but I decided to switch to Server Side Rendering instead. nevertheless, these notes still apply to making a side that uses good, semantic HTML.

2 452

Structure of Document:

Subsection

Notes on subsection
TAG NAME
- Description of the element
  - Usage Notes

Main Root

<html>
- Represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
- Note: Include lang in html attributes to make sure content in the page <head> is pronounced properly

Doument Metadata

Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked to another file that has the information.
<base>
- Specifies the base URL to use for all relative URLs in a document. There can be only one such element in a document.
- Since you are including the base element, for in page anchors:
  - Links pointing to a fragment in the document — e.g. — are resolved with the , triggering an HTTP request to the base URL with the fragment attached.
  - For example, given <base href="https://example.com/"> and this link: <a href="#anchor">To anchor</a>. The link points to https://example.com/#anchor.
<head>
- Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
<link>
- Specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
<meta>
- Represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> and <title>.
<style>
- Contains style information for a document or part of a document. It contains CSS, which is applied to the contents of the document containing this element.
<title>
- Defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.

Sectioning Root

<body>
- represents the content of an HTML document. There can be only one such element in a document.
- body has some interesting attibutes like ononline, onoffline, onredo (nav forward), onundo(nav back), onmessage, onbeforeunload, and onbeforeprint that you might want to look into

Content Sectioning

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
- <address>
  - Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
    - May be Useful for presenting author in article
    - The <address> element can only be used to represent the contact information for its nearest <article> or <body> element ancestor.
    - This element should not contain more information than the contact information, like a publication date (which belongs in a <time> element).
    - Typically an <address> element can be placed inside the <footer> element of the current section, if any.
- <article>
  - 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, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
    - When an <article> element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be <article> elements nested in the <article> representing the blog post.
    - Each <article> should be identified, typically by including a heading (<h1> - <h6> element) as a child of the <article> element.
    - Denote author in a <address> tag. Denote Last Updated Date in <datetime> or <time> tag
- <aside>
  - 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.
    - Do not use the <aside> element to tag parenthesized text, as this kind of text is considered part of the main flow.
    - Might want to allow authors to add an <aside> that can be draggable to a document
- <footer>
  - 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.
    - 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.
    - Enclose information about the author in an <address> element that can be included into the <footer> element.
    - When the nearest ancestor sectioning content or sectioning root element is the body element the footer applies to the whole page.
- <header>
  - 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 <header> element can define a global site header, described as a banner in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.
    - Otherwise, it is a section in the accessibility tree, and usually contains the surrounding section's heading (an h1 – h6 element) and optional subheading, but this is not required.
- <h1>-<h6>
  - Represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
    - A common navigation technique for users of screen reading software is to quickly jump from heading to heading in order to determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
    - Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.
    - Sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.
- <hgroup>
  - Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline.
    - The <hgroup> element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a <p> element within the <hgroup>.
    - The <hgroup> itself has no impact on the document outline of a web page. Rather, the single allowed heading within the <hgroup> contributes to the document outline.
    - Might want to use hgroup on pages whose heading is an image and a h1
- <main>
  - 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.
    - The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn't be included unless the search form is the main function of the page.
- <nav>
  - 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.
    - It's not necessary for all links to be contained in a <nav> element. <nav> is intended only for a major block of navigation links; typically the <footer> element often has a list of links that don't need to be in a <nav> element.
    - A document may have several <nav> elements, for example, one for site navigation and one for intra-page navigation. aria-labelledby can be used in such case to promote accessibility, see example.
- <section>
  - 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.
    - Should have an h1>h6 heading
    - If you are only using the element as a styling wrapper, use a <div> instead.
- <search>
  - Represents a part that contains a set of form controls or other content related to performing a search or filtering operation.
    - The <search> element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the <search> element as they are search features.
    - The <search> element defines a search landmark. This removes the need for adding role=search to a <form> element.

Text Content

Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.
- <blockquote>
  - Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
    - Include a cite attribute for the blockquote that designates a source document or message for the information provided. This attribute is intended to point to information explaining the context or the reference for the quote.
    - To change the indentation applied to the quoted text, use the CSS margin-left and/or margin-right properties, or the margin shorthand property.
    - To include shorter quotes inline rather than in a separate block, use the <q> (Quotation) element.
    - Use This When Quoting Sources For Website
- <dd>
  - Provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
    - Attributes => nowrap: If the value of this attribute is set to yes, the definition text will not wrap. The default value is no.
    - Might be good for listing variables used in an equation or for using variables when showing census results
- <div>
  - The generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like flexbox is applied to its parent element).
    - The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.
- <dl>
  - Represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
- <dt>
  - Specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.
- <figcaption>
  - Represents a caption or legend describing the rest of the contents of its parent <figure> element.
- <figure>
  - 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.
    - Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
    - A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure's caption. <figcaption> should be used inside of ,figure>.
- <hr>
  - Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
    - Attributes:
      - align: Sets the rule to have no shading.
      - color:Sets the color of the rule through color name or hexadecimal value.
      - noshade:Sets the rule to have no shading.
      - size: Sets the height, in pixels, of the rule.
      - width: Sets the length of the rule on the page through a pixel or percentage value.
- <li>
  - Represents an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
    - Attribues:
      - value: set the current value of an li. Must be a number even if numbering type is not numerical
      - type: This character attribute indicates the numbering type:
        a: lowercase letters
        A: uppercase letters
        i: lowercase roman numerals
        I: uppercase roman numerals
        1: numbers
- <menu>
  - A semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).
    - The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items. The related <menuitem> element has been deprecated.
    - Use for toolbar for lexical
    - Use for successive commands on a comment / article / poll
- <ol>
  - Represents an ordered list of items — typically rendered as a numbered list.
  - Attributes:
    - reversed: This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.
    - start: An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".
    - type
      - a: lowercase letters
      - A: uppercase letters
      - i: lowercase roman numerals
      - I: uppercase roman numerals
      - 1: numbers
- <p>
  - Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
- <pre>
  - Represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.
- <ul>
  - Represents an unordered list of items, typically rendered as a bulleted list.
  - Attributes:
    - type: This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are circle, disk, square, and sometimes: triangle

Inline Text Semantics

Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
- <a>
  - Together with its href attribute, creates a hyperlink to web pages, files, email addresses, locations within the current page, or anything else a URL can address.
  - Attributes:
    - download: Should be same-site Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:
      - filename:defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
    - href: The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:
      - Sections of a page with document fragments
      - Specific text portions with text fragments
      - Pieces of media files with media fragments
      - Telephone numbers with tel: URLs
      - Email addresses with mailto: URLs
      - SMS text messages with sms: URLs
      - While web browsers may not support other URL schemes, websites can with registerProtocolHandler()
    - hreflang: Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
    - ping: A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.
    - referrerpolicy: How much of the referrer to send when following the link.
      - origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
      - origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
      - same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
      - strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
      - strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
      - unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
    - rel: The relationship of the linked URL as space-separated link types.
    - target: Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:
      - _self: the current browsing context. (Default)
      - _blank: usually a new tab, but users can configure browsers to open a new window instead
      - _parent: the parent browsing context of the current one. If no parent, behaves as _self.
      - _top: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self.
    - type: Hints at the linked URL's format with a MIME type. No built-in functionality.
- <abbr>
  - 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.
- <b>
  - Used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the strong element.
    - Use the <b> for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).
    - Do not confuse the <b> element with the <strong>, <em>, or <mark> elements. The <strong> element represents text of certain importance, <em> puts some emphasis on the text and the <mark> element represents text of certain relevance. The <b> element doesn't convey such special semantic information; use it only when no others fit.
- <bdi>
  - Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.
    - Useful for when you begin to incorporate rtl languages.
- <bdo>
  - Overrides the current directionality of text, so that the text within is rendered in a different direction.
    - Useful for when you begin to incorporate rtl languages.
- <br>
  - Produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
    - You can set a margin on <br> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose.
- <cite>
  - Used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.
    - In the context of the <cite> element, a creative work that might be cited could be, for example, one of the following
- <code>
  - Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
    - To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code.
- <data>
  - 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.
- <dfn>
  - Used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest section ancestor of the <dfn> element, is considered to be the definition of the term.
- <em>
  - Marks text that has stress emphasis. The <em> element can be nested, with each nesting level indicating a greater degree of emphasis.
- <i>
  - Represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, and taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.
- <kbd>
  - Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.
    - Might be useful when telling the user to fit certain keys to do certain things.
- <mark>
  - Represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
- <q>
  - Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.
- <rp>
  - Used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text.
- <rt>
  - Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element.
- <ruby>
  - Represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.
- <s>
  - Renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.
- <samp>
  - Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).
- <small>
  - Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font size smaller, such as from small to x-small.
- <span>
  - A generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a div element, but div is a block-level element whereas a <span> is an inline-level element.
- <strong>
  - Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
- <sub>
  - Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
- <sup>
  - Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
- <time>
  - 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.
  - Attributes:
    - datetime: This attribute indicates the time and/or date of the element and must be in one of the formats described below. If the element does not have a datetime attribute, it must not have any element descendants, and the datetime value is the element's child text content.
      - a valid year string (2011)
      - a valid month string (2011-11)
      - a valid date string (2011-22-18)
      - a valid yearless date string (11-18)
      - a valid week string (2011-W47)
      - a valid time string (14:54, 14:54:39, 14:54:39.929)
      - a valid local date and time string (2011-11-18T14:54:39.929)
      - a valid global date and time string (2011-11-18T14:54:39.929Z)
      - a valid duration string (PT4H18M3S)
- <u>
  - Represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline but may be altered using CSS.
    - Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.
    - You should not use <u> to underline text for presentation purposes, or to denote titles of books.
    - Most of the time, you actually don't want to use <u>. Here are some examples that show what you should do instead in several cases.
- <var>
  - Represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.
- <wbr>
  - Represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Image and MultiMedia

HTML supports various multimedia resources such as images, audio, and video.
- <area>
  - Defines an area inside an image map that has predefined clickable areas. An image map allows geometric areas on an image to be associated with hyperlink.
- <audio>
  - Used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
- <img>
  - Embeds an image into the document.
- <map>
  - Used with <area> elements to define an image map (a clickable link area).
- <track>
  - Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.
- <video>
  - Embeds a media player which supports video playback into the document. You can also use <video> for audio content, but the audio element may provide a more appropriate user experience.

Embeded Content

In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.
- <embed>
  - Embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
- <iframe>
  - Represents a nested browsing context, embedding another HTML page into the current one.
- <object>
  - Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
    - Might want to use for embedding pdfs
- <picture>
  - Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
- <portal>
  - Enables the embedding of another HTML page into the current one to enable smoother navigation into new pages.
- <source>
  - Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

SVG and MathML

You can embed SVG and MathML content directly into HTML documents, using the <svg> and <math> elements.
- <svg>
  - Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
- <math>
  - The top-level element in MathML. Every valid MathML instance must be wrapped in it. In addition, you must not nest a second <math> element in another, but you can have an arbitrary number of other child elements in it.

Scripting

To create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.
- <canvas>
  - Container element to use with either the canvas scripting API or the WebGL API to draw graphics and animations.
- <noscript>
  - Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
    - When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements. When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants. Otherwise: flow content or phrasing content.
- <script>
  - Used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.

Demarcating Edits

These elements let you provide indications that specific parts of the text have been altered.
- <del>
  - Represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The <ins> element can be used for the opposite purpose: to indicate text that has been added to the document.
- <ins>
  - Represents a range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document.

Table Content

The elements here are used to create and handle tabular data.
- <caption>
  - Specifies the caption (or title) of a table.
- <col>
  - Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
- <colgroup>
  - Defines a group of columns within a table.
- <table>
  - Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
- <tbody>
  - Encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).
- <td>
  - Defines a cell of a table that contains data. It participates in the table model.
- <tfoot>
  - Defines a set of rows summarizing the columns of the table.
- <th>
  - Defines a cell as a header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
- <thead>
  - Defines a set of rows defining the head of the columns of the table.
- <tr>
  - Defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

Forms

HTML provides several elements that can be used together to create forms that the user can fill out and submit to the website or application. Further information about this available in the HTML forms guide.
- <button>
  - An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog.
    - Attributes:
      - autofocus: This Boolean attribute specifies that the button should have input focus when the page loads. Only one element in a document can have this attribute.
      - disabled: This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
      - form: The <form> element to associate the button with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <button> is associated with its ancestor <form> element, if any.)
      - formaction: The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. Does nothing if there is no form owner.
      - formenctype: If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), specifies how to encode the form data that is submitted. Possible values:
        application/x-www-form-urlencoded: The default if the attribute is not used.
        multipart/form-data: Used to submit <input> elements with their type attributes set to file.
        text/plain: Specified as a debugging aid; shouldn't be used for real form submission.
      - formmethod: If the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the HTTP method used to submit the form. Possible values:
        If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
        If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the name of, or keyword for, a browsing context (a tab, window, or <iframe>). If this attribute is specified, it overrides the target attribute of the button's form owner. The following keywords have special meanings:
        _self: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.
        _blank: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings.
        _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
        _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
      - formnovalidate:
        The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      - formtarget:
        Turns a <button> element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.
      - name:
        Specifies the action to be performed on a popover element being controlled by a control <button>. Possible values are:
      - popovertarget: Turns a <button> element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.
      - popovertargetaction: Specifies the action to be performed on a popover element being controlled by a control <button>. Possible values are:
        hide: The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.
        show: The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.
        toggle: The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, "toggle" is the default action that will be performed by the control button.
      - type: The default behavior of the button. Possible values are:
        submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.
        reset: reset: The button resets all the controls to their initial values, like <input type="reset">. (This behavior tends to annoy users.)
        button: button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
      - value: Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
- <datalist>
  - Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
    - Like <select>, but also has a text field
- <fieldset>
  - Used to group several controls as well as labels (<label>) within a web form.
    - Attributes:
      - disabled: If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <legend> element won't be disabled.
      - form: This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the <input> elements inside the <fieldset> to be associated with the form, you need to use the form attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using HTMLFormElement.elements.
      - name: The name associated with the group.
- <form>
  - Represents a document section containing interactive controls for submitting information.
    - Attributes:
      - accept: Comma-separated content types the server accepts.
      - accept-charset:
      - autocapitalize:
      - autocomplete:
      - name:
      - rel:
      - action
      - enctype
      - method
      - novalidate
      - target
- <input>
  - Used to create interactive controls for web-based forms to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
- <label>
  - Represents a caption for an item in a user interface.
- <legend>
  - Represents a caption for the content of its parent <fieldset>.
- <meter>
  - Represents either a scalar value within a known range or a fractional value.
- <optgroup>
  - Creates a grouping of options within a <select> element.
- <option>
  - Used to define an item contained in a select, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
- <output>
  - Container element into which a site or app can inject the results of a calculation or the outcome of a user action.
    - Character counter or the like hsould be kept here
- <progress>
  - Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
    - Probably should be used for htmx-indicator
- <select>
  - Represents a control that provides a menu of options.
- <textarea>
  - Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.

Interactive Elements

HTML offers a selection of elements that help to create interactive user interface objects.
- <details>
  - Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.
- <dialog>
  - Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
- <summary>
  - 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.

Web Components

Web Components is an HTML-related technology that makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.
- <slot>
  - Part of the Web Components technology suite, this element is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.
- <template>
  - A mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Global Attributes

Only Include Stuff that is Not Obvious

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>…</foo>, even though <foo> is not a valid HTML element.

In addition to the basic HTML global attributes, the following global attributes also exist:
- aria-role and the multiple aria-* states and properties, used for ensuring accessability
- Event Handler Attributes, e.g. onabort, onclick
- autocapitalize
  - Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values:
    - off or none: no autocapitalization is applied (all letters default to lowercase)
    - on or sentences: the first letter of each sentence defaults to a capital letter; all other letters default to lowercase
    - words: the first letter of each word defaults to a capital letter; all other letters default to lowercase
    - characters: all letters should default to uppercase
- autofocus
  - Indicates that an element is to be focused on page load, or as soon as the <dialog> it is part of is displayed. This attribute is a boolean, initially false.
- contenteditable
  - An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
    - true=content editable
    - false=content not editable
- contextmenu
  - The id of a <menu> to use as the contextual menu for this element
    -data-*
  - Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts.
- dir
  - directionality of element's text
  - Values:
    - ltr, rtl, or auto (which lets the user agent decide.)
- draggable
  - An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values:
    - true or false
- hidden
  - An enumerated attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
- inert
  - A boolean value that makes the browser disregard user input events for the element. Useful when click events are present.
- inputmode
  - Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on <input> elements, but is usable on any element while in contenteditable mode.
    - Possible values = none,text,decimal,numeric,tel,search,email,url
- lang
  - Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user.
- nonce
  - A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed.
- popover
  - Used to designate an element as a popover element (see Popover API). Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.
- role
  - Roles define the semantic meaning of content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object.
- spellcheck
  - An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
    - empty string or true, which indicates that the element should be, if possible, checked for spelling errors;
    - false, which indicates that the element should not be checked for spelling errors.
- translate
  - An enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
    - empty string or yes, which indicates that the element will be translated.
    - no, which indicates that the element will not be translated.
- virtualkeyboardpolicy
  - An enumerated attribute used to control the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available for elements that also uses the contenteditable attribute.
  - auto or an empty string, which automatically shows the virtual keyboard when the element is focused or tapped.
  - manual, which decouples focus and tap on the element from the virtual keyboard's state.

Comments

You have to be logged in to add a comment

User Comments

About Embedding News Content

Navigate to the News Article you want to embed.
Copy the url of the article and paste into the input below.
- For a news article to be properly embedded, it must have valid <meta> tags as seen below.
- The image url must be able to be accessed from any source.

<meta property="og:type" content="article" />
<meta property="og:type" content="any string" />
<meta property="og:image" content="valid image url" />
<meta property="og:description" content="any string" />

Inserting Custom HTML:

Basics:

Double click inside the custom HTML to edit the html.
Learn about the basics of HTML using the mdn web docs on HTML.

Inserting Code Expressions:

 <dialog> below. You can generate inline code or block code, like seen below:

#include <stdio.h>

void bubble_sort(int arr[], int n) {
    int i, j;
    for (i = 0; i < n-1; i++) {
        for (j = 0; j < n-i-1; j++) {
            if (arr[j] > arr[j+1]) {
                int temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
}

Inserting $\Large{LaTeX}$ Expressions:

You can insert inline:

a^2+b^2=c^2

or block math expressions (see below) by using the Math Markup dialog below the code editor.

e^{i\pi}+1=0

SVG Icon Search

You can search for svg icons () by clicking the SVG Search button below.

AI Code Generation

To be Completed

The Sanitization of HTML

Go over the sanitization of HTML process: