Share Html tips: Semantize your code

This article shares Html skills: SemanticizationYour code

Html semantics seems to be a commonplace issue. If you search Google, there are a lot of articles about semantics. Why do we need semantic tags? I think this way: Each tag of Html has its specific meaning, and semantics allows us to use appropriate tags at the appropriate locations to better communicate with people. The machine (the machine can be understood as the browser and the search index engine) is all clear at a glance. If my explanation is not clear enough, please Google. How to use the right tags at the right place? This is a simple understanding logic. For example, h1~h6 tags are for title classes; ul is for unordered lists; ol is for There are lists; dl is used to define the list; em and strong tags are used for emphasis... To put it bluntly, each of the Html tags An English definition determines its semantics (later in this article, I will put a comparison table of English definitions of commonly used Html tags for reference). What is clear to both humans and machines? Check whether the Html page is semantic The best way to optimize is to remove the Css link of the page to see if the web page structure is in order and the page is still very readable. Why can you say this? Everyone knows that browsers There is a default style (it is recommended to use Chrome's Web Developer Tools for Chrome plug-in, or Firefox's Web Developer plug-in), such as h1~h6, there will be bold/font size decreasing in sequence The default styles of small, top and bottom margins, ul, ol, and dl all have default bullets, and strong has a bold style by default... Therefore, on the same page, Html with good semantics can be removed without the page CSS. Still performing well. Another point is that good semantic coding is more friendly to search engines. Search spiders do not know your Css, but they can recognize Html tags.The following is a simple Example:

	Mr.Think的博客
	专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.
	Mr.Think的博客
	专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.

Through the above simple example and the rendering without any Css definition, it’s time to understand the difference between the two. If you are learning Html5, its header, footer, sidebar, article and other elements are new semantic tags. Html coding semantics is a step towards high-quality front-end development. It means better following Web standards, and it can also keep your pages in order after removing styles. More detailed Introduction## about semantics #, you can Google or read Chapter 3 of Adang's "The Way of Cultivation in Web Front-end Development". Attachment: Chinese and English comparison table of tag semantics (Delete the lines for tags that are not supported by HTML5)

##Tag nameFull spelling in EnglishChinese translationaanchoranchorabbrabbreviationAbbreviationacronymacronymAcronym that takes the first letter addressaddressAddressbboldboldbigbigget biggerblockquoteblock quotationblockbrlinebreakcaptioncaptionTitlecentercentercenterdddefinition descriptionDefinition descriptiondelDeleteppisionDelimited##dllistdtem##fieldsetfieldset##fontheader1~header6##hrhorizontal ruleLeveliitalicitalicinsinsertedinsertlegendlegendiconli list itemList itemol##ordered listparagraphPredefined formatStrikethroughallsmallRangeaggravatedTable below##supscriptedSuperscriptVariable

		Quoteat
	break
	delete
definition	Definition list
definition term	Definition term
emphasized	emphasized
fieldset
fontfont		h1~h6
Header 1~Header 6
Sorted list	p	paragraph
	pre	preformatted
	s	strikethrough
	sm
Get smaller	span	span
	strong	strong
	sub	subscripted
		super
	## uunderlined	Underline
ul	unordered list	Unordered list
var	variable

The above is the detailed content of Share Html tips: Semantize your code. For more information, please follow other related articles on the PHP Chinese website!