diff --git a/collections/html/head-basics.yaml b/collections/html/head-basics.yaml index bad92d942..8e87a83c4 100644 --- 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 diff --git a/collections/html/index.yaml b/collections/html/index.yaml new file mode 100644 index 000000000..5dd7ae876 --- /dev/null +++ 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. + diff --git a/snippets/html/s/8-tips-for-accessible-websites.md b/snippets/html/s/8-tips-for-accessible-websites.md index ec2e02dc7..f22701782 100644 --- 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. diff --git a/snippets/html/s/custom-file-download-names.md b/snippets/html/s/custom-file-download-names.md index 891e5b92a..80e496375 100644 --- 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. diff --git a/snippets/html/s/head-icons.md b/snippets/html/s/head-icons.md index b2a33b62b..7969a2bbe 100644 --- 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 `` element. diff --git a/snippets/html/s/head-links.md b/snippets/html/s/head-links.md index 8a4b58ab6..7ab345b60 100644 --- 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 `` element. diff --git a/snippets/html/s/head-social-tags.md b/snippets/html/s/head-social-tags.md index 3c9b65e9f..ebcfbd798 100644 --- 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 `` element. diff --git a/snippets/html/s/lazy-loading-images.md b/snippets/html/s/lazy-loading-images.md index a35b29647..89b7be592 100644 --- 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. diff --git a/snippets/html/s/password-autocomplete-suggestion.md b/snippets/html/s/password-autocomplete-suggestion.md index 3c7e0a634..abc5883cb 100644 --- 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. diff --git a/snippets/html/s/prefetching-resources.md b/snippets/html/s/prefetching-resources.md index 0ebe0252a..0dab28b22 100644 --- 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. diff --git a/snippets/html/s/recommended-minimum-head.md b/snippets/html/s/recommended-minimum-head.md index 1adf87622..c5fbb572d 100644 --- 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 `` element. diff --git a/snippets/html/s/resource-preloading-cheatsheet.md b/snippets/html/s/resource-preloading-cheatsheet.md index d49765cd3..37541fc01 100644 --- 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. diff --git a/snippets/html/s/reversed-list.md b/snippets/html/s/reversed-list.md index ebe352de7..1e2c08bbe 100644 --- 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. diff --git a/snippets/html/s/target-blank.md b/snippets/html/s/target-blank.md index 85970145c..f0051bccf 100644 --- 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. diff --git a/snippets/html/s/zooming-accessibility-tips.md b/snippets/html/s/zooming-accessibility-tips.md index 67f73044c..d75024966 100644 --- 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.