diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 19f2eae..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2016 Josh Buchea - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index 2047979..8ba28bc 100644 --- a/README.md +++ b/README.md @@ -1,121 +1,336 @@ # HEAD -A collection of HTML head elements. +A list of everything that could go in the `` of your document -## Elements +## Table of Contents -``` html -Page Title - - - -``` +- [Recommended Minimum](#recommended-minimum) +- [Elements](#elements) +- [Meta](#meta) + - [Meta: Not Recommended](#meta-not-recommended) +- [Link](#link) + - [Link: Not Recommended](#link-not-recommended) + - [Favicons](#favicons) +- [Social](#social) + - [Facebook / Open Graph](#facebook--open-graph) + - [Facebook / Instant Articles](#facebook--instant-articles) + - [Twitter](#twitter) + - [Google+ / Schema.org](#google--schemaorg) + - [OEmbed](#oembed) +- [Browsers / Platforms](#browsers--platforms) + - [Apple iOS](#apple-ios) + - [Apple Safari](#apple-safari) + - [Google Android](#google-android) + - [Google Chrome](#google-chrome) + - [Microsoft Internet Explorer](#microsoft-internet-explorer) + - [Microsoft Internet Explorer: Legacy, Do Not Use!](#microsoft-internet-explorer-legacy-do-not-use) +- [Browsers (Chinese)](#browsers-chinese) + - [360 Browser](#360-browser) + - [QQ Mobile Browser](#qq-mobile-browser) + - [UC Mobile Browser](#uc-mobile-browser) +- [App Links](#app-links) +- [Notes](#notes) + - [Performance](#performance) +- [Other Resources](#other-resources) +- [Related Projects](#related-projects) +- [Other Formats](#other-formats) +- [Translations](#translations) +- [Contributing](#contributing) +- [Author](#author) +- [License](#license) -## Meta Element +## Recommended Minimum -``` html +Below are the essential tags for basic, minimalist websites: + +```html - - - - - - +Page Title +``` + +## Elements + +``` html + +Page Title + + + + + + + + + + + + + +``` + +## Meta + +``` html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +- [Meta tags that Google understands](https://support.google.com/webmasters/answer/79812?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) + +### Meta: Not Recommended +Below are the meta attributes which are not recommended for use as they had low adoption rate, or have been deprecated: + +```html + + + + + + + + + + + + - - - - - - - - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` -## Link Element +## Link ``` html - + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + - + + + + - - - + + + + + + - - + + + + + + + + + - - + ``` +### Link: Not Recommended +Below are the link relations which are not recommended for use: + +```html + + + + +``` + ### Favicons ``` html - + - + + ``` - [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/) +- [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) ## Social @@ -138,6 +353,22 @@ A collection of HTML head elements. - [Facebook Open Graph Markup](https://developers.facebook.com/docs/sharing/webmasters#markup) - [Open Graph protocol](http://ogp.me/) +### Facebook / Instant Articles + +``` html + + + + + + + + +``` + +- [Facebook Instant Articles: Creating Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate) +- [Instant Articles: Format Reference](https://developers.facebook.com/docs/instant-articles/reference) + ### Twitter ``` html @@ -153,18 +384,39 @@ A collection of HTML head elements. ``` - [Twitter Cards: Getting Started Guide](https://dev.twitter.com/cards/getting-started) -- [Twitter Card Validator](https://dev.twitter.com/docs/cards/validation/validator) +- [Twitter Card Validator](https://cards-dev.twitter.com/validator) ### Google+ / Schema.org ``` html + ``` -## Browser/Platform +### Pinterest +Pinterest lets you prevent people from saving things from your website, according [to their help center](https://help.pinterest.com/en/articles/prevent-people-saving-things-pinterest-your-site). The `description` is optional. + +``` html + +``` + +### OEmbed + +``` html + + +``` + +- [oEmbed format](http://oembed.com/) + +## Browsers / Platforms ### Apple iOS @@ -181,15 +433,24 @@ A collection of HTML head elements. - - + + + + - + + + + + + - - + + - + + + ``` - [Apple Meta Tags](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) @@ -198,7 +459,7 @@ A collection of HTML head elements. ```html - + ``` ### Google Android @@ -206,9 +467,13 @@ A collection of HTML head elements. ``` html - + + + + + ``` ### Google Chrome @@ -219,6 +484,27 @@ A collection of HTML head elements. ``` +### Google Chrome Mobile (Android Only) + +Since Chrome 31, you can set up your web app to "app mode" like Safari. + +``` html + + + + + + + + + + + + + +``` + +[Google Developer](https://developer.chrome.com/multidevice/android/installtohomescreen) ### Microsoft Internet Explorer @@ -227,60 +513,49 @@ A collection of HTML head elements. - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + ``` -### Microsoft Internet Explorer (LEGACY DO NOT USE) +### Microsoft Internet Explorer: Legacy, Do Not Use! ``` html - - - - -``` + + -### 360 Browser + + -``` html - - -``` + + -### UC Mobile Browser - -``` html - - - - - - - - - - - - - - -``` - -- [UC Browser Docs](http://www.uc.cn/download/UCBrowser_U3_API.doc) - -### QQ Mobile Browser - -``` html - - - - - - + + + + + ``` ## App Links @@ -301,21 +576,103 @@ A collection of HTML head elements. - [App Links Docs](http://applinks.org/documentation/) +## Browsers (Chinese) + +### 360 Browser + +``` html + + +``` + +### QQ Mobile Browser + +``` html + + + + + + +``` + +### UC Mobile Browser + +``` html + + + + + + + + + + + + + + +``` + +- [UC Browser Docs](http://www.uc.cn/download/UCBrowser_U3_API.doc) + +## Notes + +### Performance +Moving the `href` attribute to the beginning of an element improves compression when GZIP is enabled, because the `href` attribute is used in `a`, `base` and `link` tags. + +Example: + +``` html + +``` + ## Other Resources - [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md) - [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/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 + +## Other Formats + +- [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md) + +## Translations + +- [Brazilian Portuguese](https://github.com/Webschool-io/HEAD) +- [Chinese (Simplified)](https://github.com/Amery2010/HEAD) +- [Italian](https://github.com/Fakkio/HEAD) +- [Japanese](http://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html) +- [Russian/Русский](https://github.com/Konfuze/HEAD) + ## Contributing Open an issue or a pull request to suggest changes or additions. +Please follow these steps for pull requests: + +- 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 + +### Contributors + +Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors). + ## Author -**Josh Buchea** -- -- +**[Josh Buchea](http://joshbuchea.com/)** ## License -[MIT License](LICENSE) +[![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/) + +To the extent possible under law, [Josh Buchea](http://joshbuchea.com) has waived all copyright and related or neighboring rights to this work.