Contact still ends in a dead sentence: "Reach me by email," with nothing to click. This lesson makes it real, and along the way gives you your first look at attributes, extra information a tag carries about itself.
The concept
Here is your page as it stands. Run it:
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
Here is an <a> tag with nothing else added to it. Run it:
"GitHub" looks like plain text. No blue, no underline, and clicking it does nothing. The tag alone does not make a link. Now watch what one small addition does. Run this:
Same tag, same word, but now it is blue, underlined, and it goes somewhere when clicked. The difference is href="https://github.com/octocat", sitting inside the opening tag itself. That is an attribute: a piece of information the tag carries about itself, written as name="value", inside the angle brackets, never in the content.
You have already been carrying two attributes since the document skeleton, without a name for them. lang="en" on <html>. charset="UTF-8" inside <meta>. Same shape as href, sitting quietly in your starter this whole time. Now you know what they are.
The syntax
The link from that demo, in full:
<a href="https://example.com">visible link text</a>href holds the destination, a full external address, like the GitHub link above. That is one example of a wider pattern:
<tagname attribute="value">content</tagname>An attribute lives inside the opening tag, separated from the tag name by a space. It is written as name="value", with the value in quotes. A tag can carry more than one. The closing tag never repeats them. It can also point inside the current page, using # followed by an element's id:
href="#end" does not leave the page. It jumps straight to whichever element carries id="end". id is an attribute too, on the element being jumped to, matching the name after the #.
A minimal working example
<h2>Contact</h2>
<p>Find me on <a href="https://github.com/octocat">GitHub</a> or read my <a href="https://example.com/blog">writing</a>.</p>Two links, two destinations, both carried by the same attribute on the same tag.
Common mistakes
Forgetting href entirely. You write <a>GitHub</a> and move on, the same trap this lesson opened with. It looks like ordinary text: no color, no underline, nothing to click. If a link is not behaving like a link, check whether it has an href at all.
An unquoted value with a space in it. You write href=my page.html with no quotes. The browser reads the address only up to that first space. It treats "page.html" as something else entirely, breaking the link in a way that is hard to spot by eye. Quotes around the value are what tell the browser where it ends.
Text and destination that do not match. You write <a href="https://real-site.com">https://different-site.com</a>, where the visible words promise one address but href points somewhere else. Nothing looks broken; the link works exactly as written. It goes somewhere other than what it claims. Before trusting a link, or publishing one, check that the visible text and the actual href agree.
Try it yourself
Contact still reads as a dead sentence. Give it a real link.
- Run the starting code below. Confirm Contact still says "Reach me by email," with nothing clickable.
- Replace that sentence with one that links to somewhere real: a GitHub profile, a portfolio, any URL that actually exists.
- Run it. Confirm the link text is blue and underlined, the way a real link looks.
- Break it on purpose: delete the
href="..."attribute alone, keeping the<a>and</a>tags in place. Run it, and watch the blue and the underline disappear along with it. Put the attribute back.
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
Contact now leads somewhere real, and you know what an attribute is: information a tag carries inside its own opening tag, lang and charset included. The next lesson adds your photo, and with it, the first tag that has no closing tag at all.