03 HTML metadata and links

In the previous

Front 2-way foil 02-HTML semantics

HTML metadata is the part of the head tag that describes important information and media links on a web page. In most cases, it is for browser crawlers and machine readers. As the cornerstone of web interconnection, links are available in the form of link and script in head.

This article summarizes the important facts about common metadata and linking.

metadata

  • head

    Head itself has no meaning and only provides a save container, which is a metadata collection for Document. Does not display on the page and has only one title and base.

  • title

    Page HTML document titles, rather than page content titles (H1 ~ H6), are important in search, for the overall document summarization. The title can also be used in other contexts, such as in a user’s history, bookmarks, or search results

  • base

    The base that provides a relative address for a URL on a web page. It changes global links and is not recommended.

    <base href="https://www.example.com/news/index.html">.<p>Visit the <a href="archives.html">archives</a>.</p>
Copy the code

    In the example above link address is “https://www.example.com/news/archives.html”.

  • style

    CSS stylesheet

The most important meta

Meta is used as a complement to title, base, link, etc., and in fact meta types are common optimization directions for developers. Nature is the key – value.

Note the following when using meta:

  • Either must be specified:name.http-equiv.charset, anditemprop(Specify content for all items except ItemProp)
  • Each document must have no less than onecharsetProperties of themetaElements.

You can customize the meta by specifying a name and value, or you can use a predefined canonical meta.

The main predefined types are:

  1. Html5 simplifies the charset of meta, adding the charset attribute to set the encoding of web pages. That is:

    <meta charset="UTF-8">
Copy the code

    Utf-8 (ASCII is a subset of UTF-8) encoding is done because the server sets the encoding format for the general HTTP request process, but for some non-HTTP protocols without headers, such as file, garbled characters can be avoided.

  2. Meta with http-equiv attribute, execute command, usually add HTTP header (content-type), can set encoding:

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
Copy the code

  3. Name is the meta of the viewport, set the page zoom, most commonly used in responsive design.

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
Copy the code

    The above is the most typical use in mobile responsive design, where content sets key=value and is separated by commas.

    Attribute Explanation:

    • Width: indicates the page width. The value can be set to device-width.
    • Height: indicates the page height. The value can be set to device-height.
    • Initial-scale: indicates the initial scaling ratio (usually 1).
    • Minimum-scale: indicates the minimum scale. (Usually 1)
    • Maximum-scale: indicates the maximum scaling ratio. (Usually 1)
    • User-scalable: Whether to allow users to scale. (Set to no for existing responsive design on mobile)

  4. Description \application-name, the former describes the web page, and the latter provides the name of the web application

    <meta name=application-name content="mugu">
<meta name="description" content="this is a description>
Copy the code

    Description is important in web search and efficient in information extraction

    Application-name is set for web applications and can be used for tag collection, which is conducive to browser algorithm generation.

  5. Keyword deprecated. Many search engines do not consider these keywords because the feature is unreliable and can even result in spam results that do not help users. Especially in the face of cheating, maliciously filled keywords, browser search engines do not take into account.

  6. referrer, generator, theme-color……

link

Links include two types, hyperlinks and external resource links, the core of which is the URL and URI system of the Internet.

A URI refers to a resource, a URL refers to locating a resource by address, and a URN refers to locating a resource by name. Urls and UrNs are subsets of URIs. Detailed visible references [4]

The two most important attributes of links in web pages are rel and href. The former is Relationship, which refers to the Relationship between the target document and this document. Hypertext Reference refers to the destination address of the hyperlink. Understanding the corresponding relationship between the two can better understand and use the tag of the response.

The main links in the page are as follows:

link

  1. Rel properties, different functions

Link is primarily used to link external resources. That is, external resource class links. A CSS file reference that has a stylesheet relationship, commonly found in the head tag.

<link rel="stylesheet" type="text/css" href="theme.css">
Copy the code

In most cases, links are not displayed on web pages. As a type of metadata, they are designed to be recognized by browsers and search engines. Icon resources, for example, are recognized by browsers:

<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">
<! -- Different resolutions are available on mobile devices.
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
Copy the code

In addition, specifying different rel can have different functions, such as preload to preload some resource files (only cached, not executed, usually with the type attribute to declare MIME type); Using prerender to pre-render pages, which is set in pages that you are sure users will follow, can greatly improve the user experience.

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="prerender" href="http://example.com/">
Copy the code

The AS attribute specifies the type of resource to load and generally has one of the following values.

  • script
  • style
  • image
  • media
  • document

There are also some other metadata uses for information classes, i.e. to provide search engines \ browsers etc. This class is generally a hyperlink class link, when rel is specified as:

<! -- Author information -->
<link rel="author" href="humans.txt">

<! Copyright Information -->
<link rel="license" href="copyright.html">

<! -- a version of another language, usually judged by search engines; RSS feed links can also be determined by plugins -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

<! -- Contact information -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">

<! -- Historical Data -->
<link rel="archives" href="http://example.com/archives/">

<! - directory - >
<link rel="index" href="http://example.com/article/">

<! Navigation, mainly in the business scenario of paging browsing -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

<! -- Part from wangdoc.com -->
Copy the code

Of course some have been replaced by meta metadata.

  1. Media attribute, the media condition under which an external resource takes effect

    <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
Copy the code

    Similar to CSS media query, different file resources can be loaded under different conditions.

  2. Other attributes

    The other attributes of the tag are as follows.

    • crossorigin: Loads cross-domain Settings for external resources.
    • href: Url of an external resource.
    • referrerpolicy: when the loadRefererHow to handle header information fields.
    • as:rel="preload"orrel="prefetch"To set the type of the external resource.
    • type: MIME type of an external resource, currently used onlyrel="preload"orrel="prefetch"In the case.
    • title: The name used to identify the style sheet when it is loaded.
    • sizes: used to declare the size of an icon file, such as loading an iPhone icon file.

a

A tag refers to anchor, that is, anchor point, and setting beacon in the network is the function of A tag. A tag also has rel and href in link, and can also act as metadata, and rel’s:

alternate \ author \ help \ license \ next \ prev \ search

It has the same semantics as link, except that a is displayed on the page, mostly for reading purposes.

In addition to the common links, there are several important uses:

  • Download property: indicates that the current link is used for downloading. For example, the file name is bar.exe, which can also be omitted.

    <a href="foo.exe" download="bar.exe">Click on the download</a>
Copy the code

    Note that if the content-Disposition field is set in the header of the server’s HTTP response after the link is clicked and the value of the field is inconsistent with the Download attribute, then the field takes precedence and the file name of its setting is displayed on download.

  • Mailto protocol, open the default mail program on the machine to send mail

    <a href="mailto:[email protected]">Contact us</a>

<! You can specify the mail subject, date, etc., note that you need to escape, %20 space -->
<a
  href="mailto:[email protected][email protected]&subject=The%20subject&body=The%20body"
>Send E-mail</a>

<! How to share a web page
<a href="mailto:">Tell a friend</a>
Copy the code

script

As the soul of interaction, the Script tag loads script code and executes JavaScript programs.

The most important attribute is the type attribute, which generally defaults to “text/javascript”. There are a few other properties below, most of which are JavaScript language specific.

  • Async: This property specifies that JavaScript code is executed asynchronously, not blocking,
  • JavaScript code is executed synchronously by default.
  • Defer: This property specifies that the JavaScript code is not executed immediately, but after the page has been parsed.
  • Crossorigin: If you use this property, external scripts will be loaded in a cross-domain manner, with the Origin field added to the HTTP request header.
  • Integrity: provides hash values of external scripts to prevent scripts from being tampered with. Only external scripts with matching hash values will be executed.
  • Nonce: a random password number given by the server in the HTTP header that is different each time the script is loaded. It gives a whitelist of embedded scripts, and only those in the whitelist can be executed.
  • Referrerpolicy: Processing method of the HTTP request Referer field.

The < noScript > tag is used to display content when JavaScript is not supported or turned off by the browser. Noscript is not a functional tag, and I personally feel it is more of a human design, although it is controversial, but in some ways NoScript is for the benefit of some people. Check out this blog at 🔗I Used The…… [5]

It should be noted that although href and SRC both provide urls, they are fundamentally different. That is, the former is a replacement tag, and replaces itself after introducing resources, such as script. But href is the tag that links to the outside.

So why can’t style tags use SRC like script? It’s a link, right? The next blog will discuss this content and media tag references in more detail.

The above is the content related to the link.

The next article

Front 2-way Foil 04-HTML Embedded elements (media tags)

reference

  1. HTML Standard. (2021). Retrieved 18 February 2021, from whatwg-cn.github.io/html
  2. Document level metadata elements – HTML (hypertext markup language (HTML) | MDN. (2020). Retrieved 18 February 2021, the from developer.mozilla.org/zh-CN/docs/…
  3. The spectrum of disease is Retrieved 19 February 2021, from wangdoc.com/html/link.h…
  4. [2013]. Spectrum 19 February 2021, from juejin.cn/post/684490…
  5. The spectrum of motion in Web For A Day With JavaScript Turned Off — Smashing Magazine. (2018). Spectrum 19 February 2021, The from www.smashingmagazine.com/2018/05/usi…

Reproduced with a note of origin, Thanks~