HTMLの基本
はじめに
今日も下記のロードマップを利用して、知識を増やしていきたいと思います！
Frontendの部分について随時更新していきます💪🏻
今日は復習も兼ねてHTMLについて学びました！
HTML（参考文献）
- W3Schools: Learn HTML
- MDN Docs: Getting Started with HTML
- web.dev: Learn HTML
- HTML Full Course - Build a Website Tutorial
- HTML Tutorial for Beginners: HTML Crash Course
- HTML Cheatsheet
- Scaler: HTML
HTMLとは
- HyperText Markup Languageの略
- ウェブページの構造とコンテンツを定義するためのマークアップ言語
HTMLドキュメントの構造
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
| 説明 | |
|---|---|
<!DOCTYPE html> |
HTML文書のバージョンを指定します。 |
<html> |
HTML文書のルート要素であり、全体のコンテンツを囲みます。 |
<head> |
文書に関するメタ情報やスタイルシートなどの情報を含むセクションです。 |
<title> |
ページのタイトルを指定します。ブラウザのタブに表示されます。 |
<body> |
実際のコンテンツが表示されるセクションです。 |
<h1> |
見出しを定義します。 |
<p> |
段落を定義します。 |
HTML要素とタグ
HTMLでは、さまざまな要素（コンテンツの部品）を使用してページの構造を作ります。
要素は開始タグと終了タグで囲まれ、その間にコンテンツが配置されます。
<p>これは段落です。</p>
<a href="https://example.com">リンクテキスト</a>
<img src="image.jpg" alt="イメージ">
<input type="text" placeholder="名前を入力してください">
要素の入れ子
要素は他の要素内に配置できます。これをネストと呼びます。
<p>My cat is <strong>very</strong> grumpy.</p>
- タグは、互いの内側または外側で開閉する必要がある。
<p>My cat is <strong>very grumpy.</p></strong>
HTMLブロックとインライン要素
ブロックレベルとインラインレベルは、HTML要素の2つの主要な表示レベルを指します。
ブロックレベルの要素
- 一般的に使用される 2 つのブロック要素は、<p> と<div>
- 常に新しい行で始まり、ブラウザは要素の前後にスペース (マージン) を自動的に追加する
- ブロックレベルの要素は常に利用可能な全幅を占める
HTML の代表的なブロックレベルの要素は次のとおりです。
| 要素 | 説明 |
|---|---|
<div> |
ブロックレベルの汎用コンテナ。 |
<p> |
段落を表す要素。テキストの段落をマークアップ。 |
<h1>〜<h6> |
見出しを表す要素。コンテンツのセクションを識別。 |
<ul> |
順序のないリストを表す要素。<li>要素と組み合わせて使用。 |
<li> |
リストアイテムを表すの要素。 |
<section> |
セクションを表す要素。ウェブページの主要なセクションをグループ化。 |
<article> |
独立したコンテンツを表す要素。ブログの投稿やニュース記事などをグループ化。 |
インライン要素
- 新しい行で始まらない。
- 必要なだけの幅を占める。
HTML の代表的なインライン要素は次のとおりです。
| 要素 | 説明 |
|---|---|
<span> |
インライン要素のコンテナ。グループ化やスタイリングに使用。 |
<a> |
アンカーリンクの作成。クリック可能なリンクを作る。 |
<strong> |
強調されたテキストを表示。重要性や強調を表現。(太字) |
<em> |
強調されたテキストを表示。感情的な意味や強調を表現。(斜体) |
<img> |
画像の表示。URLや代替テキストを指定。 |
<input> |
ユーザーの入力を受け付ける。テキスト入力やボタンなどの種類がある。 |
<br> |
改行の挿入。テキストや要素の表示を次の行に移動。 |
ちなみに、、
HTML5では、「ブロック要素」 「インライン要素」 の概念は廃止されているようです。
が、上記で説明した挙動は残っているとのこと。
- インライン要素の中にブロック要素を入れ子にしてはいけない
というルールも、HTML4まででHTML5ではその制限がなくなり、下記のような記述も可能だそうです！👀
<a>
<div>
<img src="./image.jpg">
<div>こんにちは。</div>
</div>
</a>
HTML5 入れ子チートシート
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールが簡単に見れます！
HTML レイアウト要素
HTML には、Web ページのさまざまな部分を定義するいくつかのセマンティック要素があります。
セマンティック要素とは
HTMLで意味や役割を持つ要素のことです。ウェブページの構造や意味を明示的に表現し、検索エンジンやアクセシビリティを改善するために使用されます。（HTML5から新たに追加されました。）
以下は、HTML のセマンティック要素の一部のリストです。
| 要素 | 説明 |
|---|---|
<header> |
ドキュメントまたはセクションのヘッダーを定義。 |
<nav> |
一連のナビゲーションリンクを定義。 |
<section> |
ドキュメント内のセクションを定義。 |
<article> |
独立した自己完結型コンテンツを定義。 |
<aside> |
コンテンツとは別に関連する情報を定義（サイドバーなど）。 |
<footer> |
ドキュメントまたはセクションのフッターを定義。 |
<details> |
ユーザーがオンデマンドで開閉できる追加の詳細を定義。 |
<summary> |
<details>要素の見出しを定義。 |
💡絵文字を下記のように表示できるの知らなかった！
さいごに
CSSをうまく適用させるためにもどのような構造になっているのかの部分の理解は重要だと思います。
また、ブロックレベル・インライン要素と親要素・子要素って何が違うの？
と疑問に思い、調べたところ、親要素と子要素という言葉は、HTMLのDOM（Document Object Model）ツリーの階層関係を示しいるようです。
まだ読めてないですが、下記の記事など参考にして、DOMについてもっと知りたいと思いました。
参考にさせていただいた記事🌱
Discussion