Skills and links

Add skills as an ordered list and social links as external links.

Skills list and external link

The contact list is ready. Now comes skills and an external link. You'll write skills as an ordered list (<ol>); order matters because you start with your strongest skill.

Then you'll add a portfolio link. It points to an external site and opens in a new tab with target="_blank". rel="noopener" is added for security.

Absolute URL and rel=noopener

An external link's href value starts with a full URL: https://www.github.com/. This is an absolute URL; it contains the full path including the server name.

target="_blank" opens the link in a new tab. But the new tab can reach the old page through window.opener; this is a security risk. rel="noopener" cuts that access. Modern browsers protect automatically, but writing it is still good practice.

Exercise Add a skills list and an external link

Take the body with the contact list from the previous step. After <ul>, add an <ol> with at least 2 <li> items (your skills). After <ol>, add an <a> element: href with an https:// absolute URL, plus target="_blank" and rel="noopener noreferrer" attributes.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alex York - Business card</title>
  </head>
  <body>
    <h1>Alex York</h1>
    <h2>Front-end developer</h2>
    <ul>
      <li><a href="mailto:alex.york@yorkstudio.com">Email</a></li>
      <li><a href="tel:+15551234567">Phone</a></li>
    </ul>
    <ol>
      <li>HTML and CSS</li>
      <li>JavaScript</li>
      <li>Accessibility</li>
    </ol>
    <a href="https://www.github.com/" target="_blank" rel="noopener noreferrer">My portfolio</a>
  </body>
</html>

Test yourself

Which target value opens a link in a new tab?
- target="_self"
- target="_parent"
- target="_top"
- target="_blank"
Show answer

target="_blank" — Correct. target="_blank" opens the link in a new tab.

Complete the rel value for security

<a href="https://www.github.com/" target="_blank" rel="____">My portfolio</a>

Show answer

<a href="https://www.github.com/" target="_blank" rel="noopener noreferrer">My portfolio</a>

Match each attribute to its meaning

href

Link address
target

Where it opens
rel

Relation and security
id

In-page anchor target

Next lesson: Project final - Business card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies