Introduction to web semantics and web Semantics

Introduction to web semantics and web Semantics
What is web semantics?

When the HTML5 standard came out, I was surprised why I had to define So Many Headers footer nav article standards. DIV is not good, so it is easy for developers to remember. However, after the page is developed, all the pages with DIV labels will be confused, where is the page header and the body. Of course we can open it in a browser. F12 will be clear at a glance, but if it is a web crawler, it will not be so easy to identify this thing.

By referencing the definition of wiki, semantics is a special term in front-end development. Its advantage is that tag semantics helps to build a good html structure and facilitate indexing and capturing by search engines. In addition, it also facilitates display of pages on different devices as much as possible. In addition, it helps to build clear organizations and facilitate team development and maintenance.

In general, the structure of HTML is clear. p labels are used for paragraphs. footer labels are used for footers instead of DIV.

Why make web semantic

In fact, the definition of wiki is very clear. Three Benefits of Semantics

What to do

A typical case is that beginners of word often use spaces to indent and press enter to fill the pages. This layout will be messy when the page layout changes. Therefore, we need to use the indentation of the word itself and the page feed function to truly tell the computer the true intention of the layout, so as to make the layout more adaptive. HTML is not a binary file, which leads to greater randomness during compilation. We need to pay attention to semantic tags frequently used and memorized.

• H1 ~ H6 Planning

An article should have only one general title:h1Each of my blog posts is structured in this way. Then, based on the specific content of the article, there will be severalh2And nestedh3So far, the title below h4 is not used in my blog.

• P

Every paragraph should be usedpBy default, p has certain indentation and line spacing. If you do not want this layout, you should write CSS to control it.

• Ul, ol, li (Unordered list, Ordered list, List item)

liMust be inulOrolThis semantic tag should be used when we only list some data but cannot reach the semantic meaning of points, or in the News list of some news websites, for example, what you are currently reading is.

• Dl, dt, dd (description list, description list term, description list description)

This indicates a hierarchical progressive list with descriptions.dlList with description,dtThe title of the list,ddThe description of the list is as follows:

<Dl> <dt> Chinese cities </dt> <dd> Beijing </dd> <dd> Shanghai </dd> <dd> Guangzhou </dd> <dt> USA city </dt> <dd> Washington </dd> <dd> Chicago </dd> <dd> New York </dd> </dl>

:

• Em, strong

Because I use the markdown syntax to write blogs, these two labels are even more used by the syntax first.Test italic em Test enhanced strong

• Header, nav, article, section, aside, footer

This is very important for the semantic nature of detailed content pages. Here, a picture is referenced to describe the semantics of each tag.

• Th, tbody

The table header and duplicate list content. Normal tables should distinguish between the table header and table body content. The header is bold and centered by default.

• Address

Indicates a contact method, which allows crawlers to quickly find your contact method. Of course, the office address may be more practical.

    <address>    Written by p2227<br />    contact me : kuangqiyi(At)gmail.com <br />    Address: searching the next bussiness address<br />    </address>

• Dfn, code, samp, kbd, var, cite

These elements and em and strong are both called phrase elements. Their meanings are as follows:

Tag	Semantics
em	The highlighted text.
strong	Define important texts.
dfn	Define a project.
code	Define the computer code text.
samp	Define sample text.
kbd	Define the keyboard text. It indicates that the text is typed from the keyboard. It is often used in computer-related documents or manuals.
var	Define variables. You can use this label with the <pre> and <code> labels.
cite	Define references. You can use this label to define references, such as titles of books or magazines.

My list is limited. I need to remember it in detail. The specific implementation should also work out a standard based on the specific project team, and then strictly implement the standards so that they can be truly implemented.