HTML from getting started to selling computers (i)

The recent start of HTML learning, including syntax and labels of all kinds, is not much of a challenge, thanks to the semantics of HTML. Of course, semantics are not only friendly to developers, allowing developers to easily read and write more elegant and concise code, but also allows browsers and search engines to parse the site well, allowing crawlers to capture more effective information. This is what the front-end developers have been looking for, so we must introduce a very important concept-semantics!

　　

What is the semantics of HTML?

Semantics refers to the structure of content (content semantics), the selection of appropriate tags (code semantics), so that developers read and write more elegant code, while the browser crawler and machine very good parsing.

Why semantic?

• In favor of SEO, help crawlers crawl more effective information, crawler is dependent on the label to determine the context and the weight of the individual keywords.

• Semantic HTML can also present a good structure of content and code without CSS.

• Facilitate the resolution of other devices

• Facilitates team development and maintenance

Easy to confuse HTML tags

• I label

The HTML <i&gt; Element represents a range of text is set off from the normal text for some reason, for example, technical terms, for Eign language phrases, or fictional character thoughts. It is typically displayed in italic type.

I label effects, I tags usually represent text that differs for some reason from normal text, such as professional terminology, foreign language phrases, or typography. It is usually shown in italics.

This also solves the problem that we mentioned earlier that "why font-awesome such fonts are labeled with I".

• EM tag

The HTML element emphasis <em&gt; Marks text that has stress emphasis. The <em&gt; Element can is nested, with each of the level of nesting indicating a greater degree of emphasis.

Em tag effect. EM represents the underlined text. Visually, it's also an oblique effect.

• Strong label

The HTML strong Element (<strong&gt;) gives text strong importance, and is typically displayed in bold.

Strong label effect. Presented in bold form. The importance of this text is expressed in HTML4, which is described in HTML5 as "strong importance for its contents"

• B Label

The HTML <b&gt; Element represents a span of text stylistically different from normal text, without conveying any special importance or re Levance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical Presentati On would is boldfaced. Another example of it use are to mark the leads sentence of each paragraph of a article.

b label effect. The text style expressed differs from normal text and does not express any special importance and relevance. Typically used for keyword review, the product name in the review or other text that needs to be shown in bold. Another example is the lead sentence that marks each paragraph.

Before HTML4, the B element was meant to make the text bold, and after HTML4 the style information was deprecated, so the meaning of the B element has changed.
Do not use the B tag to mark the title, use the To convey more semantic information, you can add a class attribute to the B element, such as B class = "lead" to mark the first sentence of each paragraph.
If there is no semantic purpose, it is better to use the Font-weight:bold of CSS properties to make the text bold.

• Mark

The HTML Mark Element (<mark>) represents highlighted text, i.e., a run of text marked for reference purpose, due to Its relevance in a particular context. For example it can is used in a page showing search results to highlight every instance of the Searched-for word.

<mark> is displayed as highlighted text. For example, when we look for keywords on a Web page, the results we find are displayed in a highlighted form.
Instead of using the mark element for syntax highlighting, use the SPAN element.
The mark element is typically a related text that spans across different contexts.

HTML5 New Tags

• Section

Represents an area (or section) in a document, such as a theme group in the content, which generally contains a title (heading). It is common to identify each <section> by including a caption (

• artical

The <article> element represents an independent structure in a document, page, app, or Web site intended to be a separate or reusable structure, such as a forum post, magazine or news article, blog, user-submitted comment, interactive component, or other independent content item in a publication.

Difference between the different labels em vs I

Although the EM tag is also shown in italics, it cannot be said that the I tag is used instead of the EM label as an effect. Because the meaning of the two representations is different.
Let me give you an example. Em tag: Just do it already!
When a person or a software reads this sentence, it reads the word "Do" in a tone that emphasizes emphasis.
For I tags: the word the is an article. So in this sentence italic does not emphasize the tone. Just to show that the word is a article, not our usual.

EM vs Strong

In HTML4, strong generally refers to stronger emphasis. The importance of content is expressed in HTML5 strong. EM is used to change the meaning of a sentence, such as "I love carrots" vs "I love carrots". And strong is often used to add importance to some sentences. For example, "warning! This is very dangerous"

Strong vs B

Strong and B are the most similar two elements. Then the difference between the two. Strong represents a logical state, while bold represents a physical state. The logical state is separated from the content and presented in a variety of different forms, and you might want to mark it as red or underline or something else, so changing the properties of the strong is more meaningful than changing the bold's properties. Because the bold is only making bold, it does not make any difference in emphasis.

HTML from getting started to selling computers (i)