Understanding of HTML Semantization II
In the blog Understanding of HTML SemantizationI,
I talked about the first reason why we should use semantization. Now I continue to discuss the following 2 reasons for using semantization and how we use it.
2. The code is more concise, of higher re-usability. By using appropriate tags, we will write much less css or js.
It is obvious that code is more concise. We can see the second code (in Understanding of HTML Semantization I
defined style, but the first one didn't.
Higher Re-usability: If the HTML structure are used in many places, then the first one is more frequently used. For example, the second code paragraph fixed 16 pixels bold, but the first one simply stated it is a h1, you do not rewrite, then use h1 style, if you rewrite h1, then use yours.
Write less css: this is stated in the first paragraph of the 2nd reason, and is not repeated here.
Write less js: this is worth of discussion. For example, see the following code:
<!-- 语义化的form -->
<input type="submit" />
<!-- 非语义化的form -->
In the non-semantic form code, tag "a" and "js" can achieve submission function. However, this kind of form needs to write more js code; secondly, the semantic form can be submitted by "Enter", but non-semantic ones with tag "a" can not be submitted by "Enter". Of course, you can write a lot of js to achieve perfect simulation, but what's the meaning of this?
3. Better Accessibility
This is mainly for the screen readers or some other browsers with poor understanding of CSS. Semantic HTML can be read by breaking away from CSS, but it is rather difficult to realize in non-semantization.
The last but not least, how to make your own codes semantic?
W3c validation cannot verify whether your code is semantic or not, and there is no tools to test if your code is semantic.
What does it mean? It means you can not solve the issue of semantic code using the way of learning a language.
On how to make your own code semantic, I think there is a feasible method.
Firstly, you need to command common tags, including the meanings of the tags. click here to see the reference tags
Secondly, when you write html, you need to think: if writing so can meet the semantic requirements.
Finally , search some big company's websites frequently (especially new stations), and open source project code; I know you will do it usually, but every time you see how to write css, or how to write js, please take a little time to see how they writte html, and think about why they write so.
In this way, I believe you HTML code semantization is getting better step by step.
In short , semantic HTML code is not a knowledge that can never be learned, but an issue of continuous improvement; it does not require you to spend a lot of effort learning it at one time, but need you to accumulate experiences every day to improve the skills.