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>
```
**[⬆ back to top](#table-of-contents)**
## Elements
``` html
@ -74,6 +76,8 @@ Below are the essential tags for basic, minimalist websites:
<noscript><!--no JS alternative--></noscript>
```
**[⬆ back to top](#table-of-contents)**
## Meta
``` 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)
- [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)
**[⬆ back to top](#table-of-contents)**
## Link
@ -234,6 +239,8 @@ Below are the essential tags for basic, minimalist websites:
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
```
**[⬆ back to top](#table-of-contents)**
### Favicons
``` 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/)
- [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)
**[⬆ back to top](#table-of-contents)**
## Social
### 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)
- [Open Graph protocol](http://ogp.me/)
**[⬆ back to top](#table-of-contents)**
### Facebook Instant Articles
``` 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)
- [Instant Articles: Format Reference](https://developers.facebook.com/docs/instant-articles/reference)
**[⬆ back to top](#table-of-contents)**
### Twitter Cards
``` 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 Card Validator](https://cards-dev.twitter.com/validator)
**[⬆ back to top](#table-of-contents)**
### Google+ / Schema.org
``` html
@ -308,6 +323,8 @@ Below are the essential tags for basic, minimalist websites:
<meta itemprop="image" content="https://example.com/image.jpg">
```
**[⬆ back to top](#table-of-contents)**
### 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.
@ -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!">
```
**[⬆ back to top](#table-of-contents)**
### OEmbed
``` html
@ -329,6 +348,8 @@ Pinterest lets you prevent people from saving things from your website, accordin
- [oEmbed format](http://oembed.com/)
**[⬆ back to top](#table-of-contents)**
## Browsers / Platforms
### 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)
**[⬆ back to top](#table-of-contents)**
### Apple Safari
```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">
```
**[⬆ back to top](#table-of-contents)**
### Google Android
``` 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">
```
**[⬆ back to top](#table-of-contents)**
### Google Chrome
``` html
@ -390,6 +417,9 @@ Pinterest lets you prevent people from saving things from your website, accordin
<!-- Disable translation prompt -->
<meta name="google" content="notranslate">
```
**[⬆ back to top](#table-of-contents)**
### Google Chrome Mobile (Android Only)
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)
**[⬆ back to top](#table-of-contents)**
### Microsoft Internet Explorer
``` 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">
```
**[⬆ back to top](#table-of-contents)**
## App Links
``` 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/)
**[⬆ back to top](#table-of-contents)**
## Browsers (Chinese)
### 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">
```
**[⬆ back to top](#table-of-contents)**
### QQ Mobile Browser
``` 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">
```
**[⬆ back to top](#table-of-contents)**
### UC Mobile Browser
``` 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)
**[⬆ back to top](#table-of-contents)**
## Notes
### Performance
@ -504,11 +546,15 @@ Example:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
```
**[⬆ back to top](#table-of-contents)**
## 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)
**[⬆ back to top](#table-of-contents)**
## Related Projects
- [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
- [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
- [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md)
**[⬆ back to top](#table-of-contents)**
## Translations
- [Brazilian Portuguese](https://github.com/Webschool-io/HEAD)
@ -529,6 +579,8 @@ Example:
- [Russian/Русский](https://github.com/Konfuze/HEAD)
- [Turkish/Türkçe](https://github.com/mkg0/HEAD)
**[⬆ back to top](#table-of-contents)**
## Contributing
**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.
**[⬆ back to top](#table-of-contents)**
### Contributors
Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors).
**[⬆ back to top](#table-of-contents)**
## Author
**[Josh Buchea](http://joshbuchea.com/)**
**[⬆ back to top](#table-of-contents)**
## License
[![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.
**[⬆ back to top](#table-of-contents)**