andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Highlight content in some HTML snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2023-05-20 15:36:47 +03:00
parent 004b165b7b
commit bdf55edfb8
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/html/s/image-alt.md
View File

@ -9,7 +9,7 @@ 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.
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">
@ -17,7 +17,7 @@ The `alt` attribute provides alternative information for an image if a user cann
### 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.
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:
@ -29,7 +29,7 @@ In this example, we've tried to describe the image as if we were describing to s
### 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.
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="">