もじゃもじゃラボ/HTML超入門！押さえておきたいマークアップの基本/タグの種類/テキスト
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

テキスト

HTML超入門！押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
 
このチャプターの目次

テキスト

単語、行または任意の文字列に意味づけをするタグです。

a

用途ハイパーリンク
書式サンプルソース参照
インターネットが普及した要因の一つとして、非常に重要な役割を果たしています。元々、HTMLは論文などをインターネット上で公開するために生まれたと言われています。aタグにより、従来の紙の論文では実現不可能だったことができるようになりました。文書同士を関連付けることができ、ホームページ同士をつなげることができます。
aタグの構造を少し解説しておきましょう。aタグでは、hrefという属性を使います。href属性の値にクリックした時に開くページのファイル名を記述します。リンクの文言はaタグの中身（Content）に書きます（開始タグと終了タグの間ですね）。この例では「トップへ」の部分になります。
プラウザに表示すると、トップへの部分が下線付きで表示されます。
ここをクリックするとリンク先のファイルが開きます。

サンプルコード

  • 同じディレクトリ内にあるファイルへのリンク
  • 外部サイトページへのリンク
      • href属性の値をURL形式にします。 ここでは、Googleのページにリンクしています。
  • ページ内リンク
      • 同じページ内の特定の部分にリンクすることも可能です。以下はサンプルの一部抜粋です。
      リンク先のsectionタグの箇所には、id属性を使います。10行目のsectionタグの部分を見てください。値にはこのページ内で一意となるidを入れます。ここでは、第4章なのでsection4としました。aタグのhref属性には#id値を入れてください（7行目を見てください）。section4の前に#という文字が入っています。id属性の値であるということを示しています。
      #が特定のIDを持つ要素を指します。ここ以外でも使用されるので、覚えておいてください。
      サンプルの全体像はこちらになります。

strong

用途強調・強い重要性
書式
強調です。重要なキーワードなどを強調したい場合に使用します。

span

用途範囲の定義
書式サンプルソース参照
特定の範囲の文字列をまとめるためのタグです。文書構造としての意味はありません。属性と合わせて使います。
9行目の段落の中に、lang属性を使ったspanタグでマークアップされている部分があります。その部分は、「Bonjuour」という言葉はフランス語であることを意味しています。
spanタグに文書構造の意味はありませんが、これは、読み上げ機能などへの影響を考慮したような例となります。2行目のHTML要素のlang属性にはjaが指定されているので、このドキュメントは日本語で書かれたものですよ、という設定がされています。Bonjourの読み上げがおかしくならないように、「この部分だけはフランス語なんだよ」と伝えていることになります。
同じ綴りでも言語によって発音が異なる場合があるため、「どの国の言葉か」を明確にした丁寧なコンテンツです。