Semantic tags of HTML5 new features and semantics of html5 New Features
New HTML5 features
Simple DOCTYPE:
HTML5 has only one simple document type：<!DOCTYPE html>, Indicating that the browser will parse according to the standard mode.
Simple and easy-to-remember encoding type
You can now use "charset" in the meta tag ":<meta charset=”utf-8″ />
No type is required for scripts and links
<link rel="stylesheet" href="path/to/stylesheet.css" /><script src="path/to/script.js"></script>
Add more semantic tags
For example: <article>, <section>, <aside>,
Video and audio
<video width="640" height="320" preload="auto" poster="0.jpg" controls> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag.</video>
Form Enhancement
New input types: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, and url
New Attributes: required, autofocus, pattern, list, autocomplete, and placeholder
New elements: <keygen>, <datalist>, <output>, <meter>, and <progress>
Canvas labels draw 2D images.
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.beginPath();context.moveTo(100,100);context.lineTo(300,300);context.lineTo(100,500);context.lineWidth = 5;context.strokeStyle = "red";context.stroke();
Geographic location acquisition
HTML Semantics
1. What is HTML semantics?
You can use tags to determine the content semantics. For example, you can use the h1 tag to determine that the content is the title, <p> to determine that the content is a paragraph, and <input> the tag is an input box.
2. Why semantics?
1). Clear structure of the page when the style is removed or lost
2). facilitate the analysis of other devices (such as screen readers, blind readers, and mobile devices) to render webpages in a meaningful way.
3). conducive to SEO
4). Facilitates team development and maintenance, and complies with W3C standards to reduce differentiation
3. How to determine whether your tag has good semantics?
Remove the style and check whether the webpage structure is well organized and readable.
4. common semantic tag modules
Form
<Form action = "" method = ""> <fieldset style = "border: none"> <legend style = "display: none "> logon form </legend> <p> <label for =" name "> account: </label> <input type = "text" id = "name"> </p> <label for = "pw"> password: </label> <input type = "password" id = "pw"> </p> <input type = "submit" name = "Logon" class = "subBtn"> </fieldset> </form>
The form field must be wrapped with the fieldset label and the legend label to describe the purpose of the form. The label must be used for the plain text corresponding to each input label, and the id attribute must be set for the input, set for = someld In the lable label to associate the plain text with the corresponding input.
5. Notes for semantic tags
Use as few divs and spans as possible;
When the semantics is unclear, when div or p can be used, try to use p, because p has upper and lower spacing by default, which is advantageous for compatibility with special terminals;
Do not use pure style labels, such as B, font, and u. Use css instead.
The text to be emphasized can be contained in strong or em tags. The default strong style is bold (B is not used), and em is italic (I is not used)
Summary
The above is a semantic tag of the HTML5 new features introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
