Add 2 new HTML questions

snippets/html/s/alt-vs-title.md

@@ -0,0 +1,20 @@
+---
+title: What is the difference between alt and title?
+shortTitle: Difference between alt and title
+type: question
+language: html
+tags: [image]
+cover: stars-n-snow
+excerpt: Learn the difference between the `alt` and `title` attributes on images in HTML.
+dateModified: 2023-07-02T05:00:00-04:00
+---
+
+As mention in the [previous article](/html/s/image-alt), the `alt` attribute provides alternative information for an image if a user cannot view it. When an image can't be loaded, the browser will display the `alt` text in its place so the user can get an idea of why the image was included.
+
+The `title` attribute, on the other hand, provides additional information about an image. This information is displayed as a tooltip when a user hovers over the image.
+
+```html
+<img src="image.jpg" alt="Alternative text" title="Additional information">
+```
+
+Overall, the `alt` attribute should be specified for all `<img>` elements as it is important for both accessibility and SEO. The `title` attribute, on the other hand, is optional and should only be used when you need to provids additional information about the image.

snippets/html/s/image-alt.md

@@ -0,0 +1,38 @@
+---
+title: What is the purpose of the alt attribute on images?
+shortTitle: Image alt attribute
+type: question
+language: html
+tags: [image,accessibility]
+cover: sailing-alone
+excerpt: Learn how to correctly use the `alt` attribute on images in HTML.
+dateModified: 2023-06-25T05:00:00-04:00
+---
+
+The `alt` attribute provides alternative information for an image if a user cannot view it. This can be due to connectivity issues, browser limitations, HTTP errors, or if the user is using a screen reader. Not providing an `alt` attribute will result in a poor user experience for those who cannot view the image.
+
+```html
+<img src="image.jpg" alt="Alternative text">
+```
+
+### How to write good alt text
+
+The `alt` attribute should be used to describe the image in a way that makes sense to someone who cannot see it. Descriptions must be accurate and concise. Some screen readers are known to cut off descriptions after 125 characters, so it is best to keep descriptions short.
+
+Let's look at an example. Imagine that you want to describe an image of a boat sailing on the ocean. You could use the following `alt` attribute:
+
+```html
+<img src="boat.jpg" alt="A boat sailing on the ocean">
+```
+
+In this example, we've tried to describe the image as if we were describing to someone over the phone. Notice how we didn't use the word "picture" or "image" in the description. Additionally, we didn't simply say "boat" because that doesn't provide enough context.
+
+### What if the image is purely decorative?
+
+If an image is purely decorative, then it is best to leave the `alt` attribute empty. This will tell screen readers to skip over the image.
+
+```html
+<img src="decorative.jpg" alt="">
+```
+
+Notice in this example that we still included the `alt` attribute, but we left it empty. This is different from not including the `alt` attribute at all. If you don't include the `alt` attribute, then screen readers will read the image's file name instead.