├── .github
└── FUNDING.yml
└── README.md
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [joshbuchea]
4 | # patreon: # Replace with a single Patreon username
5 | # open_collective: # Replace with a single Open Collective username
6 | # ko_fi: # Replace with a single Ko-fi username
7 | # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | # liberapay: # Replace with a single Liberapay username
10 | # issuehunt: # Replace with a single IssueHunt username
11 | # otechie: # Replace with a single Otechie username
12 | # custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🤯 HEAD
2 |
3 | > A simple guide to HTML `` elements
4 |
5 | [](https://github.com/joshbuchea/HEAD/graphs/contributors)
6 | [](https://creativecommons.org/publicdomain/zero/1.0/)
7 | [](https://hachyderm.io/@joshbuchea)
8 |
9 | ## Table of Contents
10 |
11 | - [Recommended Minimum](#recommended-minimum)
12 | - [Elements](#elements)
13 | - [Meta](#meta)
14 | - [Link](#link)
15 | - [Icons](#icons)
16 | - [Social](#social)
17 | - [Facebook Open Graph](#facebook-open-graph)
18 | - [Twitter Card](#twitter-card)
19 | - [Twitter Privacy](#twitter-privacy)
20 | - [Schema.org](#schemaorg)
21 | - [Pinterest](#pinterest)
22 | - [Facebook Instant Articles](#facebook-instant-articles)
23 | - [OEmbed](#oembed)
24 | - [QQ/Wechat](#qqwechat)
25 | - [Browsers / Platforms](#browsers--platforms)
26 | - [Apple iOS](#apple-ios)
27 | - [Google Android](#google-android)
28 | - [Google Chrome](#google-chrome)
29 | - [Microsoft Internet Explorer](#microsoft-internet-explorer)
30 | - [Browsers (Chinese)](#browsers-chinese)
31 | - [360 Browser](#360-browser)
32 | - [QQ Mobile Browser](#qq-mobile-browser)
33 | - [UC Mobile Browser](#uc-mobile-browser)
34 | - [App Links](#app-links)
35 | - [Other Resources](#other-resources)
36 | - [Related Projects](#related-projects)
37 | - [Other Formats](#other-formats)
38 | - [Translations](#-translations)
39 | - [Contributing](#-contributing)
40 | - [Contributors](#contributors)
41 | - [Author](#-author)
42 | - [License](#-license)
43 |
44 | ## Recommended Minimum
45 |
46 | Below are the essential elements for any web document (websites/apps):
47 |
48 | ```html
49 |
50 |
51 |
56 | Page Title
57 | ```
58 |
59 | `meta charset` - defines the encoding of the website, `utf-8` is the standard
60 |
61 | `meta name="viewport"` - viewport settings related to mobile responsiveness
62 |
63 | `width=device-width` - use the physical width of the device (great for mobile!)
64 |
65 | `initial-scale=1` - the initial zoom, 1 means no zoom
66 |
67 | **[⬆ back to top](#table-of-contents)**
68 |
69 | ## Elements
70 |
71 | Valid `` elements include `meta`, `link`, `title`, `style`, `script`, `noscript`, and `base`.
72 |
73 | These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.
74 |
75 | ```html
76 |
81 |
82 |
83 |
84 | Page Title
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
96 |
97 |
98 |
99 |
102 |
105 | ```
106 |
107 | **[⬆ back to top](#table-of-contents)**
108 |
109 | ## Meta
110 |
111 | ```html
112 |
117 |
118 |
119 |
120 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 | ```
185 |
186 | - 📖 [Meta tags that Google understands](https://support.google.com/webmasters/answer/79812?hl=en)
187 | - 📖 [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions)
188 | - 📖 [ICBM on Wikipedia](https://en.wikipedia.org/wiki/ICBM_address#Modern_use)
189 | - 📖 [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)
190 |
191 | **[⬆ back to top](#table-of-contents)**
192 |
193 | ## Link
194 |
195 | ```html
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 | ```
264 |
265 | - 📖 [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)
266 |
267 | **[⬆ back to top](#table-of-contents)**
268 |
269 | ## Icons
270 |
271 | ```html
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 | ```
284 |
285 | - 📖 [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/)
286 | - 📖 [Creating Pinned Tab Icons](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)
287 | - 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)
288 | - 📖 [Icons & Browser Colors](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/)
289 |
290 | **[⬆ back to top](#table-of-contents)**
291 |
292 | ## Social
293 |
294 | ### Facebook Open Graph
295 | > 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)
296 |
297 | ```html
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 | ```
309 |
310 | - 📖 [Open Graph protocol](http://ogp.me/)
311 | - 🛠 Test your page with the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
312 |
313 | ### Twitter Card
314 | > 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)
315 |
316 | ```html
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 | ```
326 |
327 | - 📖 [Getting started with cards — Twitter Developers](https://dev.twitter.com/cards/getting-started)
328 | - 🛠 Test your page with the [Twitter Card Validator](https://cards-dev.twitter.com/validator)
329 |
330 | ### Twitter Privacy
331 | 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).
332 | ```html
333 |
334 |
335 | ```
336 |
337 | ### Schema.org
338 |
339 | ```html
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 | ```
348 |
349 | **Note:** These meta tags require the `itemscope` and `itemtype` attributes to be added to the `` tag.
350 |
351 | - 📖 [Getting Started - schema.org](https://schema.org/docs/gs.html)
352 | - 🛠 Test your page with the [Rich Results Test](https://search.google.com/test/rich-results)
353 |
354 | ### Pinterest
355 |
356 | 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.
357 |
358 | ```html
359 |
360 | ```
361 |
362 | ### Facebook Instant Articles
363 |
364 | ```html
365 |
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 | ```
374 |
375 | - 📖 [Creating Articles - Instant Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate)
376 | - 📖 [Code Samples - Instant Articles](https://developers.facebook.com/docs/instant-articles/reference)
377 |
378 | ### OEmbed
379 |
380 | ```html
381 |
384 |
387 | ```
388 |
389 | - 📖 [oEmbed format](https://oembed.com/)
390 |
391 | ### QQ/Wechat
392 |
393 | Users share web pages to qq wechat will have a formatted message
394 |
395 | ```html
396 |
397 |
398 |
399 | ```
400 | - 📖 [Code Format Docs](http://open.mobile.qq.com/api/mqq/index#api:setShareInfo)
401 |
402 | **[⬆ back to top](#table-of-contents)**
403 |
404 | ## Browsers / Platforms
405 |
406 | ### Apple iOS
407 |
408 | ```html
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 | ```
434 |
435 | - 📖 [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
436 |
437 | ### Google Android
438 |
439 | ```html
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 | ```
450 |
451 | ### Google Chrome
452 |
453 | ```html
454 |
455 |
456 |
457 |
458 | ```
459 |
460 | ### Microsoft Internet Explorer
461 |
462 | ```html
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 | ```
472 |
473 | Minimum required xml markup for `browserconfig.xml`:
474 |
475 | ```xml
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 | ```
488 |
489 | - 📖 [Browser configuration schema reference](https://msdn.microsoft.com/en-us/library/dn320426.aspx)
490 |
491 | **[⬆ back to top](#table-of-contents)**
492 |
493 | ## Browsers (Chinese)
494 |
495 | ### 360 Browser
496 |
497 | ```html
498 |
499 |
500 | ```
501 |
502 | ### QQ Mobile Browser
503 |
504 | ```html
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 | ```
514 |
515 | ### UC Mobile Browser
516 |
517 | ```html
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 | ```
539 |
540 | - 📖 [UC Browser Docs](https://www.uc.cn/download/UCBrowser_U3_API.doc)
541 |
542 | **[⬆ back to top](#table-of-contents)**
543 |
544 | ## App Links
545 |
546 | ```html
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 | ```
560 |
561 | - 📖 [App Links](https://developers.facebook.com/docs/applinks)
562 |
563 | **[⬆ back to top](#table-of-contents)**
564 |
565 | ## Other Resources
566 |
567 | - 📖 [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md)
568 | - 📖 [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md)
569 |
570 | **[⬆ back to top](#table-of-contents)**
571 |
572 | ## Related Projects
573 |
574 | - [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom package for `HEAD` snippets
575 | - [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - Sublime Text package for `HEAD` snippets
576 | - [head-it](https://github.com/hemanth/head-it) - CLI interface for `HEAD` snippets
577 | - [vue-head](https://github.com/ktquez/vue-head) - Manipulating the meta information of the `HEAD` tag for Vue.js
578 |
579 | **[⬆ back to top](#table-of-contents)**
580 |
581 | ## Other Formats
582 |
583 | - 📄 [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md)
584 |
585 | **[⬆ back to top](#table-of-contents)**
586 |
587 | ## 🌐 Translations
588 |
589 | - 🇮🇩 [Bahasa](https://github.com/rijdz/HEAD)
590 | - 🇧🇷 [Brazilian Portuguese](https://github.com/Webschool-io/HEAD)
591 | - 🇨🇳 [Chinese (Simplified)](https://github.com/Amery2010/HEAD)
592 | - 🇩🇪 [German](https://github.com/Shidigital/HEAD)
593 | - 🇮🇹 [Italian](https://github.com/Fakkio/HEAD)
594 | - 🇯🇵 [Japanese](https://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html)
595 | - 🇰🇷 [Korean](https://github.com/Lutece/HEAD)
596 | - 🇷🇺 [Russian/Русский](https://github.com/Konfuze/HEAD)
597 | - 🇪🇸 [Spanish](https://github.com/alvaroadlf/HEAD)
598 | - 🇹🇷 [Turkish/Türkçe](https://github.com/mkg0/HEAD)
599 |
600 | **[⬆ back to top](#table-of-contents)**
601 |
602 | ## 🤝 Contributing
603 |
604 | **Open an issue or a pull request to suggest changes or additions.**
605 |
606 | ### Guide
607 |
608 | The **HEAD** repository consists of two branches:
609 |
610 | #### 1. `master`
611 |
612 | 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.
613 |
614 | Please follow these steps for pull requests:
615 |
616 | {:.list-style-default}
617 | - Modify only one tag, or one related set of tags at a time
618 | - Use double quotes on attributes
619 | - Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional
620 | - Consider including a link to documentation that supports your change
621 |
622 | #### 2. `gh-pages`
623 |
624 | 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.
625 |
626 | 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.
627 |
628 | ## 🌟 Contributors
629 |
630 | Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors) 🤩
631 |
632 | ## 👤 Author
633 |
634 | **Josh Buchea**
635 |
636 | - GitHub: [@joshbuchea](https://github.com/joshbuchea)
637 | - Mastodon: [@joshbuchea@hachyderm.io](https://hachyderm.io/@joshbuchea)
638 |
639 | ## 💛 Support
640 |
641 | If this project was helpful for you or your organization, please considering supporting my work directly:
642 |
643 | - 💛 [Sponsor me on GitHub](https://github.com/sponsors/joshbuchea)
644 | - ⭐️ [Star this project on GitHub](https://github.com/joshbuchea/HEAD)
645 | - 🐙 [Follow me on GitHub](https://github.com/joshbuchea)
646 | - 🐘 [Follow me on Mastodon](https://hachyderm.io/@joshbuchea)
647 |
648 | Everything helps, thanks! 🙏
649 |
650 | — Josh
651 |
652 | ## 📝 License
653 |
654 | [](https://creativecommons.org/publicdomain/zero/1.0/)
655 |
656 | **[⬆ back to top](#table-of-contents)**
657 |
--------------------------------------------------------------------------------