MENU
Head
<head>defines the head section, which contains general information about the document and relates to external files. It can contain the following tags in this subsection.
<title>contains the descriptive text to be displayed at the top of the browser tab and as the title of a favorite page. For the best results of SEO (search engine optimization), use a unique long (not more than 60 characters) meaningful (avoid a list of keywords) description phrase for each page at your site.
<script>defines client-side JavaScript.
...... async: loads an external script asynchronously in parallel to the loading/parsing of the remaining page
....... defer: executes an external script only after the remaining page has been loaded
....... type= MIME_type or a JavaScript 'module'
....... src=the URI of an external script; must not be used together with inline scripts, ie. scripts embedded inside the tags as opposed to external scripts
....... crossorigin={anonymous|use-credentials}
...... integrity=a hash
...... nomodule: load the script only if the browser does not support ES2015 modules, ie. type='module'
....... nonce=a cryptographic nonce
...... referrerpolicy={no-referrer | no-referrer-when-downgrade (default) | origin | origin-when-cross-origin | same-origin | strict-origin | strict-origin-when-cross-origin | unsafe-url }
<noscript>defines the content to show when scripting is disabled.
<style>defines style information
....... type=MIME_type (default: text/css)
...... media=media-query
...... title=alternative stylesheet
...... nonce=a cryptographic nonce
<link>
defines the relationship with an external file
....... disabled
...... prefetch: loads for future navigation
....... href=url
...... hreflang = two_letter_language_code
...... media = media-query
...... title=alternative stylesheet
...... sizes = HeightxWidth in pixels (eg. sizes=”32x32”)
...... type = MIME_type
...... crossorigin={anonymous | use-credentials}
...... integrity=a cryptographic hash
...... importance = { auto | high | low }
...... as={ audio | document | embed | fetch | font | image | media | object | script | style | track | video | worker }
...... referrerpolicy={no-referrer | no-referrer-when-downgrade (default) | origin | origin-when-cross-origin | same-origin | strict-origin | strict-origin-when-cross-origin | unsafe-url }
...... rel= { alternate | author | bookmark | canonical | dns-prefetch | external | help | icon | import | license | manifest | modulepreload | next | nofollow | noopener | noreferrer | opener | pingback | preconnect | prefetch | preload | prerender | prev | search | shortlink | stylesheet | tag }
As the URLs of some required images, fonts, scripts, stylesheets, and other resources are hidden within CSS and JavaScript, they are not immediately discovered as the document is loaded. In such cases, rel="preload" potentially provides a frictionless user experience.
Below, to see how the image is loaded before the button is clicked, press F12 on a browser and navigate to Network to see how the image is loaded before any user interaction. Notice also the images are conditionally loaded with media queries, which may be important for a responsive design.
rel="preload" loads a resource early for the current document before the body is parsed, potentially saving overall loading time. As a hint with a lower priority, rel="prefetch" or rel="next" caches a resource for the next navigation after the current document has been loaded.
<link rel="preload" as="style" href="/contents.css" onload="this.rel='stylesheet'"><link rel="preload" as="script" href="async_script.js" onload="var script = document.createElement('script'); script.src = this.href; document.body.appendChild(script);">
<base>
specifies the base URL for all relative URLs. (example)
...... href=URL
...... target= {
_blank: new window or tab |
_parent: in the parent frame |
_self: in the current frame |
_top: in the full-body |
framename: in the frame }
<meta>
defines other metadata for the page. It is not displayed but can be parsed by machines and search engines.
...... charset=character set; not to be used together with 'http-equiv'/'name' and 'content'
....... http-equiv= {refresh: no. of seconds to refresh | content-security-policy: }
...... content=description for the name / http-equiv
...... name={
application-name: the identity of the application |
generator: the software generating the page |
description: default description for the bookmarks of several browsers such as Firefox and Opera |
keywords: comma-separated list of relevant words|
referrer: the referrer policy |
author: name of the document's author |
creator: organization creating the document; use several <meta> tags if more than one |
publisher: the publisher of the document |
theme-color: a CSS color value for the UI color |
color-scheme: {normal | [light|dark]+ | only light}|
viewport: hints about the size of the viewing window for mobile devices:{
width: 'device-width' / pixels integer |
height: 'device-height' / pixels integer |
initial-scale: a number between 0.0 and 10.0 indicating the initial ratio between the width and the viewport size |
maximum-scale: a number between and 10.0 indicating the maximum zooming level |
minimum-scale: a number between 0.0 and 10.0 indicating the minimum zooming level |
user-scalable: 'yes' or 'no' indicating whether zooming is allowed |
viewport-fit:
'auto' – whole page is viewable;
'contain' – scales the viewport to show all the contents; '
'cover' – scales the viewport to fill the display entirely, cutting the edges of / scaling the contents if needed } |
robots: comma-separated instructions for search engine crawlers: {
index: allows indexing (default) |
noindex: requests no indexing |
follow: allows link following (default) |
nofollow: requests links not to be followed |
none: 'noindex, nofollow' |
noodp: prevents using, in the search engine results, the description of Open Directory Project (DMOZ), a project to organize the Web |
noarchive: requests page not to be cached |
nocache: same as 'noarchive' (for Bing) |
nosnippet: prevents displaying any description in search engine results |
noimageindex: requests this page not to appear as the referring page of an indexed image} |
googlebot: 'robots' instructions for Google |
slurp: 'robots' instructions for Yahoo }