HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLページにハイパーリンクを挿入する方法を徹底解説

HTMLを使えば、Webページのどこにでも簡単にハイパーリンクを追加できます。社内のチームページや会社概要（アバウト）ページへのリンクはもちろん、テストページへのリンク作成にも活用できます。さらに、外部サイトへのリンクも自由に設定可能です。

ハイパーリンクの基本：<a>タグの使い方

HTMLページでハイパーリンクを作成するには、リンクを定義するための<a>タグと</a>タグを使用します。

  • <a>タグ：ハイパーリンクの開始位置を示します
  • </a>タグ：ハイパーリンクの終了位置を示します

この2つのタグの間に記述したテキストは、すべてハイパーリンクとして機能します。リンク先のURLは、<a href=" "> の形式でhref属性に指定します。

注意点

<a>…</a>タグは、必ず<body>…</body>タグの中に記述してください。headセクション内には配置できません。

HTMLページにハイパーリンクを挿入する方法を徹底解説

サンプルコード

以下のコードを実行すると、HTMLページにハイパーリンクを挿入する動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>Company</h1>
      <p>
         We are a <a href="/about/about_team.htm">team</a> of professionals working
         hard to provide free learning content.
      </p>
   </body>
</html>

この例では、「team」というテキストがリンクになり、クリックすると「/about/about_team.htm」ページへ移動します。このように、サイト内の別ページへ誘導する内部リンクを簡単に実装できます。

表示結果

HTMLページにハイパーリンクを挿入する方法を徹底解説

外部サイトへのリンクを張る場合

外部のWebサイトへリンクする場合は、href属性に完全なURLを指定します。例えば、<a href="https://example.com">のように記述すれば、どのページからでも目的の外部サイトへアクセスできるようになります。

  1. HTMLページで円を描く方法｜CSSのborder-radiusを使った簡単な実装例

    HTMLページ上に円を描くには、主に「SVG」「Canvas」「CSS」の3つの方法があります。中でも最も手軽なのが、CSSのborder-radiusプロパティを使う方法です。要素の幅と高さを同じ値にし、border-radiusをその半分（または50%）に設定するだけで、簡単に正円を描くことができます。CSSで円を描くサンプルコード以下のコードを実行すると、青い円が画面に表示されます。ぜひ実際に試してみてください。<!DOCTYPE html> <html>    <head>     

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま