Repository: joshbuchea/HEAD
Branch: master
Commit: 742267fbaade
Files: 3
Total size: 25.7 KB
Directory structure:
gitextract_yc6_f9cf/
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ └── sync-readme.yml
└── README.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [joshbuchea]
# patreon: # Replace with a single Patreon username
# open_collective: # Replace with a single Open Collective username
# ko_fi: # Replace with a single Ko-fi username
# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
# liberapay: # Replace with a single Liberapay username
# issuehunt: # Replace with a single IssueHunt username
# otechie: # Replace with a single Otechie username
# custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/workflows/sync-readme.yml
================================================
name: Sync README to gh-pages
on:
push:
branches:
- master
paths:
- README.md
workflow_dispatch:
permissions:
contents: write
jobs:
sync:
runs-on: ubuntu-latest
steps:
- name: Checkout master
uses: actions/checkout@v4
with:
ref: master
fetch-depth: 0
- name: Save README from master
run: cp README.md /tmp/README.md
- name: Checkout gh-pages
run: |
git fetch origin gh-pages
git checkout gh-pages
- name: Replace README
run: |
cp /tmp/README.md README.md
- name: Commit if changed
run: |
git config user.name "github-actions"
git config user.email "github-actions@github.com"
if git diff --quiet README.md; then
echo "No changes to commit"
exit 0
fi
git add README.md
git commit -m "Sync README from master"
git push origin gh-pages
================================================
FILE: README.md
================================================
# 🤯 HEAD
> A simple guide to HTML `` elements
[](https://github.com/joshbuchea/HEAD/graphs/contributors)
[](https://creativecommons.org/publicdomain/zero/1.0/)
[](https://hachyderm.io/@joshbuchea)
## Table of Contents
- [Recommended Minimum](#recommended-minimum)
- [Elements](#elements)
- [Meta](#meta)
- [Link](#link)
- [Icons](#icons)
- [Social](#social)
- [Facebook Open Graph](#facebook-open-graph)
- [Twitter Card](#twitter-card)
- [Twitter Privacy](#twitter-privacy)
- [Schema.org](#schemaorg)
- [Pinterest](#pinterest)
- [Facebook Instant Articles](#facebook-instant-articles)
- [OEmbed](#oembed)
- [QQ/Wechat](#qqwechat)
- [Browsers / Platforms](#browsers--platforms)
- [Apple iOS](#apple-ios)
- [Google Android](#google-android)
- [Google Chrome](#google-chrome)
- [Microsoft Internet Explorer](#microsoft-internet-explorer)
- [Browsers (Chinese)](#browsers-chinese)
- [360 Browser](#360-browser)
- [QQ Mobile Browser](#qq-mobile-browser)
- [UC Mobile Browser](#uc-mobile-browser)
- [App Links](#app-links)
- [Other Resources](#other-resources)
- [Related Projects](#related-projects)
- [Other Formats](#other-formats)
- [Translations](#-translations)
- [Contributing](#-contributing)
- [Contributors](#contributors)
- [Author](#-author)
- [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
```
## 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)
## Link
```html
```
- 📖 [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)
## Icons
```html
```
- 📖 [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/)
- 📖 [Creating Pinned Tab Icons](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)
- 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)
- 📖 [Icons & Browser Colors](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/)
## Social
### Facebook Open Graph
> Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. [More about Facebook Open Graph Markup](https://developers.facebook.com/docs/sharing/webmasters#markup)
```html
```
- 📖 [Open Graph protocol](http://ogp.me/)
- 🛠 Test your page with the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
### Twitter Card
> With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. [More about Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards)
```html
```
- 📖 [Getting started with cards — Twitter Developers](https://dev.twitter.com/cards/getting-started)
- 🛠 Test your page with the [Twitter Card Validator](https://cards-dev.twitter.com/validator)
### Twitter Privacy
If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users. [More about Twitter privacy options](https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have).
```html
```
### 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)
### 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
```
### Facebook Instant Articles
```html
```
- 📖 [Creating Articles - Instant Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate)
- 📖 [Code Samples - Instant Articles](https://developers.facebook.com/docs/instant-articles/reference)
### 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](http://open.mobile.qq.com/api/mqq/index#api:setShareInfo)
### 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/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
### Google Android
```html
```
### Google Chrome
```html
```
### Microsoft Internet Explorer
```html
```
Minimum required xml markup for `browserconfig.xml`:
```xml
```
- 📖 [Browser configuration schema reference](https://msdn.microsoft.com/en-us/library/dn320426.aspx)
## 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)
## 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
- 🇮🇩 [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)
- 🇷🇺 [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
[](https://creativecommons.org/publicdomain/zero/1.0/)