まず初めにこれだけはやってほしいということ
MDNには必ず目を通しておきましょう
開発者向けのWeb技術
https://developer.mozilla.org/ja/docs/Web
はい、これ一番大切です。というか、ぶっちゃけこれ読んどけば間違いないんですが、やはり初心者の時ほどこういうリファレンス読むのって苦手なんですよね(;'∀')
でも、この中にはWeb開発に必要な様々なことが記載されてあります。
HTMLとデバッグについて、高度なテキスト整形についてなど中級者以上でも楽しめる内容ですので、見たことない方は目を通してみましょう。
ちなみにReactやGit,GitHubの項目もちゃんとあります。
超超基本編 セマンティックHTML
解説：
セマンティックHTMLは、Webページの構造や内容をより明確にし、検索エンジンや支援技術（スクリーンリーダーなど）がより理解しやすくするためのHTMLの書き方です。セマンティックHTMLを使うことで、コードの可読性が向上して保守性も高まります。
例：
-
<header>: ページやセクションのヘッダー部分を示す -
<nav>: ナビゲーションリンクの集まりを示す -
<main>: ページの主要なコンテンツ部分を示す -
<section>: コンテンツのセクションを示す -
<article>: 独立したコンテンツ（ブログ記事やニュース記事など）を示す -
<footer>: ページやセクションのフッター部分を示す
利点：
- 検索エンジン最適化（SEO）: 検索エンジンがページ内容をより正確に理解し、適切にインデックス化できる。
- アクセシビリティ: スクリーンリーダーがページの構造を正しく認識し、視覚障害者にとって使いやすいサイトを作れる。
- 保守性: コードの可読性が高まり、他の開発者がコードを理解しやすくなる。
一応簡単な例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>セマンティックHTMLの例</title>
</head>
<body>
<header>
<h1>サイトのタイトル</h1>
</header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">コンタクト</a></li>
</ul>
</nav>
<main>
<article>
<h2>記事のタイトル</h2>
<p>ここに記事の内容が入ります。</p>
</article>
</main>
<footer>
<p>© 2024 サイト名. 全ての権利を保有します。</p>
</footer>
</body>
</html>
ちなみに
<div>タグの意味
<div>タグは「division（区分）」の略で、HTML文書内でセクション（区分）を作成するためのコンテナです。<div>タグは特定の意味を持たないため、コンテンツをグループ化してスタイルやレイアウトを適用するために使用されます。
応用編
1. <figure>と<figcaption>の使用
画像や図表にキャプションを追加する場合に便利
<figure>
<img src="example.jpg" alt="説明的な代替テキスト">
<figcaption>この図は、セマンティックHTMLの重要性を示しています。</figcaption>
</figure>
2. <aside>の使用
本文の内容に関連するが、主要なコンテンツとは異なる情報を提供する際に使用します。
<main>
<article>
<h2>主要な記事のタイトル</h2>
<p>主要な記事の内容です。</p>
</article>
<aside>
<h3>関連情報</h3>
<p>こちらは主要な記事に関連する情報です。</p>
</aside>
</main>
3. <details>と<summary>の使用
折りたたみ可能なコンテンツを作成する際に便利
<details>
<summary>詳細を表示</summary>
<p>ここに詳細情報が表示されます。</p>
</details>
4. <mark>の使用
重要なテキストをハイライトする際に使用します。
<p>このテキストは<mark>重要</mark>です。</p>
5. <time>の使用
日時情報を機械が理解できる形式で提供します。
<time datetime="2024-05-26">2024年5月26日</time>
応用例のページ全体
以下は、これらのセマンティックHTML要素を使用した応用例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>セマンティックHTMLの応用例</title>
</head>
<body>
<header>
<h1>応用例のサイトタイトル</h1>
</header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">コンタクト</a></li>
</ul>
</nav>
<main>
<article>
<h2>主要な記事のタイトル</h2>
<p>この記事はセマンティックHTMLの応用例を示しています。</p>
<figure>
<img src="example.jpg" alt="説明的な代替テキスト">
<figcaption>この図は、セマンティックHTMLの重要性を示しています。</figcaption>
</figure>
<details>
<summary>詳細を表示</summary>
<p>ここに詳細情報が表示されます。</p>
</details>
</article>
<aside>
<h3>関連情報</h3>
<p>こちらは主要な記事に関連する情報です。</p>
</aside>
</main>
<footer>
<p>© 2024 サイト名. 全ての権利を保有します。<time datetime="2024-05-26">2024年5月26日</time></p>
</footer>
</body>
</html>
高度なテキスト整形(MDNから抜粋)
<dl>
<dt>独り言 (soliloquy)</dt>
<dd>
ドラマで、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を（他の登場人物ではなく）観客に対して表現するものです。
</dd>
<dt>独白 (monologue)</dt>
<dd>
ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋るものです。
</dd>
<dt>傍白 (aside)</dt>
<dd>
ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。
</dd>
</dl>
詳細な説明
-
<dl>タグは、全体の定義リストを囲むタグです。この中に、用語とその定義を対にして記載します。 -
<dt>タグは、リストの中の一つの用語を定義します。このタグの内容が用語となります。 -
<dd>タグは、前に定義された用語に対する説明や詳細を表します。このタグの内容が説明部分となります。
視覚的な構造
ブラウザでは、定義リストは次のように表示されます：
- 独り言 (soliloquy): ドラマで、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を（他の登場人物ではなく）観客に対して表現するものです。
- 独白 (monologue): ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋るものです。
- 傍白 (aside): ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。
まとめ
-
<dl>: 定義リスト全体を囲むタグ。 -
<dt>: 定義リスト内の用語を定義するタグ。 -
<dd>: 用語の説明を提供するタグ。
これらのタグを使用することで、情報を整理して視覚的にわかりやすく提供することができます。
応用編が少し難しかったかもしれませんが、このようにセマンティックHTMLを応用することで、ページ全体の意味がより明確になり、検索エンジンや支援技術にとっても使いやすくなります。また、可読性や保守性も向上し、開発者同士の協力がしやすくなります。
基本の4属性の意味を理解しよう
RailsやLaravelなどのバックエンド言語扱ってるといやでもこの辺を意識することになると思いますが、フロントエンド開発においても非常に重要で意外と初心者の方は忘れがちなので必ず覚えておきましょう！
for属性
意味：
for属性は、HTMLの<label>要素で使用され、フォームの入力要素（例えば、<input>）と関連付けるために使われます。これにより、ラベルをクリックすると関連付けられた入力要素にフォーカスが移ります。
使用例：
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">
id属性
意味：
id属性は、HTML要素に一意の識別子を付けるために使用されます。同じページ内で一つのid属性値は一度しか使えません。この識別子を使ってCSSやJavaScriptから要素を参照したり、<label>要素と入力要素を関連付けたりします。
使用例：
<input type="text" id="username">
name属性
意味：
name属性は、フォームデータをサーバーに送信するときに、入力要素の名前を指定します。サーバーはこの名前を使ってフォームデータを処理します。name属性は<input>、<select>、<textarea>などのフォーム要素で使われます。
使用例：
<input type="text" name="username">
value属性
意味：
value属性は、入力要素の初期値を設定するために使用されます。フォームが送信されると、この値がサーバーに送信されます。
使用例：
<input type="text" name="username" value="defaultUser">
関係性
-
for属性は、id属性を持つ入力要素とラベルを関連付けるために使用されます。例えば、<label for="username">と<input id="username">が関連付けられ、ラベルをクリックすると入力フィールドにフォーカスが移ります。 -
name属性は、フォームデータをサーバーに送信するときにそのデータの名前を指定します。id属性とは異なり、同じ名前を複数の入力要素で使用できます。 -
value属性は、入力フィールドの初期値を指定し、その値がフォーム送信時にサーバーに送信されます。
実際の例
以下のフォームは、for、id、name、value属性を使ってユーザー名とパスワードを入力する簡単なログインフォームです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームの例</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username" value="defaultUser"><br>
<label for="password">パスワード：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="ログイン">
</form>
</body>
</html>
解説：
-
for属性:
<label for="username">は、<input id="username">と関連付けられています。 -
id属性:
<input id="username">と<input id="password">に使われ、一意の識別子として機能します。 -
name属性:
<input name="username">と<input name="password">は、サーバーに送信されるデータの名前を指定します。 -
value属性:
<input value="defaultUser">は、ユーザー名の初期値を設定します。
このように、これらの属性はフォームの機能とユーザビリティを向上させるために密接に連携しています。
おわり
簡単な解説でしたが、冒頭にも述べたように基本はMDNを読むようにしましょう。
完全な初心者の方は以下から目を通していけばStep by Stepで理解できるようになっています。
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web
