Add "back to top" links after each section

This commit is contained in:
Josh Buchea 2017-07-24 09:46:05 -07:00
parent 944257a353
commit 6891dd10b9
1 changed files with 60 additions and 0 deletions

View File

@ -52,6 +52,8 @@ Below are the essential tags for basic, minimalist websites:
<title>Page Title</title> <title>Page Title</title>
``` ```
**[⬆ back to top](#table-of-contents)**
## Elements ## Elements
``` html ``` html
@ -74,6 +76,8 @@ Below are the essential tags for basic, minimalist websites:
<noscript><!--no JS alternative--></noscript> <noscript><!--no JS alternative--></noscript>
``` ```
**[⬆ back to top](#table-of-contents)**
## Meta ## Meta
``` html ``` html
@ -158,6 +162,7 @@ Below are the essential tags for basic, minimalist websites:
- [ICBM on Wikipedia](https://en.wikipedia.org/wiki/ICBM_address#Modern_use) - [ICBM on Wikipedia](https://en.wikipedia.org/wiki/ICBM_address#Modern_use)
- [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) - [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)
**[⬆ back to top](#table-of-contents)**
## Link ## Link
@ -234,6 +239,8 @@ Below are the essential tags for basic, minimalist websites:
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ --> <!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
``` ```
**[⬆ back to top](#table-of-contents)**
### Favicons ### Favicons
``` html ``` html
@ -249,6 +256,8 @@ Below are the essential tags for basic, minimalist websites:
- [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/) - [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) - [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)
**[⬆ back to top](#table-of-contents)**
## Social ## Social
### Facebook Open Graph ### Facebook Open Graph
@ -268,6 +277,8 @@ Below are the essential tags for basic, minimalist websites:
- [Facebook Open Graph Markup](https://developers.facebook.com/docs/sharing/webmasters#markup) - [Facebook Open Graph Markup](https://developers.facebook.com/docs/sharing/webmasters#markup)
- [Open Graph protocol](http://ogp.me/) - [Open Graph protocol](http://ogp.me/)
**[⬆ back to top](#table-of-contents)**
### Facebook Instant Articles ### Facebook Instant Articles
``` html ``` html
@ -284,6 +295,8 @@ Below are the essential tags for basic, minimalist websites:
- [Facebook Instant Articles: Creating Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate) - [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) - [Instant Articles: Format Reference](https://developers.facebook.com/docs/instant-articles/reference)
**[⬆ back to top](#table-of-contents)**
### Twitter Cards ### Twitter Cards
``` html ``` html
@ -299,6 +312,8 @@ Below are the essential tags for basic, minimalist websites:
- [Twitter Cards: Getting Started Guide](https://dev.twitter.com/cards/getting-started) - [Twitter Cards: Getting Started Guide](https://dev.twitter.com/cards/getting-started)
- [Twitter Card Validator](https://cards-dev.twitter.com/validator) - [Twitter Card Validator](https://cards-dev.twitter.com/validator)
**[⬆ back to top](#table-of-contents)**
### Google+ / Schema.org ### Google+ / Schema.org
``` html ``` html
@ -308,6 +323,8 @@ Below are the essential tags for basic, minimalist websites:
<meta itemprop="image" content="https://example.com/image.jpg"> <meta itemprop="image" content="https://example.com/image.jpg">
``` ```
**[⬆ back to top](#table-of-contents)**
### Pinterest ### 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. 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.
@ -316,6 +333,8 @@ Pinterest lets you prevent people from saving things from your website, accordin
<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!"> <meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">
``` ```
**[⬆ back to top](#table-of-contents)**
### OEmbed ### OEmbed
``` html ``` html
@ -329,6 +348,8 @@ Pinterest lets you prevent people from saving things from your website, accordin
- [oEmbed format](http://oembed.com/) - [oEmbed format](http://oembed.com/)
**[⬆ back to top](#table-of-contents)**
## Browsers / Platforms ## Browsers / Platforms
### Apple iOS ### Apple iOS
@ -361,6 +382,8 @@ Pinterest lets you prevent people from saving things from your website, accordin
- [Apple Meta Tags](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) - [Apple Meta Tags](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
**[⬆ back to top](#table-of-contents)**
### Apple Safari ### Apple Safari
```html ```html
@ -368,6 +391,8 @@ Pinterest lets you prevent people from saving things from your website, accordin
<link rel="mask-icon" href="/path/to/icon.svg" color="red"> <link rel="mask-icon" href="/path/to/icon.svg" color="red">
``` ```
**[⬆ back to top](#table-of-contents)**
### Google Android ### Google Android
``` html ``` html
@ -382,6 +407,8 @@ Pinterest lets you prevent people from saving things from your website, accordin
<link rel="alternate" href="android-app://package-name/http/url-sample.com"> <link rel="alternate" href="android-app://package-name/http/url-sample.com">
``` ```
**[⬆ back to top](#table-of-contents)**
### Google Chrome ### Google Chrome
``` html ``` html
@ -390,6 +417,9 @@ Pinterest lets you prevent people from saving things from your website, accordin
<!-- Disable translation prompt --> <!-- Disable translation prompt -->
<meta name="google" content="notranslate"> <meta name="google" content="notranslate">
``` ```
**[⬆ back to top](#table-of-contents)**
### Google Chrome Mobile (Android Only) ### Google Chrome Mobile (Android Only)
Since Chrome 31, you can set up your web app to "app mode" like Safari. Since Chrome 31, you can set up your web app to "app mode" like Safari.
@ -408,6 +438,8 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
- [Google Developer](https://developer.chrome.com/multidevice/android/installtohomescreen) - [Google Developer](https://developer.chrome.com/multidevice/android/installtohomescreen)
**[⬆ back to top](#table-of-contents)**
### Microsoft Internet Explorer ### Microsoft Internet Explorer
``` html ``` html
@ -434,6 +466,8 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
<meta name="msapplication-task-separator" content="1"> <meta name="msapplication-task-separator" content="1">
``` ```
**[⬆ back to top](#table-of-contents)**
## App Links ## App Links
``` html ``` html
@ -452,6 +486,8 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
- [App Links Docs](http://applinks.org/documentation/) - [App Links Docs](http://applinks.org/documentation/)
**[⬆ back to top](#table-of-contents)**
## Browsers (Chinese) ## Browsers (Chinese)
### 360 Browser ### 360 Browser
@ -461,6 +497,8 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta name="renderer" content="webkit|ie-comp|ie-stand">
``` ```
**[⬆ back to top](#table-of-contents)**
### QQ Mobile Browser ### QQ Mobile Browser
``` html ``` html
@ -472,6 +510,8 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
<meta name="x5-page-mode" content="app"> <meta name="x5-page-mode" content="app">
``` ```
**[⬆ back to top](#table-of-contents)**
### UC Mobile Browser ### UC Mobile Browser
``` html ``` html
@ -493,6 +533,8 @@ Since Chrome 31, you can set up your web app to "app mode" like Safari.
- [UC Browser Docs](http://www.uc.cn/download/UCBrowser_U3_API.doc) - [UC Browser Docs](http://www.uc.cn/download/UCBrowser_U3_API.doc)
**[⬆ back to top](#table-of-contents)**
## Notes ## Notes
### Performance ### Performance
@ -504,11 +546,15 @@ Example:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
``` ```
**[⬆ back to top](#table-of-contents)**
## Other Resources ## Other Resources
- [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md) - [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) - [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md)
**[⬆ back to top](#table-of-contents)**
## Related Projects ## Related Projects
- [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom package for `HEAD` snippets - [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom package for `HEAD` snippets
@ -516,10 +562,14 @@ Example:
- [head-it](https://github.com/hemanth/head-it) - CLI interface 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 - [vue-head](https://github.com/ktquez/vue-head) - Manipulating the meta information of the `HEAD` tag for Vue.js
**[⬆ back to top](#table-of-contents)**
## Other Formats ## Other Formats
- [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md) - [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md)
**[⬆ back to top](#table-of-contents)**
## Translations ## Translations
- [Brazilian Portuguese](https://github.com/Webschool-io/HEAD) - [Brazilian Portuguese](https://github.com/Webschool-io/HEAD)
@ -529,6 +579,8 @@ Example:
- [Russian/Русский](https://github.com/Konfuze/HEAD) - [Russian/Русский](https://github.com/Konfuze/HEAD)
- [Turkish/Türkçe](https://github.com/mkg0/HEAD) - [Turkish/Türkçe](https://github.com/mkg0/HEAD)
**[⬆ back to top](#table-of-contents)**
## Contributing ## Contributing
**Open an issue or a pull request to suggest changes or additions.** **Open an issue or a pull request to suggest changes or additions.**
@ -554,16 +606,24 @@ This branch is responsible for the [\<head> Cheat Sheet](http://gethead.info/) w
You might want to go through the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working on this branch. You might want to go through the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working on this branch.
**[⬆ back to top](#table-of-contents)**
### Contributors ### Contributors
Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors). Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors).
**[⬆ back to top](#table-of-contents)**
## Author ## Author
**[Josh Buchea](http://joshbuchea.com/)** **[Josh Buchea](http://joshbuchea.com/)**
**[⬆ back to top](#table-of-contents)**
## License ## License
[![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/) [![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](https://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. To the extent possible under law, [Josh Buchea](http://joshbuchea.com) has waived all copyright and related or neighboring rights to this work.
**[⬆ back to top](#table-of-contents)**