Update metadata for HTML snippets

2023-05-20 14:29:15 +03:00
parent acd5ca0edf
commit b81dc8ac6b
15 changed files with 28 additions and 13 deletions
--- a/collections/html/head-basics.yaml
+++ b/collections/html/head-basics.yaml
@ -1,5 +1,6 @@
 slug: html/head-basics
 name: HTML Head Basics
+miniName: Head Basics
 featured: true
 snippetIds:
  - html/s/recommended-minimum-head
--- a/collections/html/index.yaml
+++ b/collections/html/index.yaml
@ -0,0 +1,14 @@
+slug: html
+name: HTML Snippets
+shortName: HTML
+topLevel: true
+languageMatcher: html
+featured: true
+splash: tram-car-2.png
+description: >-
+  The HTML snippet collection contains tips, tricks and practical code examples
+  to help you master web development. This collection covers elements, tags,
+  links, forms, tables and more.
+shortDescription: >-
+  Master HTML 5 with this collection of tips, tricks and code examples.
+
--- a/snippets/html/s/8-tips-for-accessible-websites.md
+++ b/snippets/html/s/8-tips-for-accessible-websites.md
@ -3,7 +3,7 @@ title: 8 tips for accessible websites
 shortTitle: Accessibility tips
 type: story
 language: html
-tags: [accessibility,webdev]
+tags: [accessibility,form,link,metadata]
 author: chalarangelo
 cover: accessibility
 excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.
--- a/snippets/html/s/custom-file-download-names.md
+++ b/snippets/html/s/custom-file-download-names.md
@ -3,7 +3,7 @@ title: "Tip: Customize the names of downloadable files"
 shortTitle: Customize the names of downloadable files
 type: tip
 language: html
-tags: [webdev,browser]
+tags: [link]
 author: chalarangelo
 cover: hard-disk
 excerpt: Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.
--- a/snippets/html/s/head-icons.md
+++ b/snippets/html/s/head-icons.md
@ -3,7 +3,7 @@ title: Recommended HTML head icon tags
 shortTitle: HTML favicons template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-3
 excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.
--- a/snippets/html/s/head-links.md
+++ b/snippets/html/s/head-links.md
@ -3,7 +3,7 @@ title: Recommended HTML head links
 shortTitle: HTML head links template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-4
 excerpt: Make your HTML documents more SEO-friendly by including these lines in your `<head>` element.
--- a/snippets/html/s/head-social-tags.md
+++ b/snippets/html/s/head-social-tags.md
@ -3,7 +3,7 @@ title: Recommended social tags for HTML head
 shortTitle: HTML social tags template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-2
 excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.
--- a/snippets/html/s/lazy-loading-images.md
+++ b/snippets/html/s/lazy-loading-images.md
@ -3,7 +3,7 @@ title: "Tip: Lazy load images in HTML"
 shortTitle: Image lazy loading
 type: tip
 language: html
-tags: [webdev,image]
+tags: [image]
 author: chalarangelo
 cover: bridge
 excerpt: Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.
--- a/snippets/html/s/password-autocomplete-suggestion.md
+++ b/snippets/html/s/password-autocomplete-suggestion.md
@ -3,7 +3,7 @@ title: "Tip: Adding autocomplete to a password field"
 shortTitle: Password field autocomplete
 type: tip
 language: html
-tags: [webdev]
+tags: [form]
 author: chalarangelo
 cover: padlocks
 excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields.
--- a/snippets/html/s/prefetching-resources.md
+++ b/snippets/html/s/prefetching-resources.md
@ -3,7 +3,7 @@ title: "Tip: Prefetching resources in the browser"
 shortTitle: Resource prefetching
 type: tip
 language: html
-tags: [webdev,browser]
+tags: [metadata]
 author: chalarangelo
 cover: playing-fetch
 excerpt: Resource prefetching is a great way to improve perceived page speed on your website and requires little effort. Learn how to use it today.
--- a/snippets/html/s/recommended-minimum-head.md
+++ b/snippets/html/s/recommended-minimum-head.md
@ -3,7 +3,7 @@ title: Recommended minimum HTML head
 shortTitle: HTML head template
 type: story
 language: html
-tags: [webdev,browser]
+tags: [metadata,head]
 author: chalarangelo
 cover: boutique-home-office-1
 excerpt: Ensure your HTML documents are properly structured by including these lines in your `<head>` element.
--- a/snippets/html/s/resource-preloading-cheatsheet.md
+++ b/snippets/html/s/resource-preloading-cheatsheet.md
@ -2,7 +2,7 @@
 title: Resource Preloading Cheat Sheet
 type: cheatsheet
 language: html
-tags: [webdev,browser]
+tags: [metadata]
 author: chalarangelo
 cover: folded-map
 excerpt: Preloading content is one of many ways to improve your website's performance.
--- a/snippets/html/s/reversed-list.md
+++ b/snippets/html/s/reversed-list.md
@ -3,7 +3,7 @@ title: "Tip: Create a descending list of numbered items"
 shortTitle: Descending list
 type: tip
 language: html
-tags: [webdev]
+tags: [content]
 author: chalarangelo
 cover: ancient-greek-building
 excerpt: Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.
--- a/snippets/html/s/target-blank.md
+++ b/snippets/html/s/target-blank.md
@ -3,7 +3,7 @@ title: 'Tip: Protect your users from malicious websites when using target="_blan
 shortTitle: 'Safeguarding target="_blank"'
 type: tip
 language: html
-tags: [link,browser,security]
+tags: [link,security]
 author: chalarangelo
 cover: laptop-with-code
 excerpt: Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick.
--- a/snippets/html/s/zooming-accessibility-tips.md
+++ b/snippets/html/s/zooming-accessibility-tips.md
@ -3,7 +3,7 @@ title: Why using maximum-scale can harm your page's accessibility
 shortTitle: Accessibility and maximum-scale
 type: story
 language: html
-tags: [webdev]
+tags: [accessibility,metadata,head]
 author: chalarangelo
 cover: camera-zoom
 excerpt: Using the viewport meta tag incorrectly can harm your website's accessibility. Learn how to prevent problems with this handy guide.