こんにちは、でじぼうです。
HTMLの<body>タグ内で使用するテキスト関連のタグと属性一覧について解説します。テキストの見出しや段落、リンクや強調表示など、さまざまな要素を紹介します。
この記事は下記の方がおすすめ！
- テキスト関連タグってなに？
- <body>タグにはどんな内容を書くの？
bodyタグとは？
<body>タグは、HTML文書の中で実際のコンテンツを指定するタグです。
Webページ上に表示されるテキストや画像、リンクなどのコンテンツは、この＜body>タグの中に記述します。
テキスト関連タグ
<h1>〜<h6> : 見出しタグ
テキストの見出しを定義するために使用します。
<h1>が最も重要で大きな見出しであり、<h6>が最も小さな見出しです。
html
<h1>見出しタグ</h1>
ブラウザ
見出しタグ
<p> : 段落タグ
テキストの段落を作成するために使用します。
html
<p>段落のテキスト1 段落のテキスト2</p>
ブラウザ
段落のテキスト1 段落のテキスト2
<a>: アンカータグ (リンク)
リンクを作成するために使用します。
href属性にリンク先のURLを指定します。
html
<a href=“https://example.com”>リンクテキスト</a>
<span>: インライン要素をグループ化するためのタグ
インライン要素をグループ化してスタイルを適用するために使用します。classやid属性を追加することでスタイリングや操作の対象となる要素を指定できます。
html
<span class=“highlight”>ハイライトされたテキスト</span>
※インライン要素：HTMLでテキストや他の要素を直接配置する要素
<strong>: 太字で強調するためのタグ
テキストを太字で表示して強調するために使用します。
html
<strong>強調されたテキスト</strong>
ブラウザ
強調されたテキスト
<em>: 斜体で強調するためのタグ
テキストを斜体で表示して強調するために使用します。
html
<em>強調されたテキスト</em>
<br>: 改行タグ
テキスト内で改行を行うために使用します。
html
テキストの1行目<br>テキストの2行目
ブラウザ
テキストの1行目
テキストの2行目
HTMLのおすすめ参考書
① 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
初心者向けで実践的なアプローチを採用し、美しいデザインと豊富なイラストで理解しやすく、レスポンシブデザインにも対応しています。プロジェクトベースの学習を通じて実践的なスキルを身につけることができます。
 | 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |
② 詳解HTML&CSS&JavaScript辞典
HTML、CSS、JavaScriptに関する包括的な辞典です。初学者から上級者まで幅広い読者に適しており、実際の開発で必要な知識やテクニックを網羅しています。読みやすく、検索機能も備えているため、必要な情報を迅速に見つけることができますよ。
 | 価格:2,420円 |
③ 教科書では教えてくれないHTML & CSS
デザインの基本原則やモバイルフレンドリーなデザインの作成、クロスブラウザの対応なども解説しています。読者はより実践的なスキルを身につけながら、自分自身のウェブプロジェクトの品質を向上させることができます。
 | 価格:2,992円 |
おわりに
これらのテキスト関連タグと属性を組み合わせて使用することで、テキストの表示やスタイルを制御することができます。
また、CSSやJavaScriptと組み合わせてさらなるカスタマイズや動的な操作も行うことができます。HTMLのテキスト編集を効果的に活用し、魅力的なコンテンツを作成しましょう！
コメント