HTML5 tags that front-end developers have to understand

HTML5 elements can be presented in a variety of dimensions, including the following:

• Classification by use
• Classification by category
• Depending on whether or not a Block element

According to use:

The Metadata Metadata

base; link; meta; noscript; script; style; template; title

Flow content

a; abbr; address; article; aside; audio; b; bdi; bdo; blockquote; br; button; canvas; cite; code; data; datalist; del; details; dfn; dialog; div; dl; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6; header; hgroup; hr; i; iframe; img; input; ins; kbd; label; map; mark; MathML math; menu; meter; nav; noscript; object; ol; output; p; picture; pre; progress; q; ruby; s; samp; script; section; select; slot; small; span; strong; sub; sup; SVG svg; table; template; textarea; time; u; ul; var; video; wbr; autonomous custom elements; Text

chapter

article; aside; nav; section

blockquote; body; details; dialog; fieldset; figure; td

The title

h1; h2; h3; h4; h5; h6; hgroup

Phrasing content

a; abbr; audio; b; bdi; bdo; br; button; canvas; cite; code; data; datalist; del; dfn; em; embed; i; iframe; img; input; ins; kbd; label; map; mark; MathML math; meter; noscript; object; output; picture; progress; q; ruby; s; samp; script; select; slot; small; span; strong; sub; sup; SVG svg; template; textarea; time; u; var; video; wbr; Custom components in the framework;

The embedded

audio; canvas; embed; iframe; img; MathML math; object; picture; SVG svg; video

The user interaction

button; details; embed; iframe; label; select; textarea

The form elements

button; fieldset; input; label; object; output; select; textarea; img

By category:

The root element

• HTML represents the root of an HTML or XHTML document. All other elements must be children of this element.

Document metadata

• Head represents a collection of metadata about a document, including links or content to a script or stylesheet.
• Title defines the title of the document, which will appear on the title bar or TAB page of the browser. This element can only contain text, and the contained tags are not interpreted.
• Base Defines the base URL relative to the URL on the page.
• Link is used to link external CSS to the document.
• Meta defines metadata that cannot be described by other HTML elements.
• Style is used for inline CSS.

The script

• Script Defines an inline script or link to an external script. The scripting language is JavaScript.
• Noscript defines alternative text to display when a script is not supported by the browser.
• The template element adds a container to HTML5 that instantiates content at run time through JavaScript.

chapter

• Body represents the content of an HTML document. There can only be one element in a document.
• The section element adds a section to the definition document in HTML5.
• The nav element adds a section in HTML5 that defines only navigation links.
• The article element adds to HTML5 a complete stand-alone piece of content that can be defined independently of the rest of the content.
• Aside is an aside element that puts definitions in HTML5 that are less relevant to the content of the page — if removed, the rest of the content still makes sense.
• The H1 to H6 title elements implement six layers of document headings, with H1 being the largest title and H6 the smallest. The title element briefly describes the topic of the chapter.
• The header element adds a header in HTML5 that defines a page or chapter. It often contains logos, page titles, and a navigational table of contents
• The footer element adds the end of a page or chapter definition to HTML5. It often contains copyright information, links to legal information, and addresses for feedback suggestions.
• Address defines a section that contains contact information.
• The main element adds the main or important content of the definition document to HTML5.

Content organization

• P Defines a paragraph.
• Hr stands for the separator between paragraphs in a chapter, article, or other long content.
• Pre means that the content has been pre-formatted and the format should remain.
• Blockquote represents content that is referenced from another source.
• Ol defines an ordered list.
• Ul defines an unordered list.
• Li defines a list item in a list.
• Dl defines a list of definitions (a list of terms and their definitions).
• Dt stands for one by the next
  Defined terms.
• Dd stands for the definition of the term that comes before it.
• The figure element represents a document-related legend in HTML5.
• Figcaption This element adds a caption representing a legend to HTML5.
• Div represents a generic container with no special meaning.

Text display

• A represents a hyperlink to another resource.
• Em stands for emphasis on words.
• Strong stands for particularly important text.
• Small stands for comments, such as disclaimers, copyright notices, etc., that are not important to understanding the document.
• S stands for inaccurate or irrelevant content.
• Cite stands for title of work.
• Q stands for inline reference.
• DFN represents a definition of a term contained in its most recent ancestor content.
• Abbr stands for ellipsis or abbreviation, the full content of which is in the title attribute.
• The data element adds a machine-readable equivalent to the CONTENT associated with it in HTML5 (this element is only in the WHATWG version of HTML, not in the W3C version of HTML5).
• The time element adds a date and time value to HTML5; The machine-readable equivalent is specified through the datetime attribute.
• Code stands for computer code.
• Var represents a variable in the code.
• Samp stands for the output of a program or computer.
• KBD stands for user input, generally output from the keyboard, but can also stand for other inputs, such as voice input.
• Sub and * sup represent subscripts and superscripts respectively.
• I represents a paragraph of text of a different nature, such as technical terms, foreign phrases, etc.
• B is for a paragraph that needs attention.
• U represents a text comment that needs to be underlined, for example, to highlight misspelled text.
• The mark element is added to HTML5 to represent a quote that needs to be highlighted.
• The Ruby element adds text to HTML5 that represents ruby annotations, such as the Chinese character and its pinyin.
• Rt is an element that represents Ruby annotations in HTML5, such as Chinese pinyin.
• The rp element adds extra text to HTML5 that represents both sides of Ruby comments to provide friendly annotation display in browsers that do not support Ruby comment display.
• Bdi is the element that adds a piece of text in HTML5 that represents the direction of the text that needs to depart from the parent element. It allows you to embed a piece of text with a different or unknown text orientation format.
• Bdo specifies the text orientation of the child element, explicitly overriding the default text orientation.
• Span represents a piece of text that has no special meaning and can be used when other semantic elements do not fit the text.
• Br stands for line break.
• The WBR element is added to HTML5 to represent Word Break Opportunity, where a line Break will be added when the text is too long for a line Break.

Copy editor

• Ins defines the content added to a document.
• Del defines what is removed from the document.

Pictures and other resources display

• Img stands for an image.
• Iframe represents an inline frame.
• Embed This embed element adds to HTML5 an external resource that represents an embed, such as an application or interactive content.
• Object represents an external resource, such as an image, AN HTML subdocument, a plug-in, and so on.
• Param represents the plug-in parameter specified by the * object element.
• The video element adds to HTML5 a representation of a video, its video files and subtitles, and provides a user interface for playing the video.
• The element audio is added to HTML5 to represent a sound, or audio stream.
• The source element is added to HTML5 to specify the media source for media elements such as * video or * audio.
• The track element is added to HTML5 to specify text tracks (subtitles) for media elements like * video or * audio.
• Canvas element is added to represent bitmap area in HTML5, on which graphics, such as charts and game drawings, can be presented in real time through scripts.
• Together with the * area element, map defines the area of the image map.
• The area element and the * map element define the image map area.
• The SVG element adds the definition of an embedded vector image in HTML5.
• The math element adds the definition of a mathematical formula in HTML5.

form

• Table defines multidimensional data.
• Caption Represents the table’s title.
• Colgroup represents a set of single or multiple columns in a table.
• Col represents the columns in the table.
• Tbody represents a specific piece of data in the table (the body of the table).
• Thead represents a column label (table header) in the table.
• Tfoot represents a column summary (table tail) in the table.
• Tr represents rows in the table.
• Td represents the cells in the table.
• Th represents the header cell in the table.

The form

• Form represents a form and consists of controls.
• Fieldset represents a control group.
• Legend stands for the title of the * FieldSet control group.
• Label represents the title of the form control.
• Input represents data areas (text boxes, checkboxes, checkboxes, and so on) that allow users to edit data.
• Button stands for button.
• Select represents the drop-down box.
• The datalist element adds a predefined set of options in HTML5 that represent the options available to other controls.
• Optgroup represents an option group.
• Option represents an option in either a * select element or a * datalist element
• Textarea stands for multi-line text box.
• The keygen element is added to HTML5 to represent a key pair generator control.
• The output element is added to HTML5 to represent the calculated value.
• The progress element represents a progress bar in HTML5.
• The meter element represents a slider in HTML5.

Interactive elements such as navigation

• The Details element adds a widget in HTML5 that represents a user that can (click) to get additional information or control.

• The summary element adds a summary or title in HTML5 that represents the * details element.

• The menuitem element adds a menuitem in HTML5 that represents a click by the user.

• The menu element is added to HTML5 to represent menus.

According to whether the Block element is divided into:

1.Empty Elements

• The area and map elements define the area of the image map.
• Base Defines the base URL relative to the URL on the page.
• Basefont 4.0 tags, now obsolete
• Br stands for line break.
• Col represents the columns in the table.
• Frame 4.0 label, obsolete
• Hr stands for the separator between paragraphs in a chapter, article, or other long content.
• Img stands for an image.
• Input represents data areas (text boxes, checkboxes, checkboxes, and so on) that allow users to edit data.
• The isIndex 4.0 label is deprecated
• Link is used to link external CSS to the document.
• Meta defines metadata that cannot be described by other HTML elements.
• Param represents the plug-in parameters specified by the object element
• Embed represents an embedded external resource, such as an application or interactive content

2.Block Elements

• Address defines a section that contains contact information
• Applet 4.0 labels, obsolete
• Blockquote represents content that is referenced from another source.
• Button stands for button
• Center 4.0 labels are obsolete
• Dd stands for the definition of the term that comes before it
• Del defines what is removed from the document.
• Dir 4.0 label, deprecated
• Div represents a generic container with no special meaning
• Dl defines a list of definitions (a list of terms and their definitions)
• Dt stands for a term defined by the next DD
• Fieldset represents a control group
• Form represents a form and consists of controls
• Frameset 4.0 tags, now obsolete
• Hr stands for the separator between paragraphs in a chapter, article, or other long content
• Iframe represents an inline frame
• Ins defines the content added to a document
• The isIndex 4.0 label is deprecated
• Li defines a list item in a list
• The map and area elements together define the area of the image map
• Menu stands for menu
• noframes
• Noscript defines alternative text to display when a script is not supported by the browser
• Object represents an external resource, such as an image, AN HTML subdocument, a plug-in, and so on
• Ol defines an ordered list
• P Defines a paragraph
• Pre means that the content has been pre-formatted and the format should remain
• Script Defines an inline script or link to an external script. The scripting language is JavaScript
• Table defines multidimensional data
• Tbody represents a specific piece of data in the table (the body of the table)
• Td represents the cells in the table
• Tfoot represents a column summary in the table (table tail)
• Th represents the header cell in the table
• Thead represents a column label in the table (table header)
• Tr represents rows in the table
• Ul defines an unordered list

3.Inline Elements

• A represents a hyperlink to another resource
• Abbr stands for ellipsis or abbreviation, the full content of which is in the title attribute
• Acronym 4.0 tags, now obsolete
• Applet 4.0 labels, obsolete
• B is for a paragraph that needs attention
• Basefont 4.0 tags, now obsolete
• Bdo specifies the text orientation of the child element, explicitly overriding the default text orientation
• Big 4.0 tags, now obsolete
• Br stands for line break
• Button stands for button
• Cite stands for title of work
• Code stands for computer code
• Del defines what is removed from the document
• DFN represents a definition of a term contained in its most recent ancestor content
• Em stands for emphasis on words
• Font 4.0 is used
• I represents a paragraph of text of a different nature, such as technical terms, foreign phrases, etc
• Iframe represents an inline frame
• Img stands for an image
• Input represents data areas (text boxes, checkboxes, checkboxes, and so on) that allow users to edit data
• Ins defines the content added to a document
• KBD 4.0 label, now obsolete
• Label represents the title of the form control
• The map and area elements together define the area of the image map
• Object represents an external resource, such as an image, AN HTML subdocument, a plug-in, and so on
• Q stands for inline reference
• S stands for inaccurate or irrelevant content
• Samp stands for the output of a program or computer
• Script Defines an inline script or link to an external script. The default scripting language is JavaScript
• Select represents the drop-down box
• Small stands for comments, such as disclaimers, copyright notices, etc., that are not important to understanding the document
• Span represents a piece of text that has no special meaning and can be used when other semantic elements do not fit the text
• Strike 4.0 tag, now deprecated
• Strong stands for particularly important text
• Sub stands for subscript
• Sup stands for superscript
• Textarea stands for multi-line text box
• Tt 4.0 label, now obsolete
• U 4.0 labels, now obsolete
• Var represents a variable in the code

reference

• MDN web docs!