HTML Element Reference

This page lists all the label Created HTML element

They have been grouped by function to make it easier to find what you want. At the same time, all elements are listed alphabetically in the sidebar.

remarks: For more basic information about HTML elements and attributes, see Introduction to HTML Related content in.

Primary root element

element describe
<html> Represents the root (top-level element) of an HTML document, so it is also called Root element All other elements must be descendants of this element.

document metadata

Metadata contains page related information, including styles, scripts, and data, which can help some software (such as Search Engines (en-US) browser Better use and render pages. The metadata of styles and scripts can be defined directly in the web page or linked to external files containing relevant information.

element describe
<base> Specifies the root URL for all relative URLs contained in a document. There can only be one element in a copy.
<head> Contains configuration information (metadata) related to the document, including title script and style sheet Etc.
<link> Specifies the relationship between the current document and external resources. This element is most commonly used to link CSS. In addition, it can also be used to create site icons (such as "favicon" style icons and icons used on mobile devices to display on the home screen).
<meta> Indicates those that cannot be represented by other HTML meta related elements metadata Information. For example: <base> <link> <script> <style> or <title>
<style> The style information containing the document or part of the document content will be applied to the document containing this element.
<title> Define the title of the document, displayed in browser On the title block or tab of the. It should only contain text. If it contains labels, any labels it contains will be ignored.

Partition root element

element describe
<body> Represents the content of a document. There can only be one element in the document.

Content partition

The content partitioning element allows you to logically organize and partition the content of a document. Use partition elements including header, footer, nav, and title (h1~h6) to create a clear outline for the page content, so as to distinguish the content of each chapter.

element describe
<address> It means that the HTML in it provides the contact information of a person, someone or an organization (etc.).
<article> It refers to an independent structure in a document, page, application or website. It is intended to be an independently assignable or reusable structure. For example, in publishing, it may be a forum post, magazine or news article, blog, user submitted comments, interactive components, or other independent content items.
<aside> Represents a part of a document whose content is only indirectly related to the main content of the document. It usually appears in the form of a sidebar or call out box.
<footer> Represents the most recent parent Segment content or Root of segment The footer of the element. <footer> It usually contains information such as the chapter author, copyright data, or links related to documents.
<header> Represents introductory content, usually including a set of introductory or useful elements to aid navigation. It may contain some title elements, but it may also contain other elements, such as logo, search box, author name, and other elements.
<h1> <h2> <h3> <h4> <h5> <h6> Chapter titles representing six different levels, <h1> The highest level, and <h6> The lowest level.
<main> Presents the body of the document body. The main part is composed of the contents that are directly related to the document, or extend to the central theme of the document, and the main functional parts of the application.
<nav> Represents a part of a page that provides navigation links in the current document or other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<section> Represents a general independent chapter in an HTML document, which is not represented by more specific semantic elements. Generally, it contains a title.

Text content

Use HTML text content elements to organize open tags <body> And closed label </body> The contents of a block or chapter in. These elements can identify the purpose or structure of the content, which is important for Accessibility and Search engine optimization Very important.

element describe
<blockquote> The words that represent them are references. Usually, when rendering, this part of the content will have a certain indentation. The URL address of the citation source can use the attribute cite The source text can be used <cite> Element.
<dd> Used to indicate a description list( <dl> )Previous term in element( <dt> )Description, definition, or value of.
<div> A general streaming content container, without using CSS, has no impact on content or layout until the style is set in some way (for example, applying the style directly to the element, or Elastic box The layout model is applied to its parent element).
<dl> One contains a set of terms (using <dt> Element) and description (specified by <dd> Element). It is usually used to display vocabulary or metadata (key value pair list).
<dt> Declare a term in a description or definition list. This element can only be used as <dl> The child element of appears. This element is usually followed by a <dd> Element; But several consecutive <dt> Elements will also be represented by the first <dd> Element definition.
<figcaption> Describe its parent element <figure> Title or legend of other contents in.
<figure> Represents an independent piece of content, which may include <figcaption> The title of the element definition. The illustration, title and content in it are usually used as an independent reference unit.
<hr> It indicates the theme conversion between paragraph level elements: for example, the change of the scene in a story, or the change of the theme of a chapter.
<li> Represents an entry in a list. It must be contained in a parent element: ordered list( <ol> ), unordered list( <ul> )Or menu( <menu> )。 In menus or unordered lists, the list items are usually displayed in point order; In a sequential list, the list entries usually display the counts in ascending order on the left, such as numbers or letters.
<menu> <ul> But is regarded by the browser (and exposed to the accessibility tree) as <ul> No difference. It represents an unordered list of entries (using <li> Means).
<ol> Represents an ordered list, usually rendered as a numbered list.
<p> Represents a paragraph of text. This element is typically represented as a block of text separated from adjacent blocks by blank lines and/or first line indents. However, HTML paragraphs can form structural groupings with any related content (for example, images or form fields).
<pre> Represents predefined formatted text. The text in this element is usually arranged according to the HTML file Equal width The form of the font is displayed, and the blank characters in the text will be displayed.
<ul> Represents a series of unordered list items, usually rendered as a bulleted list.

Inline Text Semantics

Use HTML inline text semantics to define the semantics, structure, or style of words, content, or any text.

element describe
<a> Through its href Property to create hyperlinks to other Web pages, files, e-mail addresses, locations within the same page, or any other URL.
<abbr> Used to represent abbreviations.
<b> It is used to attract the reader's attention to the content of this element (if there is no special emphasis). This element used to be considered a Boldface element, and most browsers still display text in bold. However, you should not <b> The element is used to display bold text; The alternative is to use CSS font-weight Property to create bold text.
<bdi> Tell the browser that the two-way algorithm isolates the text it contains from the surrounding text. This function is particularly useful when a website inserts some text dynamically and does not know the direction of the inserted text.
<bdo> Overlay the directionality of the text to render the text in different directions.
<br> Generate a line feed (carriage return) symbol in the text. This element is useful for writing poems and addresses, where line breaks are very important.
<cite> Used to contain the title of the referenced work. This reference may be an abbreviation for the metadata referenced according to the appropriate context contract.
<code> Display its contents in a way that aims to indicate that its contents are computer code fragments. By default, it is displayed in the user agent's default constant width font.
<data> Associate the specified content with machine readable translation. However, if the content is related to time or date, you must use the time element.
<dfn> Used to represent a term defined in the context of a defining phrase or sentence. Parent <p> Elements <dt> / <dd> Yes, or with <dfn> The nearest partition element of the element is recognized as the definition of the term.
<em> Mark the content that users need to focus on, <em> Elements can be nested. The deeper the nesting level is, the more important the content is deemed to be.
<i> It is used to represent a series of texts that need to be distinguished from ordinary texts for some reasons. For example, conventional texts, technical terms, classification names, etc. It is usually expressed in italics, which is also the element( <i> )Source of naming.
<kbd> Represents an inline text that comes from user input from a keyboard, voice input, or other text input device. By convention, the user agent displays in its default constant width font <kbd> Element, although this is not mandatory in the HTML standard.
<mark> Represents text that is marked or highlighted for reference or symbolic purposes, due to the relevance or importance of the marked paragraph in a closed context.
<q> Represents a closed and short line reference text. Most modern browsers do this by wrapping text in quotation marks. This element is applicable to short text that does not need segmentation; For long text references, use <blockquote> Element.
<rp> Used for those who cannot use <ruby> The element shows the browser of ruby annotations and provides fallback parentheses. One <rp> The element should be wrapped with a left or right bracket, which will contain the <rt> The elements are wrapped.
<rt> Specifies the ruby text component of ruby annotation, which is used to describe the pronunciation, translation or transliteration information of East Asian characters. The element is always in the <ruby> Element.
<ruby> It is used to display small annotations above, below or beside the basic text, and is usually used to display the pronunciation of East Asian characters. It is also used to annotate other types of text, but this usage is less common.
<s> Use strikethrough to render text. use <s> Element to represent something that is no longer relevant or accurate. However, it is not recommended to use <s> To do this, use the del and ins elements as appropriate.
<samp> It is used to identify the computer program output, and is usually rendered using the browser's default constant width font (for example Courier Or Lucida Console).
<small> Represents marginal notes and small fonts, such as copyright and law, which are displayed independently of their styles. By default, it renders the text in it in a font one size smaller, such as from small reach x-small
<span> The general line content container for phrase content does not have any special semantics. You can use it to group elements to achieve some style intent (by using class perhaps id Attribute), or these elements have common attributes, such as lang It should be used when there are no other suitable semantic elements. <span> Similar to the div element, but <div> Is a Block level element and <span> then is Row level element
<strong> It indicates that its content is very important, serious or urgent. Browsers are usually displayed in bold.
<sub> Defines inline text that should be displayed as subscripts for typographical reasons. Subscripts are usually displayed smaller and lower.
<sup> Defines inline text that should be displayed as superscripts for typographical reasons. Superscripts usually appear smaller and higher.
<time> Indicates a specific time period. The datetime attribute may be included to convert the date to a machine-readable format for better search engine results or custom features (such as reminders).
<u> Represents an inline text field that needs to be marked as non textual. By default, it is rendered as a solid underline, but can be replaced with CSS.
<var> Represents the name of a variable in a mathematical expression or programming context. Although this behavior is browser dependent, it is usually displayed in italics of the current font.
<wbr> A position in a text where the browser can choose to wrap lines, although its wrapping rules may not wrap lines here.

Pictures and multimedia

HTML supports various multimedia resources, such as images, audio, and video.

element describe
<area> Define a clickable area on the picture. Image mapping (image map) allows the geometric area on the image to match Hyperlink relation.
<audio> Used to embed audio content in a document. It can contain one or more audio resources that can be used src Attribute or source element: the browser will select the most appropriate one to use. You can also use MediaStream Use this element for streaming media.
<img> Embeds an image into a document.
<map> And <area> Elements to define an image map (clickable link area).
<track> It is used as a media element -- a sub element of audio and video. It allows specifying temporal text tracks (or time-based data), such as automatically processing subtitles. The track format is WebVTT format .vtt Format file) -- Web video text track format.
<video> It is used to embed a media player in a document and support video playback within the document. You can also <video> Tags are used for audio content, but audio elements may be more appropriate for the user experience.

Embedded content

In addition to conventional multimedia content, HTML can include a variety of other content, even if it is not easy to interact.

element describe
<embed> Embeds external content at the specified location in the document. This content is provided by external applications or other interactive content sources, such as browser plug-ins.
<iframe> Represents nested Browse Context It can embed another HTML page into the current page.
<object> Indicates the introduction of an external resource, which may be an image, an embedded browsing context, or a resource used by a plug-in.
<picture> By containing zero or more <source> Element and a <img> Element to provide image versions for different display/device scenes.
<portal> (en-US) Allows another HTML page to be embedded in the current page for smoother navigation to the new page.
<source> Specify multiple media resources for the picture, audio, or video element. This is an empty element, which means it has no content and no enclosing tag. It is usually used to provide the same media content in multiple formats to provide compatibility between different browsers, because browsers support different image files and media file formats.

SVG and MathML

You can use <svg> or <math> take SVG or MathML The content is embedded directly into the HTML document.

element describe
<svg> Define a new coordinate system and Viewport Container for. It is used as the outermost element of an SVG document, but can also be used to embed SVG fragments in an SVG or HTML document.
<math> The top-level MathML element. Every valid MathML instance must be encapsulated in it. In addition, you cannot nest a second in another such element <math> Element, but it can contain any other child elements.

script

To create dynamic content and Web applications, HTML supports the use of scripting languages, most notably JavaScript. There are specific elements to support this feature.

element describe
<canvas> Used to pass through canvas scripting API or WebGL API Container elements for drawing graphics and graphic animation.
<noscript> Define the alternative content when the script is not executed (the script type of the page is not supported, or the current browser has closed the script).
<script> Used to embed executable scripts or data. This is often used to embed or reference JavaScript code. <script> Elements can also be used in other languages, such as WebGL GLSL shader language and JSON

Edit ID

These elements can indicate the part of a text that has been changed.

element describe
<del> Represents some text content that has been deleted from the document. For example, you can use this tag when you need to display modification records or source code differences. <ins> Labels are just the opposite: they represent the text added to the document.
<ins> Represents some text content added to the document. You can use <del> Element to similarly represent text that has been removed from the document.

Table contents

The elements here are used to create and process table data.

element describe
<caption> Specifies the title of the table.
<col> Defines the columns in the table and is used to define the common semantics on all common cells. It is usually located in <colgroup> Element.
<colgroup> Defines a set of lists in a table.
<table> Represent tabular data - that is, information represented by a two-dimensional (consisting of rows and columns) data table.
<tbody> Rows that encapsulate a series of tables( <tr> Element), representing that they are tables( <table> )The components of the main content.
<td> (en-US) A table cell containing data is defined. It is Tabular model (table model).
<tfoot> Defines a summary row for each column in a set of tables.
<th> Define the header cells in the table. This part is characterized by scope and headers Property is precisely defined.
<thead> Defines a set of rows that define the column headers of a table.
<tr> Define rows in the table. The same line can appear at the same time <td> (en-US) (data cells) and <th> (column header cell) element.

form

HTML provides many elements that can be used together to create a form that users can fill out and submit to a website or application. For details, see HTML Form Guide

element describe
<button> An interactive element (which can be activated by the user's mouse, keyboard, fingers, voice commands, or other assistive technologies). Once activated, it will perform an action, such as submit form Or open a dialog box.
<datalist> Contains a set of <option> Elements that represent optional values for other form controls.
<fieldset> Used to control and label in web form( <label> )Group.
<form> Represents an area in a document that contains interactive controls for submitting information to a Web server.
<input> Use to create interactive controls for Web based forms that accept data from users. Depending on the device and user agent, forms can use various types of input data and controls. <input> Element is currently one of the most powerful and complex elements in HTML, because it has a large number of input types and attribute combinations.
<label> Represents the description of an element in the user interface.
<legend> Used to represent its parent element <fieldset> Content title of.
<meter> It is used to display the scalar value or fractional value of a known range.
<optgroup> by <select> Element to create a group.
<option> It is used to define the values in select <optgroup> or <datalist> The options contained in the element. <option> Menu items can be represented in pop-up windows and other item lists in HTML documents.
<output> Websites or applications can inject the results of calculations or user operations into container elements.
<progress> It is used to display the completion progress of a task. Normally, this element is displayed as a progress bar.
<select> Represents a control that provides an option menu.
<textarea> Represents a multi line plain text editing control. This is useful when you want users to enter a fairly long, free-form text, such as a comment or a comment in a feedback form.

Interactive Elements

HTML provides a series of elements to help create interactive user interface objects.

element describe
<details> To create a pendant, it will display the information contained only when it is switched to the "expanded" state. Must use <summary> The element provides a summary or label for the part.
<dialog> Represents a dialog box or other interactive component, such as a warning, inspector, or window that can be closed.
<summary> The summary, title, or legend used as the content of the details element. click <summary> The element will flip the parent element <details> The expanded and closed state of.

Web Components

Web component is a technology associated with HTML. In short, it allows developers to create custom elements and use them as normal HTML. In addition, you can also create customized standard HTML elements.

element describe
<slot> As Web Components As part of the technology suite, this element is a placeholder within the web component. You can fill it with your own tags, so that you can create separate DOM trees and present them together.
<template> A mechanism for saving HTML, which does not render immediately when the page is loaded, but can then be instantiated using JavaScript at run time.

Obsolete and deprecated elements

Warning: The following old HTML elements have been deprecated and should no longer be used. Never use them in new projects, and replace the remnants of old projects as soon as possible Listed here for reference only.

element describe
<acronym> Allows the author to explicitly declare a sequence of characters that form an acronym or abbreviation of a word.
<bgsound> Set an audio file to play in the background when using the page; Please use <audio> Replace.
<big> Renders its enclosed text in a font one size larger than the surrounding text (for example, medium change large )。 The maximum font size does not exceed the maximum font size allowed by the browser.
<center> Displays block level or inline content contained in an element in a horizontally centered fashion.
<content> Web Components Obsolete part of the technology suite - for Shadow DOM It is used internally as an insertion point and cannot be used for any normal HTML. Has now been <slot> Element instead, it creates a position in the DOM, where the Shadow DOM will insert it.
<dir> A container used as a directory for files and/or folders, and possibly styles and icons applied by user agents. Please do not use this outdated element; Please use the <ul> Element, including the file list.
<font> Defines the font size, color, and appearance of content.
<frame> Define a specific area where another HTML document can be displayed. The frame should be in <frameset> Used in.
<frameset> Used to include <frame> Element.
<image> <img> The element is an ancient and unsupported predecessor. It should not be used.
<marquee> Used to insert a scrolling text. You can use its properties to control what happens when the text reaches the edge of the container.
<menuitem> Represents a command that a user can execute through a pop-up menu. This includes context menus, as well as menus that may accompany buttons.
<nobr> Preventing text from being automatically split into new lines may result in users having to scroll horizontally to see all of the text.
<noembed> It is an abandoned and non-standard way to support <embed> Or does not support what the author wants Embedded content 's browser provides alternate (fallback) content. This element is abolished from HTML 4.01, and the backup content should be inserted in <object> Between the start and end tags of the.
<noframes> When support is not supported (or disabled) <frame> The content to display is provided in the browser of the element. Although most common browsers support frame, there are exceptions, including some special purpose browsers (mobile terminal browsers and text mode browsers).
<param> by <object> Element defines parameters.
<plaintext> Render anything behind the start tag as plain text, ignoring any subsequent HTML content. It has no closed label, because anything behind it will be treated as plain text.
<rb> The basic text component used to separate ruby annotations (that is, the text being annotated). One <rb> The element should wrap each individual atomic segment of the base text.
<rtc> Semantic annotation containing text, used in <rb> Element. <rb> Elements can have sounds( <rt> )And semantics( <rtc> )Notes.
<shadow> Web Components Obsolete part of the technology suite - intended to be used as a Shadow DOM insertion point. If you create multiple shadow roots under the shadow host, you may already use it.
<strike> Places horizontal strikethrough on text.
<tt> Create inline text and render using the user agent's default constant width font. This element is used to type text so that it can be displayed in equal width, like a telegraph, plain text screen, or line printer.
<xmp> Render the text between the start and end tags without interpreting the HTML content in the middle, and use a constant width font. The HTML2 specification suggests that it should be rendered wide enough to allow 80 characters per line.