A guest
 
 
Algorithmic language

Article 1 the comments






The article directories

  • Focus on content and structure
  • Default CSS for semantic tags
  • Modular, easy for team development and maintenance
  • Different tags, their content may have different attention
  • Semantic tags are more standardized, making machines more HTML-aware
  • Content weight differentiation, SEO will bring change

Semantic tags, as the name implies, are directly readable tags. When I first got into HTML5, I didn’t have a deep understanding of the semantics of HTML5. I was only interested in several new functions of Html, such as canvas. Html5 semantic tags, header, footer, nav, etc., these are essentially Div, in the HTML4 era, we used Div id=”header”,”footer”, we could do the same thing with header and footer, Why does HTML5 bother to separate out these divs as new tags?

Focus on content and structure

Before HTML5, DIV+CSS actually rendered a Web page pretty well. HTML5 is not only satisfied with how to show a web page, but more focused on the structure of the web page, more pragmatic attention to the content of the web page. We use divs to represent page elements, but none of those divs have any real meaning. To distinguish between different structures, we often give these divs different ids, and the ID name identifies the block that the div is responsible for. HTML5 creates different labels for these different blocks. We read tens of thousands of web pages, or watch the news, or listen to music, or watching video, eventually you find that in fact found thousands of web page actually has the same structure: at the bottom of the navigation bar, title, content, and almost “plus ca change”, it simply use different semantic tags to represent different parts of the page to do their job. These semantic tags, when used, can help you better understand the framework of a web page. Even without CSS, HTML pages have good content structure and code structure.

Let’s review a few HTML5 semantic tags:

  • 1):article tag: Load shows a separate article content. For example, a complete forum post, a website news article, a blog post, etc., a user comment, etc. Artilce can be nested, and the inner artilce tag has an affiliation with the outer layer article tag. For example, a blog post can be displayed as an article, and some comments can be embedded as an article.
  • 2): Section tags: define sections (sections, sections) in a document. Such as a chapter, header, footer, or other part of a document.
  • 3): Aside: For loading non-text content. Such as ads, groups of links, sidebars and so on.
  • 4): Hgroup tag: used to combine the title elements (H1-H6) of a page or section.

    For example, if you have consecutive H series tag elements in a range, you can enclose them with hGroup.

    & lt; hgroup>& lt; H1 > Title 1 </h1>; <h2> ; Title 2</h2 ></ hgroup>Copy the code
  • 5): Header tags: Define a combination of pages for a document, usually some guidance and navigation information.
  • 6):footer tag: defines the footer of a section or document.

    Typically, this element will contain the author’s name, the document’s creation date, and/or contact information.

    Example:

    & lt; Footer > © 2012 Baidu ICP certificate 030173 </footer >Copy the code
  • 7): Nav TAB: Navigation links are placed in the NAV TAB. The nav TAB should include some of the main navigation links for the current page. For example, to display a navigation link for a site in the footer (homepage, service information page, copyright information page, etc.), you can use the nav tag, of course, this is not required.
  • 8): Time tag: defines the time (24-hour system) or date of the Gregorian calendar. Time and time zone offsets are optional. This element encodes the date and time in a machine-readable way, and the search engine produces smarter search results
  • 9): Mark tag: Defines marked text. Use the tag when you want to highlight text.
  • 10): Figure tags: specify individual stream content (images, charts, photos, code, etc.). The content of the figure element should be related to the main content, but it should not affect the flow of the document if it is removed.
  • 11): Figure caption tag: Defines the caption of a figure element.

Default CSS for semantic tags

Semantic tags are not the “patent” of HTML5. For example, h1, H2 and so on before HTML5 are semantic tags. They represent several levels of headings. Although we didn’t introduce any CSS into the HTML, we can still see the h tag having the effect of font enlargement and boldness. In fact, the HTML itself is not represented, we see for example the H1 tag is bold, the font size is 2em, bold; Strong is bold, don’t think of it as HTML, it’s actually the default CSS style of HTML that works, so it’s not an advantage of semantic HTML structure to take it out or lose it, but browsers have default styles, The default style is also intended to better express the semantics of HTML. It can be said that the default style of the browser and the semantic STRUCTURE of HTML are inseparable.

Modular, easy for team development and maintenance

Different semantic tags actually divide the web page into different modules. The structure is more conducive to decomposition of modules, which is conducive to team cooperation and maintenance. Or when you’re reviewing elements yourself, when you see “header,” you know that’s the head of the page, and you go into that TAB and you might also find a nav TAB, and you’ll immediately think that’s a navigation bar. You can quickly let yourself and others know the structure of a web page as the name suggests, rather than seeing a bunch of divs make your head spin.

Different tags, their content may have different attention

There are different parts of a webpage, but not all of them are of interest to you. For example, when you see my article here, you may pay more attention to the content of my article, not so much to my name, not so much to how many followers I have. Even more exaggeratingly, when you see a great movie, you don’t pay attention to the plasters that pop up next to it. Instead, it annoys you. Different semantic tags actually separate different content.

Semantic tags are more standardized, making machines more HTML-aware

Reading this, you might say that users don’t usually look at web pages with the same compulsion as their programmer brothers to look at the source code to see what semantic tags are being used. Who knows which semantic tags are used by different modules? To a human, whether you’re a semantic tag or div, you’re looking at a live, rendered web page. In fact, semantic tags may not be for people to see (not to insult the program ape GG meaning), or machine to see. For example, geeky uses wordpress to create a directory for articles. The principle of this plug-in is to traverse the article to extract the H tags in the content, and then generate the table of contents. In fact, content is extracted by identifying semantic tags. A similar example, but not by recognizing semantic tags, I’ve seen people use some crawlers, which grab the blog content of other people’s websites and post it to their own blog, and the principle is that you need to output the url of the web page to crawl in the background, Then filter the div class attribute in the web content to separate the navigation links (often directory links) and content pages. For example, some websites use the CSS style div class=”nav” for the article directory and the CSS style div class=”content” for the content. We can match the nav and content to filter out the required information. However, not all sites use this class name. Some sites may use div class=”post” to represent the content of the article. So class=”nav”,class=”content”, not a standardized name. And then the NAV,article semantic tag provides a normalization for us. If we design our web pages strictly according to the rules of using HTML5 semantic tags, it will be very helpful for crawlers to “understand” our web pages.

Content weight differentiation, SEO will bring change

As mentioned earlier, semantic tags make it easier for the machine to understand the HTML we write, and different content has different attention. Personal absolutely this can bring certain changes to SEO. When we use a search engine, it annoys us to find something completely unrelated to the search term. A closer look only to find that their search terms actually only appear in a website advertising words. If we can use semantic labels to place the focus of the web page, such as the content of the article, in an aside, we can successfully differentiate the weight of different content. In fact, search engines can give a little more weight to certain semantic tags to improve search accuracy. Of course, this is what individuals expect from search engines. If so, this will surely revolutionize SEO.

There are a lot of personal views I hope you can exchange them!

 

0 people like
Zero one collection
Share it on Weibo
More share

A guest
The author homepage
Sponsored by the author





  • BY Leave Request Software description and feedback page
  • Ni guangnan is pushing for a homegrown operating system
  • Google has unveiled Sky, a new Android development language
  • 【 Reprint 】 Use third-party websites to do their own apps online

Emmet elegantly builds the Html skeleton
 
 
Use Ruby simple book crawler to count user post information