【効果的なテキストとリンクの作成】初心者向けHTMLホームページ作成ガイド　Chapter2 テキストとリンクの作成

テキストとリンクは、ウェブページ作成において非常に重要な要素です。魅力的なテキストの表現や適切なリンク設定は、ユーザ体験の向上や検索エンジンでの可視性の向上につながります。しかし、初心者の方にとってはテキストの作成方法やリンクの設定が難しく感じるかもしれません。

この章では、テキストの作成とリンクの作成について詳しく解説します。また、内部/外部リンクの作成方法について、初心者の方でも理解しやすいよう、具体的な手法とSEOへの意識を交えながら進めていきます。

・テキストの作成や装飾方法がよくわからない。どうやって見出しや強調表示を行えばいいのか迷っている。
・リンクの作成方法や内部・外部へのリンク設定が難しそうで不安だ。

このブログの対象者
　・ウェブデザインやHTMLに興味を持っている初心者の方
　・ホームページ作成に関心がある方
　・SEOに関心のあるコンテンツ制作者

リンク

Contents

テキストの書き方と装飾方法
ハイパーリンクの作成と内部・外部へのリンク方法
リンクのアクセシビリティとSEOへの影響
まとめ

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

テキストの書き方と装飾方法

HTMLでは、さまざまなタグを使用してテキストを作成します。例えば、見出しを作成するには<h1>〜<h6>のタグを使用します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
</head>
<body>
    <h1>これは見出し1です</h1>
    <h2>これは見出し2です</h2>
    <strong>太字</strong>
    <em>斜体</em>
    <u>下線</u>
</body>
</html>

テキストの装飾方法として、太字 (<strong>),斜体(<em>), 下線(<u>)タグなどがあります。
Go liveで実行すると下記のように見出しh1, h2, 太字、斜体、下線が表示されます。

ハイパーリンクの作成と内部・外部へのリンク方法

リンクの作成には、<a>タグを使用します。リンクのURLはhref属性に指定します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
</head>
<body>
    <a href="https://example.com">サンプルリンク</a>
    <h2 id="section1">セクション1</h2>
    <p>...</p><p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <a href="#section1">セクション1へ戻る</a>
</body>
</html>

内部リンクを作成するには、リンク先のセクションにid属性を追加し、そのidをリンクのhref属性に指定します。こちらでLive serverを起動すると、下記のようになり、セクション1へ戻るの内部リンクを押すと、h2タグのidで指定された”section1″、セクション1に戻るようになります。

外部リンクを作成する場合も<a>タグとhref属性を使用し、外部のURLを指定します。

 <a href="https://example.com">外部サンプルへのリンク</a>

リンクのアクセシビリティとSEOへの影響

リンクのアクセシビリティとSEOへの影響を考慮するために、以下のポイントに気を付けましょう:

リンクのテキストは説明的でわかりやすいものにすることが重要です。
title属性を使用して、ツールチップのテキストを提供することで、追加の説明や補足情報を提供できます。
内部リンクを作成する際には、アンカーテキストを具体的かつ説明的にすることが重要です。リンクの目的やリンク先の内容を正確に伝えましょう。
※アンカーテキストとは、 HTMLタグのa要素のhref属性（アンカータグ）でマークアップしたリンク付きのテキスト

例えば、以下のようにアンカーテキストを設定することで、リンクの意図を明確にすることができます:ここでは、アンカーテキストを設定した、クリックすると、idを設定した、section1 or section2 or section3の内部リンクに移動することができます。

<body>
    <nav>
        <ul>
            <li><a href="#section1">セクション1: HTMLの基礎</a></li>
            <li><a href="#section2">セクション2: CSSの応用</a></li>
            <li><a href="#section3">セクション3: レスポンシブデザイン</a></li>
        </ul>
    </nav>
</body>