学習日記#3 HTMLの学習:基礎構文

コメント

  • HTMLファイルに記述があるが、WEBページ上には表示されないようにする機能
  • ページ上には表示されなくなるが、ソースコード上には残ってしまうので開発者ツールで参照することはできる
    • ユーザIDやパスワードといった機密情報に関わることは絶対に記述しないように注意する

構文

<!-- -->

具体例

<!-- <p>コメントアウト</p> -->

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <!-- <p>コメントアウト</p> -->
  <!-- コメントは
  複数行
  でも使用することができる-->
  <!-- コメントの<!-- 入れ子 -->はできない
  入れ子とはコメントの中にコメントが入っていること-->
  <p>コメントアウトしない</p>
</body>
</html>
  • WEBページ
    コメント
    コメント
    コメントアウトと記述されているコンテンツが表示されていないことがわかる。

改行

  • HTMLファイルで改行して記述してもWEBページには反映されない
  • WEBページに改行を反映させたい場合は明示的に指定する必要がある
    • br 要素を使う
    • brはbreakの略称

構文

<br>
  • br 要素は開始タグだけで使う
  • このような使い方をする要素を「空要素」という
    • 空要素はコンテンツを含めることができない要素のこと

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>改行あり</h1>
  <p>
    100-0014<br>
    東京都<br>
    千代田区<br>
    永田町1丁目7-1
  </p>
  <h1>改行なし</h1>
  <p>
    100-0014
    東京都
    千代田区
    永田町1丁目7-1
  </p>
</body>
</html>
  • WEBページ
    改行
    改行

区切り

  • 話の場面の切り替えや、節内での話題の転換等に使える区切り
  • 区切りは hr 要素を使う
    • hrはHorizontal Ruleの略称

構文

<hr>
  • br 要素と同じく開始タグだけで使う空要素となる

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <p>私はHTMLを学習しています。</p>
  <hr>
  <p>私はCSSを学習しています。</p>
</body>
</html>
  • WEBページ
    区切り
    区切り

リスト

  • 箇条書きみたいに表示させる機能
  • 順序なしのリスト
    • ul と li要素を使う
    • ulはUnordered Listの略称
  • 順序ありのリスト
    • ol と li要素を使う
    • olはOrdered Listの略称

構文

  • 順序なしのリスト
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>
  • 順序ありのリスト
<ol>
  <li></li>
</ol>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <h2>順序なしのリスト</h2>
  <ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>ぶどう</li>
  </ul>

  <h2>入れ子になったリスト</h2>
  <ul>
    <li>パン</li>
    <li>ご飯
      <ul>
        <li>白米</li>
        <li>赤飯</li>
      </ul>
    </li>
  </ul>
  
  <h2>順序ありのリスト</h2>
  <ol>
    <li>金賞</li>
    <li>銀賞</li>
    <li>銅賞</li>
  </ol>

</body>
</html>
  • WEBページ
    リスト
    リスト

説明リスト

  • 一連の用語と説明をリスト化したもの

構文

<dl>
  <dd>用語</dd>
  <dt>説明</dt>
</dl>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <h2>説明リスト</h2>
  <dl>
    <dt>HTML</dt>
    <dd>文章構造を定義するマークアップ言語です</dd>

    <dt>CSS</dt>
    <dd>Webページのスタイルを指定するための言語です</dd>

    <dt>JavaScript</dt>
    <dd>動的なWebページを作成することのできるプログラミング言語です</dd>
  </dl>
</body>
</html>
  • WEBページ
    説明リスト
    説明リスト
    ulとli要素を使ってマークアップすることもできるが、適切なマークアップをした方が可読性やコンピュータから見て文章構造が理解しやすいので合理的だと思う

見出し

  • h1 ~ h6タグがある
  • フォントサイズの調整ができるが、フォントサイズを調整する目的で見出しタグを利用しない
    • HTMLの役割はあくまで文章構造を定義するもの
    • フォントサイズの調整はCSSの役割

構文

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h6>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <h3>見出し レベル3</h3>
  <h4>見出し レベル4</h4>
  <h5>見出し レベル5</h5>
  <h6>見出し レベル6</h6>
</body>
</html>
  • WEBページ
    見出し
    見出し

属性(Attribute)

  • タグの設定を行える機能
    • タグにオプションを付け加えることができる

構文

<タグ名 属性名="属性値">コンテンツ</タグ名>

具体例

<a href="https://www.google.co.jp/">Google</a>

a要素のhref属性にリンク先を指定している

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <h2>画像ファイルを相対パスで指定</h2>
  <img src="dog.jpeg" width="300" height="200" alt="犬の画像">
  <hr>
  <h2>画像ファイルを絶対パスで指定</h2>
  <img src="https://dl.dropboxusercontent.com/s/hgql4ez48vtzcr7/dog.jpg" width="300" height="200" alt="犬の画像">
</body>
</html>
  • WEBページ
    属性
    属性

リンク

  • 指定したページへ遷移する機能のこと
  • a 要素のhref属性にリンク先のパスを設定して使用する
    • aはanchorの略称
    • hrefはHypertext Referenceの略称
  • リンクには3つの種類がある
    • 外部リンク
      • 外部ウェブサイトへのリンク
    • 内部リンク
      • サイト内部へのリンク
    • ページ内リンク
      • 同一ページ内の別の場所へのリンク

構文

<a href="リンク先のパス">コンテンツ</a>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>リンク ページ1</title>
</head>
<body>
  <h1>ページ1</h1>
  <hr>
  <h2>外部リンク</h2>
  <h3>同一タブでのページ遷移</h3>
  <a href="https://clown-pop.hatenablog.com/entry/2023/05/20/191727">HTMLの学習 #1</a>
  <h3>別タブにて遷移</h3>
  <a href="https://clown-pop.hatenablog.com/entry/2023/05/20/191727" target="_blank" rel="noopener">HTMLの学習 #1</a>
  <hr>
  <h2>内部リンク</h2>
  <a href="page2.html">ページ2へ</a>
  <hr>
  <h2>ページ内リンク</h2>
  <a href="#apple">りんごへ</a>
  <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>
  <h3 id="apple">りんご</h3>
</body>
</html>
  • WEBページ
    リンク
    リンク

強調

  • 重要な語句を強調できる機能
  • strong要素を使う

構文

<strong></strong>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <p>家に帰ったらすぐに<strong>手洗いをしましょう。</strong></p>
</body>
</html>
  • WEBページ
    強調
    強調

著作権表記

  • small 要素を使う
    • 主に著作権表記に使われる要素だが、著作権表記だけに使われている訳ではない

構文

<small></small>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <hr>
  <p><small>&copy; 2023 i2u-pop.</small></p>
</body>
</html>

&copy;は文字実体参照
文字実体参照についてはW3Cのサイトを参照

HTML Standard

  • WEBページ
    small
    small

情報のグループ化

  • 文章構造がわかりやすくなる
    • 可読性向上につながる
  • スタイルを当てやすくなる
  • グループ化する際に使う要素
    • div:意味を持たない汎用ブロック
    • section:セクションをグルーピングする要素
      • セクションとは見出しとそれに伴うコンテンツのこと
    • header:セクションのヘッダーを示す
    • footer:セクションのフッターを示す
    • main:文章のメインコンテンツ領域を示す
    • article:記事コンテンツ要素
    • aside:余談要素
      • サイドバーや広告表示に使われる
    • nav:ナビゲーション要素

構文

  • div
<div></div>
  • section
<section></section>
  • header
<header></header>
  • footer
<footer></footer>
  • main
<main></main>
  • article
<article></article>
  • aside
<aside></aside>
  • nav
<nav></nav>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>
  <header>
    <h1>グループ化の練習</h1>
    <nav>
      <ul>
        <li><a href="#">WEBエンジニアを目指そう</a></li>
        <li><a href="#">楽しいプログラミング</a></li>
        <li><a href="#">ニュース</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>グループ化を学ぶのにおすすめのサイト10選!</h2>
      <p>グループ化を学べるサイトを10個紹介いたします。</p>
    </article>
    <section>
      <h2>関連記事</h2>
      <ul>
        <li><a href="#">関連記事1</a></li>
        <li><a href="#">関連記事2</a></li>
        <li><a href="#">関連記事3</a></li>
      </ul>
    </section>
  </main>

  <aside>
    <h2>広告</h2>
    <p>全ショップ対象エントリーでポイント5倍!</p>
  </aside>
  
  <footer>
    <p><small>&copy; 2023 i2u-pop.</small></p>
  </footer>
</body>
</html>
  • WEBページ
    情報のグループ化
    情報のグループ化

span要素

  • 意味を持たない要素
  • 実務上は、文章の特定の部分をCSSで装飾したい時によく利用する要素
  • 他に適切な意味的要素がない時に使用する

構文

<span></span>

使ってみる

  • HTML
<!DOCTYPE html>
<html lang="ja">
<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>spanの練習</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <p>私は、<span class="red">HTML</span><span class="red">CSS</span>を学びます。</p>
  <hr>
  これは<div>div</div>です。
  <hr>
  これは<span>span</span>です。
</body>
</html>

補足

  • class属性
    • その要素が所属するグループのことを指す
  • divとspanの違い

    • どちらも意味をもたない要素
      • div要素はブロック要素
      • spanはインライン要素
    • divは改行されるがspanは改行されない
  • WEBページ

    span
    span