# 🀯 HEAD > A simple guide to HTML `` elements [![Contributors](https://img.shields.io/github/contributors/joshbuchea/head.svg?style=for-the-badge)](https://github.com/joshbuchea/HEAD/graphs/contributors) [![CC0](https://img.shields.io/badge/license-CC0-green.svg?style=for-the-badge)](https://creativecommons.org/publicdomain/zero/1.0/) [![Follow @joshbuchea on Mastodon](https://img.shields.io/badge/Follow_@joshbuchea-purple?logo=mastodon&logoColor=white&style=for-the-badge)](https://hachyderm.io/@joshbuchea) ## Table of Contents - [Recommended Minimum](#recommended-minimum) - [Elements](#elements) - [Recommended Order](#recommended-order) - [Meta](#meta) - [Link](#link) - [Scripts](#scripts) - [Icons](#icons) - [Social](#social) - [Open Graph](#open-graph) - [Schema.org](#schemaorg) - [Google JSON-LD Schema](#google-json-ld-schema) - [Pinterest](#pinterest) - [OEmbed](#oembed) - [QQ/Wechat](#qqwechat) - [Dublin Core](#dublin-core) - [Fediverse](#fediverse) - [Browsers / Platforms](#browsers--platforms) - [Apple iOS](#apple-ios) - [Google Android](#google-android) - [Google Chrome](#google-chrome) - [Browsers (Chinese)](#browsers-chinese) - [360 Browser](#360-browser) - [QQ Mobile Browser](#qq-mobile-browser) - [UC Mobile Browser](#uc-mobile-browser) - [App Links](#app-links) - [Deprecated](#deprecated) - [Other Resources](#other-resources) - [Related Projects](#related-projects) - [Translations](#-translations) - [Contributing](#-contributing) - [Guide](#guide) - [Contributors](#-contributors) - [Author](#-author) - [Support](#-support) - [License](#-license) ## Recommended Minimum Below are the essential elements for any web document (websites/apps): ```html Page Title ``` `meta charset` - defines the encoding of the website, `utf-8` is the standard `meta name="viewport"` - viewport settings related to mobile responsiveness `width=device-width` - use the physical width of the device (great for mobile!) `initial-scale=1` - the initial zoom, 1 means no zoom ## Elements Valid `` elements include `meta`, `link`, `title`, `style`, `script`, `noscript`, and `base`. These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc. ```html Page Title ``` ## Recommended Order The following is the recommended order of elements in the `` for best performance and correct document rendering: 1. `` β€” Character encoding declaration; **must** appear within the first 1024 bytes of the document 2. `` β€” Viewport settings; declare early to ensure correct responsive rendering 3. `` β€” Document title; placed after encoding/viewport to prevent potential re-rendering 4. Other `<meta>` tags (description, robots, etc.) 5. Open Graph / Social meta tags 6. `<link rel="canonical">` and other `<link>` tags (excluding stylesheets and resource hints) 7. `<link rel="preconnect">` / `<link rel="dns-prefetch">` β€” Resource hints; early to maximize their value 8. `<link rel="stylesheet">` β€” External CSS; stylesheets should come before scripts 9. `<link rel="icon">` β€” Favicons 10. `<script>` β€” Scripts; use `defer` or `async` where possible to avoid blocking rendering ```html <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title ``` ## Meta ```html ``` **Note:** Geo tags are **not** used by browsers directly β€” they are intended for search engines, web crawlers, and location-based services to understand the geographic relevance of a page's content. `ICBM` (named after the military ICBM address convention) and `geo.position` both express coordinates in decimal degrees; `ICBM` uses a comma separator while `geo.position` uses a semicolon. `geo.region` identifies the country (and optionally the state/region) using ISO codes, and `geo.placename` provides a human-readable place name. - πŸ“– [Meta tags that Google understands](https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=en) - πŸ“– [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions) - πŸ“– [ICBM on Wikipedia](https://en.wikipedia.org/wiki/ICBM_address#Modern_use) - πŸ“– [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) ## Link ```html ``` **Note:** The [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest) (`manifest.json`) is the recommended, cross-platform way to declare installable web app properties β€” including `name`, `icons`, `theme_color`, and `display` mode β€” in a single file, instead of relying on multiple platform-specific `` tags. - πŸ“– [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml) - πŸ“– [Web App Manifest (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest) ## Scripts ```html ``` - πŸ“– [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html) - πŸ“– [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity) ## Icons ```html ``` - πŸ“– [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/) - πŸ“– [Favicon Cheat Sheet](https://github.com/audreyfeldroy/favicon-cheat-sheet) - πŸ“– [Icons & Browser Colors](https://web.dev/articles/icons-and-browser-colors) ## Social ### Open Graph > The [Open Graph protocol](https://ogp.me/) is the de facto standard for controlling how your content appears when shared on social platforms. Originally created by Facebook, it's now consumed by most major platforms β€” including LinkedIn, X (as a fallback when Twitter Card tags are absent), Discord, Slack, iMessage, Mastodon, Bluesky, and WhatsApp. ```html ``` - πŸ“– [Open Graph protocol](https://ogp.me/) - πŸ›  Test your page with the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) or the [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) ### Schema.org ```html ``` **Note:** These meta tags require the `itemscope` and `itemtype` attributes to be added to the `` tag. - πŸ“– [Getting Started - schema.org](https://schema.org/docs/gs.html) - πŸ›  Test your page with the [Rich Results Test](https://search.google.com/test/rich-results) ### Google JSON-LD Schema The following is used by Google to help provide your site with a knowledge graph result when someone Googles you (this is the pane to the right of the search results that typically appears for larger brands): ```html ``` ### Pinterest Pinterest lets you prevent people from saving things from your website, according [to their help center](https://help.pinterest.com/en/business/article/prevent-saves-to-pinterest-from-your-site). The `description` is optional. ```html ``` ### OEmbed ```html ``` - πŸ“– [oEmbed format](https://oembed.com/) ### QQ/Wechat Users share web pages to qq wechat will have a formatted message ```html ``` - πŸ“– [Code Format Docs](https://open.mobile.qq.com/api/mqq/index#api:setShareInfo) ### Dublin Core [Dublin Core](https://www.dublincore.org/) is a metadata vocabulary standardized as [ISO 15836](https://www.iso.org/standard/71339.html) and maintained by the Dublin Core Metadata Initiative (DCMI). It defines fifteen core elements for describing resources and is widely used in digital libraries, institutional repositories, academic publishing, and government portals. To use Dublin Core in HTML, declare the DC namespace and then add the desired elements as `` tags with a `DC.` prefix. ```html ``` - πŸ“– [Dublin Core Metadata Element Set](https://www.dublincore.org/specifications/dublin-core/dces/) - πŸ“– [Using Dublin Core in HTML](https://www.dublincore.org/specifications/dublin-core/dcq-html/) ### Fediverse Some Fediverse software such as Mastodon allow you to put your Fediverse handle in a meta tag which will show up in embeds to your website. In addition to the tag you will also need to add your domain to the list of allowed websites in "Settings -> Public profile -> Verification -> Author attribution" (for Mastodon). ```html ``` ## Browsers / Platforms ### Apple iOS ```html ``` - πŸ“– [Configuring Web Applications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) **Note:** Properties such as app title (`apple-mobile-web-app-title`), standalone/display mode, and app icons (`apple-touch-icon`) are more reliably and portably configured using the [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest) (``), which is the recommended approach for Progressive Web Apps (PWAs). The Apple-specific meta tags remain useful as a fallback for older iOS versions. ### Google Android ```html ``` **Note:** `theme-color` and the "add to home screen" / standalone behavior are better defined using the [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest) (``). The `theme-color` meta tag can still serve as a fallback for browsers that do not yet support the manifest `theme_color` property. ### Google Chrome ```html ``` ## Browsers (Chinese) ### 360 Browser ```html ``` ### QQ Mobile Browser ```html ``` ### UC Mobile Browser ```html ``` - πŸ“– [UC Browser Docs](https://www.uc.cn/download/UCBrowser_U3_API.doc) ## App Links ```html ``` - πŸ“– [App Links](https://developers.facebook.com/docs/applinks) ## Deprecated For tags and elements that were once part of this guide but are no longer supported (Internet Explorer compatibility, Safari Pinned Tabs, Alexa verification, etc.), see [DEPRECATED.md](https://github.com/joshbuchea/HEAD/blob/master/DEPRECATED.md). ## Other Resources - πŸ“– [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/main/docs/html.md) - πŸ“– [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/main/docs/extend.md) ## Related Projects - [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom package for `HEAD` snippets - [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - Sublime Text package for `HEAD` snippets - [head-it](https://github.com/hemanth/head-it) - CLI interface for `HEAD` snippets - [vue-head](https://github.com/ktquez/vue-head) - Manipulating the meta information of the `HEAD` tag for Vue.js ## 🌐 Translations - [Bahasa](https://github.com/rijdz/HEAD) - [Bengali](https://github.com/AveyBD/HEAD) - [Brazilian Portuguese](https://github.com/Webschool-io/HEAD) - [Chinese (Simplified)](https://github.com/Amery2010/HEAD) - [German](https://github.com/Shidigital/HEAD) - [Italian](https://github.com/Fakkio/HEAD) - [Japanese](https://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html) - [Korean](https://github.com/Lutece/HEAD) - [Malay](https://github.com/shoen1x/HEAD) - [Russian/Русский](https://github.com/Konfuze/HEAD) - [Spanish](https://github.com/alvaroadlf/HEAD) - [Turkish/TΓΌrkΓ§e](https://github.com/mkg0/HEAD) - [Ukrainian](https://github.com/Shramkoweb/HEAD) ## 🀝 Contributing **Open an issue or a pull request to suggest changes or additions.** ### Guide The **HEAD** repository consists of two branches: #### 1. `master` This branch consists of the `README.md` file that is reflected on the [htmlhead.dev](https://htmlhead.dev/) website. All changes to the content of the guide should be made in this file. Please follow these steps for pull requests: {:.list-style-default} - Modify only one tag, or one related set of tags at a time - Use double quotes on attributes - Don't include a trailing slash in self-closing elements β€” the HTML5 spec says they're optional - Consider including a link to documentation that supports your change #### 2. `gh-pages` This branch is responsible for the [htmlhead.dev](https://htmlhead.dev/) website. We use [Jekyll](https://jekyllrb.com/) to deploy the `README.md` markdown file to [GitHub Pages](https://pages.github.com/). All website related modifications should be made in this branch. You may find it helpful to review the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working in this branch. ## 🌟 Contributors Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors) 🀩 ## πŸ‘€ Author **Josh Buchea** - GitHub: [@joshbuchea](https://github.com/joshbuchea) - Mastodon: [@joshbuchea@hachyderm.io](https://hachyderm.io/@joshbuchea) ## πŸ’› Support If this project was helpful for you or your organization, please considering supporting my work directly: - πŸ’› [Sponsor me on GitHub](https://github.com/sponsors/joshbuchea) - ⭐️ [Star this project on GitHub](https://github.com/joshbuchea/HEAD) - πŸ™ [Follow me on GitHub](https://github.com/joshbuchea) - 🐘 [Follow me on Mastodon](https://hachyderm.io/@joshbuchea) Everything helps, thanks! πŸ™ β€” Josh ## πŸ“ License [![CC0](https://licensebuttons.net/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)