Write catalog
Preface
Many interviewers will ask:
Talk about your understanding of HTML5 semantic tags.
Then this blog can help you understand HTML5 semantic tags.
One: What is a semantic element?
Semantic elements clearly describe their meaning to browsers and developers.
Examples of non-semantic elements: <div>and <span>-unable to provide information about its content.
Semantic Examples of elements: <form>, <table>and <img>clearly define its contents.
Two: Why is it semantic?
- Code structure : the page can show a good content structure without css
- Conducive to SEO : Crawlers rely on tags to determine the weight of keywords, so they can establish good communication with search engines and help crawlers to capture more effective information
- Improve user experience : For example, title and alt can be used to explain the name or explain the picture information, as well as the flexible use of label tags.
- Facilitate team development and maintenance : Semanticization makes the code more readable, allowing other developers to better understand your html structure and reduce differentiation.
- Convenient for other devices to parse : such as screen readers, blind readers, mobile devices, etc., to render web pages in a meaningful way.
Three: Commonly used semantic elements
HTML5 provides new semantic elements to define different parts of a web page, they are called "slice elements", as shown in the figure
Four: document structure tag
HTML tag list (sort by function) | Novice Tutorial https://www.runoob.com/tags/ref-byfunc.html