This is the 15th day of my participation in the August Text Challenge.More challenges in August

What is HTML5?

Generally speaking, HTML5 in a broad sense, contains HTML, CSS and JavaScript three parts, not only HTML part, CSS3 and JavaScript also have a lot of innovation, let the whole web program function more colorful.

Semantic tag

Semantic elements clearly describe their meaning to the browser and the developer.

Examples of non-semantic elements: div and SPAN – cannot provide information about their content.

Examples of semantic elements: form, table, and IMg-clearly define their contents.

The use of semantic tags

Semantic networks allow computers to better understand the content of web pages, which can be of great help for things like search engine optimization (SEO) or recommendation systems.

H5 Added semantic labels
  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • main
  • mark
  • nav
  • section
  • summary
  • time
How to use semantic tags
header

A web page can contain multiple header elements. According to HTML5, headers should contain a certain level of header, so you should include the header either implicitly or explicitly, usually setting the unwanted header to display: None; , on the one hand to comply with the specification, on the other hand to provide accessibility without affecting the page design. Other elements may also be included, such as logos, search boxes, author names, and so on.

footer

The standard states that footer tags can only contain text or link information such as copyright, source information, legal restrictions, and so on. If you want to include something else in the footer, you can use the familiar div to help. The author information in the footer element should be included in the Address element.

nav

The navigation bar uses nav, usually only in the main navigation section of a page, common examples of which are menus, tables of contents, and indexes.

section

A separate part contained in an HTML document, which has no more specific semantic elements and generally contains a heading. A section tag is a block of content suitable for markup: a small block of content that is displayed alongside the body of the page, except that search result lists and map displays and their controls have no specific elements and can be placed in sections.

If the contents of a section element can be published separately on multiple media, use article instead of section.

article

Independent structure in the site. Independently assignable or reusable structures could be forum posts, magazine or news articles, blogs, user-submitted comments, interactive components

Each article usually includes a title (h1-H6 elements) as a child of the article element.

aside

MDN: Usually in the form of a sidebar or tag box, it can be split out individually without affecting the whole.

W3c: Aside elements for something other than the main content of the page (such as a sidebar). Aside should be related to the surrounding content.

I’m a little confused up there

mark

I don’t know…

Define important or emphatic text.

When used in reference, it is usually used to display meaningful text but is not marked in the raw material. Or material used to show special scrutiny, even if the original author did not consider it particularly important.

In addition, the MARK element is used to display a portion of the document content related to the user’s current activity. For example, it might be used to display matching words in search results.

Do not use the mark element for syntax highlighting; You should do this with strong elements combined with appropriate CSS (syntax highlighting).

time

Define the date/time. This element is intended to represent the date and time in a machine-readable format. Apps with scheduling features can take advantage of this.

figure & figcaption

The figure element represents a single piece of content and is often used with a caption

Figure is usually a picture, illustration, table, code snippet, etc. referenced in the main text, which will not affect the main text when it is transferred to the appendix or other pages

Figure Caption is the first or the last one in the figure block

details & summary

It displays the information contained only when it is switched to the expanded state. The Summary element provides a summary or label for the widget.

The summary element is used as a summary, title, or legend of the content of a Details element.