Young People and MS

For a long time, I had been saying "Alt tag" instead of "Alt text".

You too huh?

As well as this, I never knew how to write image alt text.

I used to just keyword stuff the crap out of every image on the page!

This, of course, is not the best way to go about it.

This guide aims at helping you understand what image alt text is, it's purpose and the best practices for writing proper image alt text, consistently.

Let's get into it.

What is Alt Text?

Alt text, which is short for "Alternative Text", is the correct term for "Alt Tag".

Alt text is an HTML or XHTML attribute, used to describe the appearance and function of an element on a page.

You are probably wondering why I said "element", instead of "image", right?

This is because alt text is not unique only to images.

It is also required for area tags, optionally for input tags and previously applet tags, which are now deprecated.

Why is Alt Text important for images?

There are three main reasons why alt text for images is important. They include:

  1. Visually impaired users using screen readers will be able to hear the alt text of an image.
  2. Alt tags are displayed if the image file can't load.
  3. Alt tags provide context for search engine crawlers

Every image should ideally have an alt attribute, but it does not necessarily need to contain text. It can be an empty or null attribute.

When should Alt Text be left blank for an image?

Sometimes it's actually better not to include alt text. Though this depends on the type of image. Here are some types of images why you should consider leaving the alt text blank for.

Images used for design

Images used for styling such as lines, borders, spacers etc can be nulled (left empty) as their only purpose is design.

Example:
Code Snippet:
<img src="decorative-line.png" alt="" />

Sometimes it might be better to use a different element instead of a decorative image. For example, instead of using the image of a line as a spacer, you could use the <hr> tag.

Images that are used as part of a text link

You don't need to add alt text when using an image as part of a text link because it does not add any extra information.

Example:

Learn more about Chihuahuas
Code Snippet:
<a href="/chihuahuas.html">
<img src="chihuahua.png" alt="" />
Learn more about Chihuahuas
</a>

Images that are described by adjacent text

Images that are described by adjacent don't need alt text as it would be repetitive.

Example:

Sleeping Lion: Sleeping is
something a lion does around 18
to 20 hours a day!
Code Snippet:
<p> 
<img src="sleeping-lion.jpg" alt="" />
Sleeping Lion: Sleeping is something 
a lion does around 
18 to 20 hours a day! 
</p>

Images used solely for the purpose of making a page more visually appealing

Example:

Make sure you check out the London Eye when you visit London!
Code Snippet:
<p> 
<img src="london-eye.png" alt="" />
Make sure you check out the London 
Eye when you visit London! 
</p>

To summarise, if the image does not have a contextual purpose, keep the alt text empty.

How do I write good Alt Text for an Image?

In order to consistently write good alt text for any image, here are some points to consider each time.

  1. Describe the image as accurately but concisely as possible
  2. Include your keywords where naturally possible
  3. Never keyword stuff
  4. If an image is functional, write appropriate alt text
  5. Avoid using "image of"
  6. If the image serves no purpose contextually, use nulled alt text (alt="")

Best Practice for Image Alt Text

What does good alt text for an image look like? Here are some examples:

Sumatran Tiger roaring

Acceptable Alt Text:

<img src="tiger.jpeg" alt="Tiger" </a>

Good Alt Text:

<img src="tiger.jpeg" alt="Tiger roar" />

Better Alt Text:

<img src="tiger.jpeg" alt="Sumatran tiger roaring" />

Tying Boot Lace

Acceptable Alt Text:

<img src="laces.jpeg" alt="lace" </a>

Good Alt Text:

<img src="laces.jpeg" alt="Tying shoe" />

Better Alt Text:

<img src="laces.jpeg" alt="Tying boot laces" />

Image Alt Text: The Definitive Guide

For a long time, I had been saying "Alt tag" instead of "Alt text".

You too huh?

As well as this, I never knew how to write image alt text.

I used to just keyword stuff the crap out of every image on the page!

This, of course, is not the best way to go about it.

This guide aims at helping you understand what image alt text is, it's purpose and the best practices for writing proper image alt text, consistently.

Let's get into it.

What is Alt Text?

Alt text, which is short for "Alternative Text", is the correct term for "Alt Tag".

Alt text is an HTML or XHTML attribute, used to describe the appearance and function of an element on a page.

You are probably wondering why I said "element", instead of "image", right?

This is because alt text is not unique only to images.

It is also required for area tags, optionally for input tags and previously applet tags, which are now deprecated.

Why is Alt Text important for images?

There are three main reasons why alt text for images is important. They include:

  1. Visually impaired users using screen readers will be able to hear the alt text of an image.
  2. Alt tags are displayed if the image file can't load.
  3. Alt tags provide context for search engine crawlers

Every image should ideally have an alt attribute, but it does not necessarily need to contain text. It can be an empty or null attribute.

When should Alt Text be left blank for an image?

Sometimes it's actually better not to include alt text. Though this depends on the type of image. Here are some types of images why you should consider leaving the alt text blank for.

Images used for design

Images used for styling such as lines, borders, spacers etc can be nulled (left empty) as their only purpose is design.

Example:
Code Snippet:
<img src="decorative-line.png" alt="" />

Sometimes it might be better to use a different element instead of a decorative image. For example, instead of using the image of a line as a spacer, you could use the <hr> tag.

Images that are used as part of a text link

You don't need to add alt text when using an image as part of a text link because it does not add any extra information.

Example:

Learn more about Chihuahuas
Code Snippet:
<a href="/chihuahuas.html">
<img src="chihuahua.png" alt="" />
Learn more about Chihuahuas
</a>

Images that are described by adjacent text

Images that are described by adjacent don't need alt text as it would be repetitive.

Example:

Sleeping Lion: Sleeping is
something a lion does around 18
to 20 hours a day!
Code Snippet:
<p> 
<img src="sleeping-lion.jpg" alt="" />
Sleeping Lion: Sleeping is something 
a lion does around 
18 to 20 hours a day! 
</p>

Images used solely for the purpose of making a page more visually appealing

Example:

Make sure you check out the London Eye when you visit London!
Code Snippet:
<p> 
<img src="london-eye.png" alt="" />
Make sure you check out the London 
Eye when you visit London! 
</p>

To summarise, if the image does not have a contextual purpose, keep the alt text empty.

How do I write good Alt Text for an Image?

In order to consistently write good alt text for any image, here are some points to consider each time.

  1. Describe the image as accurately but concisely as possible
  2. Include your keywords where naturally possible
  3. Never keyword stuff
  4. If an image is functional, write appropriate alt text
  5. Avoid using "image of"
  6. If the image serves no purpose contextually, use nulled alt text (alt="")

Best Practice for Image Alt Text

What does good alt text for an image look like? Here are some examples:

Sumatran Tiger roaring

Acceptable Alt Text:

<img src="tiger.jpeg" alt="Tiger" </a>

Good Alt Text:

<img src="tiger.jpeg" alt="Tiger roar" />

Better Alt Text:

<img src="tiger.jpeg" alt="Sumatran tiger roaring" />

Tying Boot Lace

Acceptable Alt Text:

<img src="laces.jpeg" alt="lace" </a>

Good Alt Text:

<img src="laces.jpeg" alt="Tying shoe" />

Better Alt Text:

<img src="laces.jpeg" alt="Tying boot laces" />

How to Search for a Word on a Page

In order to find a word on a page or website, there are several quick options to choose from.

This post will go through these various methods of searching for a word or words on a page.

Let's begin!

How to Search for a Word on a Page using CTRL + F or Command + F.

The quickest and easiest way to search for a word on a website is to use the CTRL + F function.

This is available on all the latest versions of top web browsers, like; Google Chrome, Microsoft Edge, Internet Explorer etc.

  1. Navigate to the page you want
  2. Press CTRL + F simultaneously (Command + F for iOS users)
  3. Enter the word or phrase you want to look for
  4. Hit Enter

Using CTRL + F to find a word on a page

How to Search for a Word on a Page on a Mac with the Menu Bar

If you own a Mac, in addition to using the traditional method of CTRL + F, you can use the Menu bar to find a word or phrase on a website.

  1. Navigate to the page you want to search
  2. Go to the menu bar and go to Edit > Find in This Page
  3. In different versions or browsers, you might see "Find", instead
  4. Enter the word or phrase you are looking for
  5. Hit Enter

Using the Mac Menu Bar to find specific words or phrases on a webpage

How to Search For a Word on a Web Page Using the Browser's Menu

Another method of finding a word or specific phrase on a page is to use the browser's menu directly.

Though, this only works with Windows or Linux.

Unfortunately, with Opera or Safari, you will need to try one of the other options listed in this post.

  1. Go to the page you want to search
  2. Click the "More" icon, which is located in the top-right corner of the browser.
  3. This can be in the form of three dots or lines.
  4. Select Find (or Find in This Page, if applicable)
  5. Type in the word or phrase you are looking for
  6. Press Enter

The above will also work with the mobile version too.

Using the Browser to find words or phrases on a website

How to Search for a Word on a Website Using Google

An excellent way to find words on a website is by using Google.

When I say Google, I don't just mean searching for the word on Google Search.

What I mean is using Google Search Queries.

  1. Go to Google or the address bar of your browser (most automatically search Google when you input text and hit enter)
  2. Enter the website and word you want to find like this: site:domain.com keyword
  3. Hit Enter or Search

Using Google Search Queries to find words on a page

And there you have it.

Let me know in the comments if you know of any other methods to do this!

What is .@ in Twitter?

I have been asked this question a lot and so I thought I should create a short post answering it.

It is fairly simple and therefore this post will be fairly short!

Question: What does .@ mean in Twitter?

Answer:

Using ".@" in Twitter doesn't mean anything.

".@" on Twitter is used as a public reply, as opposed to replying individually to a user, using their @username.

In order to get around this, as well as to make your reply visible to all your followers (not just those in the thread), you need to prefix the tweet with something so it doesn't start with the "@" symbol.

Otherwise, it tries to link to a specific username.

The most common solution became ".@".

That said, any character can be used but people chose to use ".@".

This was probably because it's both easily accessible, as well as the fact that its the smallest symbol on a keyboard.

And that's it!

Did you have any other questions regarding Twitter? Let me know down below!

How to Exit Full Screen on Chrome 2020

If you've happened to activate the full-screen mode in Google Chrome, you may have noticed that both the taskbar and browser toolbars are now missing.

Once you've finally gotten sick of full-screen mode, you then start to panic about how to exit Google Chrome or regain access to the taskbar.

Unfortunately, in order to do this, you need to first exit full-screen in Google Chrome.

However, it is very simple to do and I have detailed the process below!

How to Exit Full Screen in Google Chrome on Windows

Method 1:

  1. Press the F11 key.
  2. You will exit full-screen mode instantly.
  3. Sometimes you'll need to simultaneously press F11 + fn, found at the bottom-left of the keyboard.
  4. To find the F11 key, see below:

Exit Full Screen on Chrome using the F11 Key

Method 2:

  1. While in full-screen mode in Chrome, move the cursor to the top of the screen.
  2. You should see an "X" will appear, which you should click.
  3. You will then exit full-screen mode.
  4. As seen below:

Another way to Exit Full Screen on Google Chrome

How to Exit Full Screen in Google Chrome on Mac

Method 1:

  1. Press simultaneously Command + Shift + F.
  2. You will then exit full-screen mode instantly.
  3. As seen below:

Exit Full Screen on Chrome on Mac using Command + Shift + F Ket

Method 2:

  1. Another way to exit full-screen mode in chrome on a mac is to click the green button with small arrows inside.
  2. As seen below:

Another wat to Exit Full Screen on Chrome on Mac

And that's it!

No matter the device, if you need to exit full-screen mode on either Mac or Windows, you'll know how to do it.

Let me know down below if you have any issues!

How to turn off Google Alerts in 2020

Google Alerts is a great tool for many reasons but it can become quite annoying.

I hate notifications. Well, actually it depends on the type of notification - am I right?

Every day we all spend a great deal of time getting through our inboxes and by setting up Google Alerts, we are adding to this digital clutter.

Last week I finally had had enough and realised I had to turn off Google Alerts, as well as unsubscribe from all the many email lists I had joined over the years.

But it took me a while to actually work out how to stop them - which is why I put together this short guide so that you guys don't have to suffer as I did.

How to turn off Google Alerts

Method 1:

  1. Go to Google Alerts and log in.
  2. Next to the Google Alert that you want to turn off, look for the bin icon next to it.
  3. Clicking it will let you delete the Google Alert itself, as seen below:

You can turn off Google Alerts in the Google Alerts Dashboard

Once you have deleted your Google Alert, you will see the following alert show up at the top:

Method 2:

  1. Log in to the email that you are getting the Google Alerts sent to.
  2. Open one of the Alerts and scroll the bottom of the email.
  3. You should see "Unsubscribe" at the bottom of the alert email, like so:

Unsubscribe from Google Alerts

And that's it!

Two simple methods to stop Google Alerts filling up your inbox!

Luckily for me, I only had a few Google Alerts to cancel.

Nonetheless, deleting these few alerts brought me one step closer to regaining control of my inbox.

Let me know down below if you have any issues!