HTML初級編　1日目　2024/10/7（お金持ちまでの道のり）

初めての人はお金持ちまでの道のり：０日目をまず読んでみてください！よろしくお願いします★

本日はHTML初級編です。HTMLのtarget&rel属性やアンカリンクなど重要なことを学びます。初日から大苦戦で嫌になりそうでしたがお金持ちになるまで諦めません。以下のHTMLは何を意味しているかわかりますか？私は１ミリもわかりませんでした。ひとつづつ学んだことを解説します。

HTML初級編
主なHTMLの属性（Attribute）＆タグ（Tag）
アンカリンクの詳細
本日の感想

HTML初級編

以下のよくあるHTMLコードを例にして一つずつ解説します。

<!DOCTYPE html>  /*HTML5文書であることをブラウザに示すための宣言。*/

<html lang="en">  /*言語が英語（en）*/

<head>
/*meta：ブラウザや検索エンジン向けの追加情報を提供*/
    <meta charset="UTF-8">  /*世界中のほとんどの言語をサポートする文字エンコーディング*/  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
　　/*ブラウザの表示領域*/
　　/*ページの幅をデバイスの画面幅に合わせる*/  
　　/*ズームレベルを1倍*/ 

    <title>My Learning Journey</title>  /*ページのタイトルを定義*/

</head>

<body>

    <h1>Welcome to My HTML Practice Page</h1>　
　　/*ページ内で最も重要な見出しを表示するために使用*/

    <p>Here are some of the things I am learning:</p>　
　　/*段落（パラグラフ）を定義するタグ*/

    <ul>  /*「順序なしリスト」（箇条書き）を作成するタグ*/

        <li>Basic HTML structure</li>  /*リストを作成*/

        <li>Using tags like headings and paragraphs</li>  /*リストを作成*/

        <li>Creating lists and adding links</li>  /*リストを作成*/

    </ul>

    <p>my HP: <a href="https://criver.site/">GO</a></p>  
    /*段落（パラグラフ）を定義するタグ*/

</body>

</html>

<!DOCTYPE html>

HTML5文書であることをブラウザに示すための宣言。今のところHTML5は、最新のウェブ技術に対応しているため、<!DOCTYPE html>以外を選ぶメリットはない。これ一択。５は世代の番号で2024年10月の時点は５が最新。

<html lang="en">

言語が英語（en）であることを示す。主に検索エンジンやスクリーンリーダーなどがこの情報を利用して、適切な言語設定でコンテンツを処理するために使う。日本語は<html lang="ja">。lang属性を設定することで、ページがどの言語であるかを正しく伝えることができ、検索結果に反映されやすくなったり、視覚障害者のための読み上げや自動翻訳機能が正確に機能するなどのメリットがある。示さない利点がないので必ず使用言語を示すこと。

viewport

これは、ブラウザの表示領域を指します。具体的には、ユーザーが実際に見ている画面の範囲のことです。
スマートフォンやタブレットなど、さまざまな画面サイズに対応するために使われる概念です。
HTMLの<meta>タグのname="viewport"で指定することで、ブラウザがページをどのようにスケーリングするかを調整します。

<meta charset="UTF-8">

meta：ページに関する追加情報（メタデータ）を設定するためのタグ。これは、ページの言語、文字エンコーディング、ビューポートの設定など、検索エンジンやブラウザに提供される情報。ページのコンテンツそのものではなく、ブラウザや検索エンジンに渡す追加情報を定義するために使われる。
→charset：ページの文字エンコーディングを指定する。
→UTF-8：世界中のほとんどの言語をサポートする文字エンコーディング。現代のウェブ開発においては、ほとんどの場合UTF-8で十分。（charset="UTF-8"ほぼ一択）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

・width=device-width:ページの幅をデバイスの画面幅に合わせる設定。ほぼこれ一択。
・initial-scale=1.0: ページが最初に表示されるときのズームレベルを1倍に設定。ほぼこれ一択。

HTMLタグでは、要素に追加情報を与えるために**属性（attribute）が使われます。nameやcontentは、属性の一種です。属性には必ず値（value）**が伴います。この属性値を囲むために、通常は""が使われます。

<title>My Learning Journey</title>

titleタグはmetaタグと違って、ページのタイトルを定義し、ユーザーに表示される重要な情報。metaタグは、ページのメタデータを設定するためのタグで、ブラウザや検索エンジン向けの追加情報を提供。

※ペアタグ（開閉タグ）とシングルタグの違い
ペアタグ:<title></title>のように、開始タグと終了タグのペアで構成されるタグ。何かを囲んで、その内容を定義する場合に使われる。
シングルタグ:metaタグのように、終了タグがないタグ。属性に基づく情報の宣言だけで、何かを囲む必要がない場合に使われる。

<h1>Welcome to My HTML Practice Page</h1>

<h1>タグは、ページ内で最も重要な見出しを表示するために使用される。<h1>から<h6>まであり、<h1>は最も大きく、重要度が高い見出し。

<p>Here are some of the things I am learning:</p>

<p>タグは、段落（パラグラフ）を定義するタグ。このタグ内に文章が入ると、通常ブラウザで1行空けて表示される。

<ul>

<ul>タグは、「順序なしリスト」（箇条書き）を作成するタグ。

※<ol>タグは、番号付きリストを作成するタグ。・なら<ul>タグ、１，２，３などは<ol>タグ。
※<ol>ordered list、<ul>unordered list

<li>Basic HTML structure</li>

<ul>でも<ol>でも<li>～</li>ペアタグ（開閉タグ）でリストを作成

<p>my HP: <a href="https://criver.site/">GO</a></p>

<a>タグ（アンカータグ）は、リンクを定義するためのタグ。href（Hypertext Reference）でリンク先のURLを指定する。リンクを作成する場合は基本的に **a href=** で始まる構文を使用する。このコードでは、my HP:というテキストが表示され、その隣のGOというテキストがクリック可能なリンクとして表示されます。

※target 属性：<a href="https://www.example.com" target="_blank">Visit Example</a>のようにtarget="_blank"を入れると新しいタブで https://www.example.com が開く。

※rel 属性：<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>のようにtarget="_blank"を使用する場合、セキュリティとパフォーマンスのために、rel属性を一緒に設定することが推奨される。

　→noopener noreferrer:リンク先のページが自分のページにアクセスすることを防ぐ。（自分のページを操作されるリスクを減らす）

　→nofollow: 検索エンジンがリンクをたどらないように指示する属性。SEOの観点から、リンク先をランキングに影響させたくない場合や、広告リンクなどで使われる。Googleなどの検索エンジンは、広告リンクに対してnofollowを使うことを推奨している。例：<a href="https://www.example.com" target="_blank" rel="noopener noreferrer nofollow">Visit Example</a>

※download 属性：クリックで自動ダウンロード。例：<a href="files/manual.pdf" download>Download Manual</a>

※title 属性：リンクに説明テキストを表示することができる。例：<a href="https://www.example.com" title="This will take you to Example">Visit Example</a>

※アンカリンク：クリックすると長いページ内の特定の場所にスクロールされる。

※HTMLでは、属性 = 属性の値という感じで = の左側は属性（名称変更不可）。

主なHTMLの属性（Attribute）＆タグ（Tag）

主なHTMLの属性（Attribute）

※HTMLでは、属性 = 属性の値という感じで = の左側は属性（名称変更不可）

一般的な属性

id：要素を一意に識別するための属性。JavaScriptやCSSで特定の要素を操作するときに使われます。
- 例：<div id="header"></div>
class：要素にクラス名を付けて、CSSでスタイルを設定したり、JavaScriptで操作したりするために使われます。
- 例：<div class="container"></div>
style：インラインでCSSスタイルを指定するために使います。特定の要素の見た目を直接設定できます。
- 例：<p style="color: red;">赤いテキスト</p>
title：要素に補足説明を与える属性。マウスを要素の上に置くとツールチップとして表示されます。
- 例：<img src="image.jpg" title="説明文">
lang：ページや要素の言語を指定します。検索エンジンやスクリーンリーダーが内容を解釈するのに役立ちます。
- 例：<html lang="ja">

入力フォーム関連の属性

type：入力フィールドの種類を指定します。<input>タグで使われ、テキスト、パスワード、ボタンなどを設定できます。
- 例：<input type="text">
value：フォーム要素に初期値を設定します。<input>や<textarea>で使います。
- 例：<input type="text" value="初期値">
placeholder：ユーザーが入力する前に、入力欄に表示するヒントを指定します。
- 例：<input type="text" placeholder="名前を入力してください">
name：フォーム要素の名前を指定し、サーバーにデータを送信する際に使われます。
- 例：<input type="text" name="username">
disabled：要素を無効にして、ユーザーが操作できないようにします。
- 例：<input type="text" disabled>
checked：チェックボックスやラジオボタンが初期状態で選択されていることを示します。
- 例：<input type="checkbox" checked>
readonly：入力フィールドを読み取り専用にします。ユーザーが内容を変更できません。
- 例：<input type="text" readonly>
maxlength：入力フィールドに入力できる文字数の上限を指定します。
- 例：<input type="text" maxlength="10">

メディア関連の属性

src：画像や動画など、外部リソースのファイルの場所を指定します。
- 例：<img src="image.jpg">
alt：画像が表示されないときに代わりに表示される説明文を指定します。アクセシビリティにも役立ちます。
- 例：<img src="image.jpg" alt="画像の説明">
width / height：画像や動画などの幅と高さを指定します。
- 例：<img src="image.jpg" width="300" height="200">
autoplay：ビデオやオーディオの再生を自動的に開始します。
- 例：<video src="video.mp4" autoplay></video>
controls：ビデオやオーディオに再生コントロール（再生ボタンや音量調整など）を表示します。
- 例：<audio src="audio.mp3" controls></audio>

リンク関連の属性

href：リンク先のURLを指定します。<a>タグで使います。
- 例：<a href="https://example.com">リンク</a>
target：リンクをクリックしたときに、どのウィンドウやタブで開くかを指定します。_blankは新しいタブで開く設定です。
- 例：<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>
download：リンクからファイルをダウンロードさせるために使います。
- 例：<a href="file.zip" download>ファイルをダウンロード</a>

その他の属性

rel：要素と外部リソースの関係を指定します。主にリンクタグで使われます。
- 例：<link rel="stylesheet" href="style.css">
data-*：カスタムデータ属性。特定のデータをHTML要素に持たせるために使います。data-で始まる任意の名前を付けられます。
- 例：<div data-user-id="12345">ユーザー情報</div>

よく使われる主なタグ

一般的なHTMLタグ

<html>：HTML文書全体を定義するタグ。全てのHTML要素はこのタグの中に書かれます。
例：<html lang="ja">
<head>：ページに関するメタ情報を定義する部分。CSSやJavaScriptのリンク、メタデータを含みます。
例：<head><meta charset="UTF-8"></head>
<title>：ブラウザのタブに表示されるページタイトルを定義します。
例：<title>ToDoリスト</title>
<body>：実際にブラウザに表示される内容を定義する部分。
例：<body><p>ページのコンテンツ</p></body>

テキスト関連のタグ

<h1>〜<h6>：見出しを定義するタグ。<h1>が最も大きな見出し、<h6>が最も小さい見出しを表します。
例：<h1>見出し</h1>
<p>：段落を定義します。テキストを段落ごとに分ける際に使います。
例：<p>段落のテキスト</p>
<br>：改行を挿入するためのタグ。
例：行を分ける<br>改行後の行
<strong>：強調（太字）を定義するタグ。
例：<strong>太字で強調</strong>
<em>：斜体で強調を定義するタグ。
例：<em>斜体で強調</em>

リスト関連のタグ

<ul>：順序のないリスト（箇条書き）を作成するタグ。
例：<ul><li>項目1</li><li>項目2</li></ul>
<ol>：順序のあるリスト（番号付きリスト）を作成するタグ。
例：<ol><li>順序付き項目1</li><li>順序付き項目2</li></ol>
<li>：リストの項目を定義するタグ。<ul>や<ol>の中で使います。
例：<li>リストの項目</li>

画像・リンク関連のタグ

<img>：画像を表示するタグ。src属性で画像のURLを指定します。
例：<img src="image.jpg" alt="説明">
<a>：ハイパーリンクを作成するタグ。href属性でリンク先のURLを指定します。
例：<a href="https://example.com">リンク</a>

フォーム関連のタグ

<form>：ユーザー入力を送信するためのフォームを作成します。
例：<form action="/submit"></form>
<input>：ユーザーがデータを入力するフィールドを定義します。type属性で種類を指定できます。
例：<input type="text" placeholder="入力してください">
<textarea>：複数行のテキスト入力欄を作成します。
例：<textarea rows="4" cols="50">テキスト入力</textarea>
<button>：クリック可能なボタンを作成します。
例：<button type="submit">送信</button>

表関連のタグ

<table>：表を作成するタグ。全体の表の枠を定義します。
例：<table><tr><td>セル1</td></tr></table>
<tr>：表の行（row）を定義します。
例：<tr><td>セル1</td><td>セル2</td></tr>
<td>：表のセル（cell）を定義します。<tr>内で使用します。
例：<td>表のセル</td>
<th>：表の見出しセルを定義します。通常、太字で中央揃えになります。
例：<th>表の見出し</th>

レイアウト関連のタグ

<div>：コンテンツをグループ化・スタイルやレイアウトの適用・スクリプトやイベント処理
例：<div class="container">内容</div>
<span>：インライン要素を定義し、テキストの一部にスタイルを適用する際に使います。
例：<span>インライン要素</span>

メディア関連のタグ

<audio>：オーディオファイルを再生するためのタグ。src属性で音声ファイルを指定します。
例：<audio src="audio.mp3" controls></audio>
<video>：ビデオファイルを再生するためのタグ。src属性で動画ファイルを指定します。
例：<video src="video.mp4" controls></video>

その他のタグ

<meta>：メタ情報（ページの説明や文字エンコード）を定義するタグ。<head>内で使われます。
例：<meta charset="UTF-8">
<link>：外部のリソース（スタイルシートなど）をリンクするタグ。通常、<head>内で使用します。
例：<link rel="stylesheet" href="style.css">
<script>：JavaScriptコードを埋め込む、または外部スクリプトを読み込むためのタグ。
例：<script src="script.js"></script>

タグと属性の違い

タグ（Tag）	属性（Attribute）
ページの構造や要素を定義するもの	要素に対して追加の情報を与えるもの
例：`<input>`、`<div>`など	例：`type="text"`、`id="new-task"`など
要素の始まりと終わりを示す	タグの中に含まれ、追加の設定を指定

要素とは？
要素 = タグ + 属性 + コンテンツ（場合によっては） という構造を持ちます。

例：<a href="https://example.com">リンク</a> は要素です。

タグ：<a>
属性：href="https://example.com"
コンテンツ：リンク

アンカリンクの詳細

<a href="#section1">Welcomeメッセージへ移動</a>
<a href="#section2">学習内容の説明へ移動</a>
<a href="#section3">Basic HTML構造へ移動</a>
<a href="#section4">お気に入りのウェブサイトへ移動</a>
※この # は、リンク先がページ内の特定の場所（つまり、id 属性で指定された場所）であることを示している。#section1 は、HTML文書内の id="section1" を持つ要素に移動するようブラウザに指示する。もし # がなければ、リンクはページ内の移動ではなく、外部のリンクや他のファイルを参照するリンクとして解釈されてしまう。したがって、ページ内リンクを正しく機能させるためには、# が必須。

<!DOCTYPE html>

<head>

<title>My Learning Journey</title>

</head>

<body>

<h1 id="section1">Welcome to My HTML Practice Page</h1>

<p id="section2">Here are some of the things I am learning:</p>

<ul>

<li id="section3">Basic HTML structure</li>

<li>Using tags like headings and paragraphs</li>

<li>Creating lists and adding links</li>

</ul>