anchor要素とhref属性

リンクとは

href属性

<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>
<a href="../contact.html">Contact</a>
<!-- href = destination URL or path
     Content between tags = clickable text -->
<!-- Without href, a is still valid but not a hyperlink -->

リンクテキストの重要性

<!-- Bad: uninformative -->
<a href="/docs/guide">Click here</a>
<a href="/docs/guide">Read more</a>

<!-- Good: descriptive -->
<a href="/docs/guide">Read the Getting Started Guide</a>

<!-- Screen readers list all links — "click here" is meaningless out of context -->

href値の種類

<a href="https://example.com">External URL</a>
<a href="/page">Root-relative path</a>
<a href="page.html">Relative path</a>
<a href="#section">Fragment (same page)</a>
<a href="mailto:hi@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="javascript:void(0)">JS (avoid this)</a>

メールと電話へのリンク

<a href="mailto:support@example.com">Email Support</a>

<a href="mailto:support@example.com?subject=Hello&body=Hi%20there">
  Email with Subject
</a>

<a href="tel:+15555551234">Call Us: (555) 555-1234</a>
<!-- Tapping tel: links on mobile opens the phone dialer -->

リンクのtitle属性

<a href="/glossary" title="View the full HTML glossary">Glossary</a>
<!-- title appears as a tooltip on hover
     But: not accessible via keyboard or touch — never rely on title alone for critical info -->

リンクのスタイル設定

/* Default link states */
a:link    { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover   { color: red; }
a:focus   { outline: 2px solid blue; } /* keyboard focus */
a:active  { color: red; }

/* Never remove :focus outline — keyboard users need it */

アクティブなリンクと現在のリンク

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
  <a href="/contact">Contact</a>
</nav>
<!-- aria-current="page" tells screen readers this link is the current page -->
<!-- CSS: [aria-current="page"] { font-weight: bold; } -->

hrefのないアンカー

<a>Not a link yet</a>
<!-- No href = no hyperlink, no default pointer cursor, not keyboard-focusable -->

<!-- If you need a clickable element without navigation, use button:
<button onclick="doSomething()">Click Me</button> -->

ブロック要素のラップ

<a href="/products/widget">
  <div class="card">
    <h2>Widget Pro</h2>
    <p>The best widget available.</p>
    <img src="widget.jpg" alt="Widget Pro product image">
  </div>
</a>
<!-- Valid in HTML5 (not in HTML4) -->
<!-- Ensure the link text is still descriptive for screen readers -->

リンクのフォーカスとキーボード操作

確認問題

まとめ：アンカー要素