But an <a> tag alone doesn't do anything. We need the href attribute, which stands for Hypertext Reference. This tells the browser where to go when clicked.

<a href="https://example.com">

Step 3: Video

Now we add the link text that users will see and click. This text should be descriptive and meaningful, not just 'click here'.

<a href="https://example.com">Visit Example</a>

Step 4: Video

Let's see how it looks in the browser. The link appears as blue, underlined text that users can click to navigate.

<a href="https://example.com">Visit Example</a>

Step 5: Video

For external links that open in a new tab, we use target='_blank' and always include rel='noopener noreferrer' for security.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in New Tab</a>

Step 6: Exercise

Checkpoint: Which attribute is required for a link to actually navigate somewhere?

<a href="https://example.com">Visit Example</a>

Step 7: Video

Excellent. Remember, href is the heart of every link. Without it, the anchor tag is just a placeholder with no functionality.

<a href="https://example.com">Visit Example</a>

Step 8: Video

Now it's your turn. Links are simple but powerful. Complete the challenges below to master the Anchor tag!

tags.html

1 / 8

12345

🏷️

Tutor:Links connect the web. Every link starts with the <a> tag. This creates a clickable element that navigates users to another page or resource.

Concept 1: The Anchor Tag

The <a> tag is used to create hyperlinks. The most important attribute is href.

System Check

What does 'href' stand for?

Hypertext ReferenceHigh Resolution FileHome ReferenceHyperlink Refined

Community Holo-Net

Showcase Your Hierarchy

ACTIVE

Built a complex document structure? Share your semantic HTML examples.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Tags & Semantics

Pascual Vila

Frontend Instructor // Code Syllabus

HTML is not just about putting text on a screen; it is about giving that text meaning. This is what we call Semantic HTML.

The HREF Attribute

The <href> to <h6>. The The href attribute is required for a link to function. It specifies the destination URL, whether it's another webpage, a file, an email address, or an anchor on the same page. is the most important tag on the page. You should usually have only one h1 per page, describing the main topic.

Target and Security

The target="_blank" attribute opens links in a new tab. However, for security reasons, you should always include rel="noopener noreferrer" to prevent the new page from accessing the window.opener property.

Accessibility

Screen readers announce links to users. Always use descriptive link text that makes sense out of context. Avoid generic phrases like "click here" or "read more" without additional context.

View Full Transcript+

This section contains the full detailed transcript of the video lessons for accessibility purposes and quick review. It covers the hierarchy of H1-H6, the concept of block vs inline elements (conceptually), and the specific usage of void elements like br and hr.

Glossary

<a> (Anchor): The HTML element used to create hyperlinks and navigate between pages.
href (Hypertext Reference): The required attribute that specifies the destination URL of the link.
target="_blank": Opens the linked document in a new browser tab or window.
rel="noopener noreferrer": Security attributes that prevent the new page from accessing the opener window and hide the referrer information.