Highlight content in some HTML snippets

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

@@ -9,9 +9,9 @@ excerpt: Learn the difference between the `alt` and `title` attributes on images
 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.
+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.
+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">

snippets/html/s/image-alt.md

@@ -9,15 +9,15 @@ 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">
 ```
 
 ### 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="">

snippets/html/s/lazy-loading-images.md

@@ -10,7 +10,7 @@ excerpt: Did you know you can use a native HTML attribute to add lazy load to im
 dateModified: 2021-06-12T19:30:41+03:00
 ---
 
-Images are nowadays a crucial part of any webpage, but, as with most things, they come at a cost. Images are usually a major percentage of a page's load, which is why they make for a great candidate for optimization. The most common technique is that of lazy loading, usually in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view.
+Images are nowadays a crucial part of any webpage, but, as with most things, they come at a cost. Images are usually a major percentage of a page's load, which is why they make for a great candidate for optimization. The most common technique is that of **lazy loading**, usually in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view.
 
 This exact behavior is already part of the HTML standard in the form of the `loading` attribute. All you have to do to reap its benefits is add `loading="lazy"` to any images you want to add lazy loading to:
 

snippets/html/s/target-blank.md

@@ -10,7 +10,7 @@ excerpt: Opening a link in a new tab comes with a security vulnerability that yo
 dateModified: 2021-06-12T19:30:41+03:00
 ---
 
-Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `Window.opener`, which it can then use to alter the linking page's URL via `Window.opener.location` (this is known as tabnabbing).
+Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a **security risk** we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `Window.opener`, which it can then use to alter the linking page's URL via `Window.opener.location` (this is known as **tabnabbing**).
 
 This might be a problem if the external resource is not trustworthy, might have been hacked, the domain has changed owners over the years etc. There is no guarantee that a third-party resource, no matter how trustworthy, can be actually trusted with our users' security and we, as developers, should always be aware of this risk.