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