4.Front End Development_HTML - YukaKoshiba/MyknowledgeDocs GitHub Wiki

Front End Development_HTML @Japanese Version
Create Date：2024/11/01
Last Update Date：2025/04/22

body： header　 footer　 main

ヘッドライン(h)　段落(p)　箇条書き　表　ハイパーリンク(a)　 form/input/buttonほか　画像　 SVG
動画　別のHTMLを埋め込む　ユーザの入力フォームを作成する
 コードの記述　 section　 blockquote(引用)　 aside(余談)　説明リスト

JavaScriptをWebページに組み込む　 CSS以外のレイアウトの設定

ショートカットキーを設定する　スクリーンリーダ対応　エスケープシーケンス(特殊文字)

HTMLテンプレート

ページネーション機能>

HTML

HTMLはWabページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するもの
＝Webページの基本の骨格を作る言語
※変数や関数を持たないため、HTMLは言語であるが、プログラミング言語ではない

W3C(World Wide Web Consortiumは、ウェブ技術の標準化を推進する国際的な非営利団体で、validator.w3.org ウェブページのHTMLやXHTMLコードが、W3Cの標準仕様に準拠しているかどうか確認できる
この他、CSSに関しても、W3Cのサイトで確認出来る(jigsaw.w3.org/css-validator/)

お作法

・HTML要素は文書中で、 < > 囲まれた要素名で構成される"タグ"によって区別される
・タグ内の要素名は、大文字と小文字の区別はないが、小文字で記載することが慣習化/推奨されている
・タグは、検索エンジンに各種どのような記述かを認識させる重要は役割を持つ
・ブラウザはHTMLファイルを上から下へ、左から右へと読み込み、スペースとインデントは事実上無視される
　→ブラウザにHTMLの構造を理解させるためには、必ず開始タグと終了タグを適切に記載する必要がある
　※スペー社インデントを減らしても問題なく機能し、可読性は低下するが、ファイルサイズは小さくなる

用語

element(要素)
タグで囲んだ情報の単位
attribute(属性)
要素に何らかの情報や設定を付加するため、開始タグに記述する文字列
void element(空要素)
HTML における要素のうち、子ノード(子要素およびテキストノード)を持つことができないもの
空要素には開始タグしかありません。空要素では終了タグを指定することができない
機能的には必要ないが、明示的に終了を示すために自己終了タグを付けることが推奨されている
(例)<input />
nest(入れ子)
idとcalss
スタイルシートやJavaScriptを指定する際に、要素以外で指定したい時にidやclassを指定する
ただし、idを使用する際の注意点として、1つのHTMLファイル内で一意である必要がある <div id="一意のid名"></div>
<div class="クラス名"></div>

基本の構成


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>タイトルを記述</title>　
  </head>
  <body>
    <header>
      <img>ロゴなど
      <nav>ナビゲーションメニューなど</nav>
    </header>
    <main>Webページのコンテンツを記載する</main>
    <footer</footer>
  </body>
</html>

<!-- Comment -->

HTML宣言

すべてのWebページは、<!DOCTYPE html>を必ず最初に記載する
この特別な文字列は宣言として知られ、ブラウザが業界全体の仕様を満たそうとすることを保証する
その文書がHTMLの最新バージョンであるHTML5文書であることをブラウザに示す

<html>

この中にページ上のすべてのコンテンツ(<title>, <body>, <footer>)を包む

属性	内容	書き方
lang	ページの言語を指定する	(例)英語を指定する `<html lang="en">` *en：英語　ja：日本語

<head>

文書のタイトル、スタイルシートへのリンク、スクリプトなど、文書に関するメタデータを設定する

<meta>

ページに直接表示されないページに関するメタ情報を持つ
書き方：<meta 属性="値" > *void要素

属性	内容	書き方
charset	WebブラウザにWebページのエンコードを認識させる	(例)UTF-8を指定する `<meta charset="utf-8">`
name	文書レベルでメタデータを提供し、ページ全体に適用される contentを適切に設定することで、アクセシビリティとSEOが向上する	(例)レスポンシブルWebデザインにするこの1行を記述するだけで、モバイルアプにも対応する `<meta name="viewport" content="width=device-width, initial-scale=1.0">` `<meta name="viewport" content="initial-scale=1, width=device-width">`

※レスポンシブルWebデザイン：Webページのスタイルをモバイル, デスクトップPC, ノートPCラップトップで同じ様に見る事ができる

<title>

WebブラウザでWebページのタイトルバーやタブに表示する内容記述する
記載場所：<head&gtの中
書き方　：<title>(タイトル文)</title> 備考　　：タイトル文は15~60文字

レイアウトを指定する

Webページのレイアウトの変更方法は、2種類ある
いずれの方法も<head>要素の中に記述する

1.style要素を使用する
記載場所：<head>要素の中
書き方　：<style>CSSによる体裁値</style>
HTMLファイルの中に記載が出来るが、可読性の低下/レイアウト崩れへ繋がり修正が大変になる為、基本は使用しない


<style>
  h1,h2, p {
    text-align: center;
   }
</style>

2.外部スタイルシートファイルを参照する
記載場所：<head>の中
書き方　：<link rel="stylesheet" href="styles.css">　*void要素


<head>
    <link href="style.css" rel="stylesheet">
    <title>css</title>
</head>

<body>

Wepページに実際に表示する箇所で、HTML文書の本体を表す
大きく分類すると、header、main、footerに分けられる
ただし、これらの要素は、HTML5で導入された新しい要素であり、古いブラウザでは正しく表示されない場合があり、
ただbody中にすべてのWebページの内容が記載されていることも多い
header、main、footerに分けることで、異なるレイアウトや挙動を適用できる

<header>

ページタイトル、ナビゲーションメニュー、ロゴなど、そのページに関する重要な情報を集約する際記述する
基本的にWebページのコンテンツに関わらず、常時表示する


<!-- 他の文書へのナビゲーションリンク(メニュー) -->
<nav>
  <ul>
    <li><a href="別ドキュメントへのURL"&lg;メニュー項目1</a></li>
    <li><a href="ドキュメント内のid名"&lg;メニュー項目2</a></li>
  </ul>
</nav>

<main>

Webページに表示する内容を記述する
main要素内の内容は、その文書に固有であるべきで、文書の他の部分で繰り返されるべきではない
記載場所：<body>の中

<見出しを記述する>

h1~h6まで指定でき、h1が最も大きい文字として表示される
<h>はSEOに影響する
URLが取得出来るため、パスに渡すことが出来る
記載場所：<main>の中
書き方　：<h1-6>見出し文</h1-6>　*void要素

テキストの段落を作成する

<p>文章</p>

箇条書きにする

ul：unordered List
li：list item


<ul>
  <li>箇条書きしたい項目 </li>
  <li>箇条書きしたい項目 </li>
</ul>

番号順にする

ol：ordered List
li：list item


<ol>
  <li>番号順にしたい項目 </li>
  <li>番号順にしたい項目 </li>
</ol>

表を挿入する

基本的な記述方法は以下の通り
これ以外にも、表のグループ化、セルの結合、表のヘッダー/本体/フッターを作成することも可能
詳細は、freeCodeCampの記事を参照のこと


<table>
  <caption>表題</caption>
  <thead>
    <tr>
      <th>列1-ヘッダー</th>
      <th>列2-ヘッダー</th>
      <th>列3-ヘッダー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>列1-データ1</td>
      <td>列2-データ1</td>
      <td>列3-データ1</td>
    </tr>
    <tr>
      <td>列1-データ2</td>
      <td>列2-データ2</td>
      <td>列3-データ2</td>
    </tr>
  </tbody>
<table>

<thead>や<tbody>は省略可能だが、以下メリットがある

構造の明確化
→CSSで異なるレイアウトの指定が出来る
アクセシビリティの向上
→スクリーンリーダーなどに認識させられる
JavaScriptでテーブル操作が出来る

リンクを貼る

<a>(anchor)タグを利用する

<a href ="リンクしたいURL">(リンクに表示したい文字)</a>

任意の属性

属性	設定内容
target	`_blank`：新しいタブでリンクを開くデフォルトは`_self`：現在のタブでリンクを開く
rel	noreferrer：リンク展開時、参照元に関する情報を渡さない様にするプライバシー保護、セキュリティ対策、トラッキング防止に役に立つ

画像を挿入する


<img
  src="画像のあるパス"
  alt="画像の説明文"
  width="数字"
  height="数字" />

*void要素

alt属性では、webサイトに画像をアップロードする際、HTMLソースコード上に記述する、img要素のプロパティ(属性)ことで、画像の代わりとなるテキスト
アクセシビリティを向上させるためにスクリーンリーダーに使用され、画像の読み込みに失敗した場合に表示される
原則、<img>にalt属性を含める事

width/heightは、CSSでも利用指定できるが、HTMLで指定しておくと予め領域が確保され、レイアウト崩れが起きにくなる
ただし、CSS指定時と比べ、画像の拡大縮小で画質が劣化しやすく、レスポンシブルデザインに対応しづらいデメリットがある

属性	設定内容	値
loading	画像の読込みタイミングを指定 Webページの表示速度を向上に役立つ	lazy: 画像がビューポート内の表示直前まで読込みを遅延させる eager: 画像をすぐに読み込む auto: ブラウザが最適なタイミングで読込む ※ブラウザにより、挙動が異なる場合がある

画像にリンクを貼る


<a href ="リンクしたいURL">
  <img alt="画像の説明文">
</a>

画像とキャプションを関連付ける

自己完結型のコンテンツを表し、画像とキャプションを関連付けたい時、<figure>および<figcaption>を利用する
画像とキャプションは一単位として考えられる
alt属性の様に失敗した際のみ表示されるのではなく、常に<figcaption>の内容が画像とセットでWebページ上に表示される


<figure>または<div>
  <img src="画像ファイルのパス" alt="画像の説明" />
  <figcaption>画像の説明文</figcaption>
</figure>または</div>

SVG要素

SVG(Scalable Vector Graphics)は、XML言語の一種
ベクターグラフィック(画像をピクセルではなく、数学的な式(ベクトル)で表現)の描画に用いる言語のこと

ベクターグラフィックであることから、ピクセルベースの画像(JPEG, PNGなど)と異なり、拡大縮小しても画質が劣化しない
また、SVGはXML形式で記述されるため、テキストエディタで編集可能なテキストベースの画像

その為、SVGはJavaScriptと組み合わせて、インタラクティブな要素(ボタン, アニメーションなど)を作成することが出来る
→ 必要なすべての線や図形を指定する or 既にあるラスター画像を変更する or その両方を結合して画像を作成して使用することも出来る
→ 画像とその部品を座標変換したり、互いに合成したり、フィルタリングしたりして、その見た目を完全に変えることも可能

SVG基本画像

SVGでは以下の様な基本的な図形が提供されている

circle要素 : 円形 - D3.jsの散布図のプロット等で使用する
rect要素 : 長方形 - D3.jsの棒グラフ作成時などに使用する

各要素の属性に関しては、mdn参照の事


<img
  src="画像のあるパス"
  alt="画像の説明文"
  width="数字"
  height="数字" />

*void要素

動画を埋め込む

<video>
自分のWebサーバにある動画を埋め込む際に利用する


<!-- controlsで再生,音量,シーク,ポーズ,サイズなどを指定できる -->
<video controls width="値"&gt muted;
  <source src="動画のパス/動画名.mp4" type="video/mp4" />
  <source src="動画のパス/動画名.webm" type="video/webm" />
</video>

muted：読み込み時に動画が自動再生されても、音が出ることを防ぐ


<iframe
<!-- 自動再生や -->
  id="id名"
  title="タイトル" <!-- 主にスクリーンリーダーなどで使用 -->
  width="値"
  height="値"
<!-- 枠線を無くす -->
frameborder="0"
<!-- iframe内のコンテンツが実行できる動作を許可-->
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share":
!-- 全画面再生を許可 -->
allowfullscreen <
<!-- 通常の外部サイトで閲覧するURLでは埋め込みできない為、URLに注意 -->
src="動画の埋め込み用URL" />
</iframe>

別のHTMLを埋め込む

<iframe>要素を使うと、HTMLドキュメントの中に、別のHTMLドキュメントを埋め込むための要素
ウェブページの中に、外部のウェブページやコンテンツ(動画, 地図, 広告など)をシームレスに表示したい場合に非常に便利

基本の書き方：


<iframe src="埋め込みたいHTMLのURL" width="500" height="300"></iframe>

その他、様々な引数で細かく指定出来るため、詳細はmdn Web doc参照のこと

コード表示にする

コードを表示したい時は、<code>を利用する
コード内の改行や空白をそのまま表示したい場合は、<per>で<code>を囲む
※pre：preformatted text(整形済みテキスト)
→ HTMLの改行タグ(<br>など)を挿入しなくても、そのままプログラムの改行がWebページ上で反映される
→ プログラムのコードをコピーをするボタンが表示され、コピーが楽になる

<pre><code>コード</code></pre>

CSS以外でレイアウトを変更する

やりたいこと	書き方	備考
セクションの挿入	`<hr />`　*void要素
文字を太字にする	`<strong>太字にしたい文字</strong>` `<b>太字にしたい文字</b>`	<strong>：SEO効果がある <b>：ただ太字表示されるだけ
斜体文字にする	`<em>斜体にしたい文字</em>` `<i>斜体にしたい文字</i>`	<em>：SEO効果がある <i>：ただ斜体太字で表示されるだけ
文字に下線をひく	`<u>下線を引きたい文字</u>`
改行する	`<br />`　*void要素	段落間のスペースの調整に複数連続して使用しないこと基本的にはCSSで調整する HTML5以降、<br>ではなく、<br />が推奨されている
ブロックレベルでコンテンツを区切る	`<div>同じディビジョンにまとめる要素</div>`	コンテンツを区切るための要素で本質的には何も表さないスタイルシートやJavaScriptで一括して指定する際のグループ分けに使用することが出来る
インラインレベルでコンテンツを区切る	`<span>同じディビジョンにまとめる要素</div>`	コンテンツを区切るための要素で本質的には何も表さないスタイルシートやJavaScriptで一括して指定する際のグループ分けに使用することが出来る

ユーザから情報を取得する

ユーザに入力してもらって、情報を取得したい場合は、<form>を利用する
基本的な構文


<form  action="フォームデータの送信先URL" method="get/post">
  <fieldset>
    <legend">fieldsetの説明文</legend">
      <label"><input id="id名" type="項目タイプの選択"/ ></label">
  </fieldset>
</form>

form

ユーザーが入力するコントロール(input, textarea, select, buttonなどをグループ化し、それらのデータをサーバーに送信するためのコンテナ


<form action="送信先のURL" method="送信方法">
    -- input等の入力要素を配置
</form>

属性	説明
action(必須)	フォームに入力されたデータが送信される先のURLを指定するための属性
method	<form>のactionで指定したデータの送信先へ取得データの送信方法を指定する `post`：POSTリクエストで送信＝リクエストボディのデータとしてデータを取得　機密性の高いデータや、大きなデータを送信する場合 `get`：GETリクエストで送信＝URLパラメータとしてデータを取得する　機密性の低いデータや、検索などの結果をブックマークしたい場合
target	フォームの送信結果をどこに表示するかを指定する `_blank`を指定すると新しいウィンドウやタブで開く `_self`(デフォルト)は現在のウィンドウで開く `_parent`や`_top`などの値もある
enctype	フォームデータのエンコード方式を指定する・`application/x-www-form-urlencoded`(デフォルト) 　ほとんどのフォームデータに適している・`multipart/form-data` ファイルをアップロードする場合に使用する

input

ユーザーがテキスト、数値、ファイルなどを入力したり、選択肢を選んだりするための最も基本的なフォームコントロール
ウェブフォームからデータを収集するための様々な方法を提供する
void要素(＝</input>を記述しない)

<input type="入力タイプ" id="識別子" name="サーバーに送信する際のキー" value="初期値" その他の属>

属性	説明
type(必須)	入力フィールドの種類を指定する `text`：一行のテキスト入力フィールド(デフォルト) `password`：パスワード入力フィールド `email`：メールアドレスの入力フィールド `number`：数値の入力フィールド `date`：日付の選択フィールド `checkbox`：チェックボックス `radio`：ラジオボタン (同じ`name`属性を持つラジオボタンはグループ化される) `file`：ファイル選択フィールド(ファイルのアップロードに使用) `submit`：フォームを送信するボタン `reset`：フォームの入力内容を初期値に戻すボタン `button`：クリック可能な汎用的なボタン(JavaScriptなどで動作を定義) `hidden`：ユーザーには表示されない(サーバーに送信する値を埋め込む際に使用)
name(重要)	フォームデータをサーバーに送信する際のキーサーバー側はこの`name`属性の値を使って、送信されたデータを識別する
value	入力フィールドの初期値を設定する
placeholder	ユーザーが入力を始めるまでテキストエリアに表示する内容
required	必須入力項目
readonly	読み取り専用
disabled	無効化(＝操作不可,フォーム送信もされない)
min, max, step	値の範囲や刻みを指定する
pattern	入力値が満たすべき正規表現を指定する
size	入力フィールドの表示上の幅を指定する(文字数)
maxlength	入力できる最大文字数を指定する
autofocus	カーソルの自動セット
autocomplete	過去の入力を表示(ON)/非表示(OFF) ※デフォルトは、`autocomplete="on"`

label

各フォーム要素にラベル(説明文)記載する
＝その入力要素が何を表しているかをユーザーへ明確に伝える役割を果たす
<label>のforと<input>のidを一致させることで1つの固まるであることを認識させることができる


label for="name">名前:

output

<output>は、JavaScriptで動的に生成された値や計算結果などを表示する際に利用される

最低2文字以上のテキストの入力(必須)


<label>Name
  <input id="name" type="text" required  minlength="2" />
</label>

メールアドレスの入力(必須)


<label>Email
  <input id="email" type="email"  required />
</label>

初期値20、0-120が入力可能な数の入力(任意)


<label>Age
  <input id="age" type="number" min="0" max="120" value="20" />
</label>

アルファベットと数で8文字以上で構成されたパスワードの入力(必須)


<label>Password
  <input id="new-password" type="password" required pattern="[a-z0-5]{8,}" />
</label>

ラジオボタン


<!-- 3つのラジオボタンを設置する(初期値は選択項目1) -->
<label for="radio1">
  <input type="radio" id="radio1" name="ラジオボタンのグループ" value="引き渡す値" checked > 選択項目1
</label">
<label for="radio2">
  <input type="radio" id="radio2" name="ラジオボタンのグループ" value="引き渡す値"> 選択項目2
</label>
<label for="radio3">
  <input type="radio" id="radio3" name="ラジオボタンのグループ" value="引き渡す値"> 選択項目3
</label>

nameに同じ名前を指定することで、同じラジオボタンのグループとして認識され、排他制御が適用される
排他制御をする為に、何の値が選択されたかをキャッチする為、valueの設定は必須
"checked"を指定しておくと、初期値として設定される

チェックボックス


<!-- 2つのチェックボックスと各チェックボックスの右側に項目名を記載する -->
<fieldset>
  <legend>該当するものにチェックを入れてください</legend>
  <div>
    <input type="checkbox" id="a" name="ex-checkbox" value="a" />
    <label for="a">Option-A</label>
  </div>
 <div>
    <input type="checkbox" id="b" name="ex-checkbox" value="b" />
    <label for="b">ption-B</label>
  </div>
</fieldset>

チェックボックスの<input>と項目名の<label>をグループ化させるため、<input>のidと<label>のforに同じ値を設定する
<input>のnameに同じ値を設定することで、複数のチェックボックスをグループ化する
<fieldset>および<fieldset>、<div>はユーザの見やすさを向上させる為に記載しており、必須要素ではない
これらの要素を記述することで、横方向ではなく、下方向に配置される


<!-- ユーザに規約書を読んでもらい、確認のチェックボックスを配置する(必須入力) -->
<!-- 規約書にはリンクを貼る -->
<label for="terms">
  <input class="inline" id="terms" type="checkbox" required name="terms" /> 私は<a href="URL" /">本規約</a>に同意します
</label>

<label">が無くても成立するが、選択範囲が拡大して使いやすさが向上するとともに、SEOの向上に繋がる
<label">のforと<input">のidを同じ値にしておくことで、関連要素であると認識される
<input">のnameは、フォーム送信時にサーバーに送信されるデータの名前を指定する

プルダウン
必須入力にしたい場合は、<select required>を設定する
初期値に設定したい場合は、<option selected>を設定する


<label　for="feelig">今日の気分は?
  <select id="feeling">
    <option value="" selected>(1つ選択して下さい)</option>
    <option value="1">最高</option>
    <option value="2">いつも通り</option>
    <option value="3">悪くない</option>
    <option value="4">良くない</option>
  </select>
</label>

<label>のforと<select>のidを同じにすることで、ラベルとプルダウンがセットになる

テキストエリア
<input type="text">と違い、複数行の入力ができる


<label for="bio">
  <textarea id="bio" rows="3" cols="30" placeholder="自由記述"></textarea>
</label>

rows:表示する行の数を指定
cols:表示する列の数を指定
placeholder:ユーザーが入力を始めるまでテキストエリアに表示する内容
<label>のforと<textarea>のidを同じにすることで、ラベルとテキストエリアがセットになる

button

ボタン要素
<div>や<a>、<input type="button">でも、ボタンのような見た目やJavaScriptによる動作を付与することは可能だが、
<button>を使うことで、ブラウザやスクリーンリーダーなどの支援技術に対して明確に伝えることができ、アクセシビリティが向上する


-- form内にbutton要素を置く時
<form action="/submit" method="post">
  <button type="submit">ボタンの名称</button>
</form>


-- form外にbutton要素を置く時
<form id="myform" action="/submit" method="post">
  -- other elements
</form>
<button type="submit" form="myform">ボタンの名称</button>

type	挙動
submit	デフォルトフォームデータをサーバーに送信する＝画面遷移を伴うformの送信を行われない
reset	フォームの入力内容を初期値に戻す
button	デフォルトの動作を持たない JavaScriptなどでカスタムな動作を定義する際に使用する

<button>要素は、そのボタンが配置されている<form>要素に暗黙的に関連付けられる
その為、<button>要素が<form>タグの内側に直接記述している際は、form属性を指定する必要はない
逆に、<button>要素が<form>タグの外側に記述している際は、form属性で<form>要素に関連付けを行う必要がある
→form属性は、HTMLの柔軟性を高め、より複雑なフォームのレイアウトや構造を実現するために役立つ

fieldset

フォーム内の関連するコントロールをグループ化するために使用する
視覚的にグループを区切り、論理的にも関連する入力をまとめることで、フォームの構造を分かりやすくする


  <fieldset>
    <legend>連絡先</legend>
    <label for="phone">電話番号:</label>
    <input type="tel" id="phone" name="user_phone">
    <label for="address">住所:</label>
    <textarea id="address" name="user_address"></textarea>
  </fieldset>

legend

<legend>は、<fieldset>の要素内コンテンツに対するキャプションを記述する
＝<fieldset>要素の内容を説明するためのキャプションを定義する

<legend>要素は、<fieldset>の要素の最初の子要素として配置する必要がある


<fieldset>
  <legend>個人情報</legend>
  <label for="name">名前:</label>
  <input type="text" id="name" name="user_name">
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="user_email">
</fieldset>

Webページの記事を再利用する

Webページの内容がブログやニュースなど1つで完結し、記事を再利用することがある際には、<section>および<article>を利用する
ページの構造を明確にするために使用し、検索エンジンにWebページの構造を正しく伝えることができる
→ HTML 5.0から導入され、SEO対策になる

<section><article>記事内容</article></section>

他のサイトや文献から文章の一部を引用する

元の文章のまま記載し、検索エンジンにコピーした文章では無い事を認識させるために利用する
ページの構造を明確にするために使用し、検索エンジンにWebページの構造を正しく伝えることができる
→ HTML 5.0から導入され、SEO対策になる


<blockquote cite="引用したURL">
  <p">引用文</p">
</blockquote>

余談を記載する

HTML文書のメインコンテンツとは直接的な関連性がない、補足的な情報を表示するための要素
サイドバー、注釈、引用、コラムを記載する際に使用する


<aside>
  <p">余談として記載したい内容</p">
</aside>

説明リスト

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

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>

JavaScriptをWebページに組み込む

HTMLを読み込んでから実行するように、</body>の前に<script>を記載する

1.HTML中にJavaScriptを直接記述する


</body>
<script>
  // JavaScriptコードを記述する
  console.log("Hello World"); //開発者ツールのコンソールタブに表示される
</script>

2.JavaScriptファイルに記述する


<script src="./script.js"></script>
</body>

<footer>

文書やセクションのフッターを定義するために使われる
フッターには通常、文書の作者に関する情報、著作権データ、利用規約へのリンク、連絡先情報などが含まれる
記載場所：<main>の下
書き方　：<footer>フッターとして記載したい項目</footer>

作者の連絡先を含めたい時は、<addressr>に連作先情報を含める

ショートカットを設定する

各要素にaccesskey属性を指定すると、ショートカットが設定される


<footer>
<!-- 保存ボタンに"s"のショートカットを設定する -->
<button type="submit" accesskey="s">保存</button>

スクリーンリーダにコンテンツを認識させる

aria-hidden属性をtrueにすることで、スクリーンリーダーなどの補助技術からページの内容を隠す事が出来る

(例) <div id="years" aria-hidden="true"></div>

aria-label属性に要素の内容を定義することで、スクリーンリーダに要素の内容を認識させることが出来る

(例)　<button aria-label="検索"></button>

スクリーンリーダにコンテンツを隠す

role属性を指定することで、HTML要素の意味をより明確にし、スクリーンリーダーなどの補助技術がページの内容を正確に理解できるようになり
これにより、視覚障害者や聴覚障害者など、様々なユーザーがウェブサイトをより快適に利用できるようになる
WAI(Web Accessibility Initiative)にて、各セクション要素にregion roleを与える事が推奨されている

<section role="region"></section>

エスケープシーケンス(特殊文字)

HTMLには様々なエスケープシーケンス(特殊文字)存在する
第行的なものを以下に示すが、もし上手く表示されない事は、都度調べる事

記号名	表示したい文字列	特殊文字
小なり	<	<
大なり	>	>
アンパサンド	&	&
ダブルクオーテーション	"	"
アポストロフィ	'	'
スペース
半角スペース1文字
全角スペース1文字		&emsp;

(補足)スペースについてスペースキーで半角/全角スペースキーを入力できるが、半角スペースは2つ以上のスペースを入れても1つしか反映ｓれない
また、全角スペースは入力した個数だけ、字下げが可能だが、レイアウト調整に絶対に使用しない事
必ずレイアウト調整はCSSで行う

HTMLテンプレート

動的サイトにおけるHTMLのテンプレートは、ウェブページの構造や共通のデザイン要素を定義し、そこに動的なデータを埋め込んで最終的なHTMLを生成するための仕組み
多くのプログラミング言語やWebフレームワークで、動的なコンテンツ生成と表示のためにテンプレートエンジンが利用されている

HTMLテンプレートを利用することの利点：
・プレゼンテーションロジックとアプリケーションロジックの分離される
　→HTMLのデザイン(見た目)と、データを処理するPythonなどのコードを分離でき、開発と保守が容易になる
・デザイナーとプログラマーがそれぞれの専門分野に集中できる
・コードの再利用性が構造する
　→共通のレイアウト(ヘッダー、フッター、ナビゲーションなど)をテンプレートとして定義し、複数のページで再利用できる
・開発効率の向上
　→繰り返し記述するHTML構造をテンプレート化することで、開発者は動的なコンテンツの生成に集中できる
・HTMLがより構造化され、可読性の向上する

ページネーション機能

ウェブサイトやアプリケーションにおいて、大量のコンテンツを複数のページに分割して表示するための仕組み
例えば、検索結果、商品一覧、ブログ記事一覧、コメント一覧などでよく見られる
実際のコード例は、Pytonに記述

12.参考

GeeksforGeeks
mdn web docs
ProEngineer
W3CScholl

4.Front End Development_HTML - YukaKoshiba/MyknowledgeDocs GitHub Wiki

目次

HTML

お作法

用語

基本の構成

コメント

HTML宣言

<html>

<head>

<meta>

<title>

レイアウトを指定する

<body>

<header>

<main>

<見出しを記述する>

テキストの段落を作成する

箇条書きにする

番号順にする

表を挿入する

リンクを貼る

画像を挿入する

画像にリンクを貼る

画像とキャプションを関連付ける

SVG要素

SVG基本画像

動画を埋め込む

別のHTMLを埋め込む

コード表示にする

CSS以外でレイアウトを変更する

ユーザから情報を取得する

form

input

label

output

button

fieldset

legend

Webページの記事を再利用する

他のサイトや文献から文章の一部を引用する

余談を記載する

説明リスト

JavaScriptをWebページに組み込む

<footer>

ショートカットを設定する

スクリーンリーダにコンテンツを認識させる

スクリーンリーダにコンテンツを隠す

エスケープシーケンス(特殊文字)

HTMLテンプレート

ページネーション機能

12.参考

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️