“This is the 20th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

One, foreword

This article mainly introduces the semantic knowledge of HTML related to CSS.

Choose more consistent with semantic HTML tags, can make the site in all aspects of the effect is improved;

Two, what is HTML

  • HTML: HyperText Markup Language;
  • HTML is a standard markup language for creating web pages (markup language: used to tag “trees”)

Third, summary of HTML common tags

1. HTML4 Summary of common tags

  • Basic documentation: HTML, head, body… ;
  • Basic tags: H1 ~ H6, P, BR, HR… ;
  • Text formatting: strong, B, em, I, small, strong, del, sub, sup… ;
  • Link: a, link;
  • Block: div, SPAN;
  • Images: IMG, map, area;
  • List: UL, LI; Ol, li; Dl, DT, DD;
  • Table: Caption, TH, TR, TD, Thead, Tbody, tfoot;
  • Forms: Form, input, Select Option, Textarea, button, label;
  • Framework: iframe;
  • Entities: <, >, ©,  … ;

2. Summary of commonly used HTML5 tags

  • New graphic element: Canvas;
  • New multimedia elements: Audio, Video, Source, Embed, track;
  • New form elements: deatalist, KeyGen, Output;
  • New semantic and structural elements: Article, Aside, Bdi, Command, Details, Dialog, Summary, Figure, Figcaption, Footer, Header, Mark, meter, nav, Progress, Ruby, RT, RP, Sect Ion, time, WBR;

Four, what is semantic

  • Structuring of text content (semantematization of content);
  • Use more semantically appropriate tags (code semantization);
  • Easy collaboration among developers: read, maintain, and write more elegant code;
  • At the same time, let the browser crawler, other assistive technology can better parse;

In a word: Do the right thing with the right label;

Example: The 'strong' and 'B' labels are bold and have the same style effect; However, the use of bold is strong. That's what semantics are for, choosing the right tags;Copy the code

Fifth, the benefits of semantics

Using semantically appropriate HTML tags to give your page structure and meaning can improve the following:

  • accessibility

It can help assistive technology to better read and translate web pages, which is conducive to barrier-free reading;

  • Can be retrieval

Good code structure and semantics, conducive to SEO optimization, can improve the effective search engine crawl, improve site traffic;

  • internationalization

Using semantic tags makes it easier for developers from all over the world to understand the structure of a web page;

  • Team collaboration

Reduce the difference of web development, so that other developers quickly understand the structure of the web page, easy to website development, maintenance efficiency;

Semantic benefits: 1, conducive to SEO optimization; 2, in the case of style loss, can better render the page effect; 3. Better support all kinds of terminals, such as barrier-free reading and audio novels; 4. The team follows W3C unified development standards, effectively reduces coding differences and improves team collaboration efficiency; Case: There is little difference between div and H1 tags for website logo, but H1 tags are more recommended.Copy the code

Six, the end

This article briefly introduces HTML tags and the benefits of using semantics; In the next article, I will continue to introduce HTML document declaration, meta meta information, Entity, etc.Copy the code