Webbo3 Frontend Development · Month 1 · Lesson 5

Text, Links, Images and Containers

Learn to use HTML links images lists div span to add formatted text, working navigation and images to a webpage and group content correctly with containers.

You now have a basic webpage, but it's just a blank page with nothing on it. You want to add some content to it, like text, links, and images, but you don't know how. You've seen other websites with nicely formatted text, clickable links, and images, and you want to be able to do the same on your own webpage. You're not sure what elements to use or how to use them to achieve the look and feel you want. By the end of this lesson, you will be able to add formatted text to your webpage, create working links to other pages or websites, and add images to your page. You will also learn how to group your content correctly using containers, so that your webpage looks organized and easy to navigate. You'll be able to create headings, paragraphs, and lists, and make your text bold or italic. You'll also learn how to create links that take users to other pages or websites, and how to add images to your page that are properly sized and aligned. You'll learn all of this by working with real code and creating a webpage that you can see and interact with. You'll start with a simple webpage and add elements to it one by one, seeing how each element affects the overall look and feel of the page. You'll learn what elements to use in different situations, and how to use them to achieve the look and feel you want. By the end of this lesson, you'll have a solid foundation in the basics of webpage layout and content creation, and you'll be ready to move on to more advanced topics.

What you need before starting

Everything from the previous lesson, and the project folder you have been building in. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.

Text

Emphasis and Importance

When you want to add emphasis to text or indicate that some text is important, you might be tempted to use the <b> and <i> tags. However, these tags only change the appearance of the text, they don't provide any meaning to screen readers or other accessibility tools. Instead, you should use the <strong> and <em> tags.

The <strong> tag indicates that the text is important, while the <em> tag indicates that the text should be spoken with emphasis. This difference is important for screen readers, as they can use this information to change the way the text is spoken, making it clearer for the listener.

Example

<p>This is a <strong>very important</strong> message, please read it carefully, especially the <em>important parts</em>.</p>

In this example, the text "very important" is marked as important, while the text "important parts" is marked as emphasized. A screen reader would speak the first phrase in a stronger tone, while the second phrase would be spoken with emphasis.

A common mistake beginners make is using the <b> and <i> tags instead of <strong> and <em>. To spot this mistake, look for any places where you're using <b> or <i> to add emphasis or importance to text, and replace them with <strong> and <em> instead.

Links

Opening Links in a New Tab

Sometimes you want a link to open in a new tab, rather than replacing the current page. To do this, you can add the target attribute to the <a> tag, with the value _blank. However, you should also add the rel attribute with the value noopener to prevent potential security vulnerabilities.

Example

<a href="https://www.example.com" target="_blank" rel="noopener">Visit example.com</a>

In this example, the link will open in a new tab, and the rel attribute helps to prevent potential security issues.

Another common mistake beginners make is not adding the rel attribute when using target="_blank". To spot this mistake, look for any places where you're using target="_blank" without also setting rel="noopener".

When Not to Open Links in a New Tab

While it can be tempting to open all links in a new tab, this can be confusing for users and can make it harder for them to navigate your site. In general, you should only open links in a new tab when the link is to an external site, or when the link is to a resource that the user will want to refer to later, such as a PDF or a document.

A common mistake beginners make is opening all links in a new tab, without considering the user experience. To spot this mistake, think about how the user will interact with your site, and only use target="_blank" when it makes sense for the user's workflow.

Lists

Unordered and Ordered Lists

When we want to list items on a webpage, we use the <ul> or <ol> tags. The <ul> tag is used for unordered lists, which are lists where the order of the items does not matter. The <ol> tag is used for ordered lists, where the order of the items is important.

In both types of lists, we use the <li> tag to represent each item in the list. The <li> tag is a container that holds the content of each list item.

Example of Unordered and Ordered Lists

<ul>
  <li>Mango</li>
  <li>Pineapple</li>
  <li>Orange</li>
</ul>

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to work</li>
</ol>

In this example, we have an unordered list of fruits and an ordered list of daily activities. The unordered list uses the <ul> tag and the ordered list uses the <ol> tag. Each item in both lists is represented by the <li> tag.

A common mistake beginners make is to forget to close the <li> tags. This can cause the list to display incorrectly in the browser. To spot this mistake, look for

tag.

Images

The <img> Tag

To add an image to a webpage, we use the <img> tag. The <img> tag has two important attributes: src and alt. The src attribute specifies the URL of the image file, and the alt attribute specifies the text that should be displayed if the image cannot be loaded.

Why alt is Not Optional

The alt attribute is not optional because it provides a way for users who cannot see the image to understand what the image is about. This is especially important for users who are blind or have low vision, and for users who have a slow internet connection and cannot load the image.

Example of the <img> Tag

<img src="image.jpg" alt="A picture of a sunset">

In this example, the <img> tag is used to add an image to the webpage. The src attribute specifies the URL of the image file, which is "image.jpg". The alt attribute specifies the text that should be displayed if the image cannot be loaded, which is "A picture of a sunset".

A common mistake beginners make is to forget to include the alt attribute. This can cause problems for users who cannot see the image, and it can also cause problems for search engines that try to index the image. To spot this mistake, look for <img> tags that do not have an alt attribute.

Another common mistake is to use a file path that is not correct. For example, if the image file is in a folder called "images", the src attribute should be "images/image.jpg", not just "image.jpg". To spot this mistake, check the file path and make sure it is correct.

Links with the Anchor Tag

Introduction to the Anchor Tag

The anchor tag <a> is used to create links to other web pages, email addresses, or even specific parts of the current page. It has a required attribute called href, which specifies the URL of the page the link goes to. For example, Visit Webbo3 Academy will create a link to the Webbo3 Academy website.

Relative vs Absolute Paths

When specifying the href attribute, you can use either a relative or an absolute path. An absolute path is the full URL of the page, including the protocol (http or https) and the domain name. For example, https://www.webbo3.academy/about. A relative path, on the other hand, is the path to the page relative to the current page. For example, if you are on the page https://www.webbo3.academy and you want to link to the about page, you can use the relative path /about. A common mistake beginners make is using a relative path when they mean to use an absolute path. This can cause the link to break if the user navigates to a different page on the site. To spot this mistake, look for links that don't start with http or https.

Generic Containers

Introduction to Div and Span

Div and span are two generic container elements that can be used to group other elements together. The main difference between them is how they display their contents. A div is a block-level element, which means it starts on a new line and takes up the full width of its parent element. A span, on the other hand, is an inline element, which means it does not start on a new line and only takes up as much width as its contents.

Block vs Inline Elements

Block elements, like div, are useful for creating separate sections of content, such as paragraphs or headers. Inline elements, like span, are useful for highlighting or styling specific parts of a sentence. For example, you might use a span to make a word or phrase bold or italic. Here is an example of how you might use div and span:

<div>
  This is a block-level element.
  It starts on a new line and takes up the full width.
  <span>This is an inline element.</span>
  It does not start on a new line and only takes up as much width as its contents.
</div>
<div>
  This is another block-level element.
  <span>It can contain <span>multiple</span> inline elements.</span>
</div>

In this example, the div elements are used to create separate sections of content, and the span elements are used to highlight specific parts of the text. A common mistake beginners make is using a span when they mean to use a div, or vice versa. To spot this mistake, look for elements that are not displaying as expected. If a section of content is not starting on a new line when you expect it to, you may be using a span instead of a div. If a word or phrase is starting on a new line when you don't expect it to, you may be using a div instead of a span.

Do this now

Extend your existing webpage with a navigation list of three links, one external link that opens in a new tab, and one image with meaningful alt text. This task should take you around 20-30 minutes to complete, depending on your familiarity with the concepts.

1. Create a new unordered list in your HTML file, and add three list items. Each list item should contain a link to a different section of your webpage or to an external webpage.
2. Make one of the links external, and add the attribute to make it open in a new tab. Remember to include the protocol (http or https) in the URL.
3. Add an image to your webpage. The image should have a meaningful alt text that describes its content.
4. Save your HTML file and open it in a browser to verify that everything is working as expected.

Be careful not to make common mistakes such as forgetting to close tags, or using the wrong attribute for the external link. Also, make sure the image file is in the same directory as your HTML file, or provide the correct path to the image.

How to know you got it right

To verify that you have completed the task correctly, go through the following checklist:

• Your webpage has a navigation list with three links.
• One of the links opens in a new tab when clicked.
• The image is displayed correctly on the webpage, and the alt text is meaningful.
• When you hover over the links, the cursor changes to a pointing hand.
• When you view the image properties or hover over it, you can see the alt text.

If all of these conditions are met, then you have successfully extended your webpage with a navigation list, an external link, and an image with meaningful alt text.

Common mistakes

• Forgetting to close tags: It looks like <p>This text is not closed, why it happens is due to carelessness, and the fix is to always close tags with </p>.
• Using incorrect link syntax: It looks like <a>https://www.example.com</a>, why it happens is due to misunderstanding of the href attribute, and the fix is to use <a href="https://www.example.com">Example</a>.
• Not specifying image dimensions: It looks like <img src="image.jpg">, why it happens is due to not understanding the importance of image sizing, and the fix is to use <img src="image.jpg" width="400" height="300"> or CSS styling.
• Not using alt text for images: It looks like <img src="image.jpg">, why it happens is due to overlooking accessibility, and the fix is to use <img src="image.jpg" alt="Description of the image"> to provide alternative text.

Questions students ask

• What is the purpose of the alt attribute in images? The alt attribute provides alternative text for images, helping screen readers and search engines understand the content of the image.
• How do I make my links open in a new tab? To make links open in a new tab, use the target attribute with the value "_blank", like this: <a href="https://www.example.com" target="_blank">Example</a>.
• Can I use any file name for my images? No, it's best to use descriptive and simple file names with extensions like .jpg, .png, or .gif, avoiding special characters and spaces for easier reference and compatibility.

Next lesson: Semantic HTML: Writing Markup That Means Something.