HTMLについて勉強したのでアウトプットもかねて説明させていただきます。
HTMLとは
HTMLとはwebページの構造とコンテンツを定義するためのマークアップ言語です。
1 HTMLの基本構造
HTML文書は通常以下のような基本構造を持ちます：
<!DOCTYPE html> <!-- 文書のタイプを定義 -->
<html>
<head>
<meta charset="UTF-8"> <!-- 文書の文字エンコーディングを指定 -->
<title>ページのタイトル</title> <!-- ページのタイトルを指定 -->
</head>
<body>
<!-- ここにページのコンテンツを記述 -->
</body>
</html>
2 様々なタグ
HTMLには様々なタグがあります。
<p>これは段落です。</p>
<img src="画像のURL" alt="代替テキスト">
セマンティックなHTMLとは
セマンティックHTMLとはHTMLのマークアップを文章の構造や意味に基づいて,適切な意味を持つタグを使って作成するアプローチのこと
セマンティックHTMLでは、タグ自体がコンテンツの意味を反映するように選択します。これにより、webページの構造が明確になり、検索エンジンやアクセビリティの向上にもつながります。
セマンティックHTMLの代表的なタグ
:ページのヘッダー部分を表すタグ :ナビゲーションメニューを表すタグ :ページのメインコンテンツを表すタグ :独立した記事やコンテンツを表すタグ :セクションを示すタグ :サイドバーや補足情報を表すタグ :ページのフッターを表すタグフォームとバリデーション
フォーム
HTMLのフォームではwebページからユーザーがテキスト入力、ラジオボタン、チェックボックスなどを使ってデータを送信する仕組みがあります。
action:データを送信するURLを指定
method:フォームデータを送信するHTTPを指定します。
<form action="/submit" method="post">
<!-- フォームのコントロール要素がここに入ります -->
</form>
バリデーション
フォームバリデーションはフォームに入力されたデータが正しい値がどうかチェックします。ユーザーが入力値をチェックすることで不適切なデータをサーバーに送信することを防ぎ、データの信頼性を保ちます。
type="url":入力されたデータがurl形式かどうかチェックする
type="tel":入力されたデータが電話番号形式かどうかチェックする
pattern:正規表現を使って入力されるデータが特定のパターンかどうかチェックする
min,max:数値や日付に対して最小値や最大値を指定する
minlength,maxlenght:テキストのフィールドに対して最小文字数や最大文字数を指定する
<form>
<label for="phone">電話番号：</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required>
<input type="submit" value="送信">
</form>
<form>
<label for="age">年齢：</label>
<input type="number" id="age" name="age" min="18" max="100" required>
<input type="submit" value="送信">
</form>
バリデーションはHTML、JS、サーバーサイドどこでした方がいいのか？
セキュリティの観点から見るとHTML,JS,サーバーサイド全てでした方が信用性が保たれる。
クライアントサイドのバリデーションはユーザー体験を向上させることができますが、セキュリティ上の理由で信頼性が低いため、必ずサーバーサイドのバリデーションと併用することが重要です。
さらにサーバーサイドのバリデーションはクライアント側よりも厳しくバリデーション処理をすることが推奨されています。
HTMLの豆知識
外部JavaScriptファイルを読み込む順番が早くなる方法
defer属性を持つscript要素を使用すると、JavaScriptファイルの読み込みがHTML文書のパース（解析）と同時に行われますが、実行はHTML文書のパースが完了してから行われます。つまり、defer属性がある場合、JavaScriptの実行はHTML文書の読み込みが完了した後に行われるため、ページの表示をブロックすることがありません。これにより、ユーザーエクスペリエンスが向上し、ページの読み込みが高速化されることが期待できます。
<!-- defer属性を持つscript要素 -->
<script src="my-script.js" defer></script>
しかしページが外部ファイルが多すぎると
defer属性を持つscript要素は、多くのウェブブラウザでサポートされており、パフォーマンス向上のために利用されることがあります。ただし、注意点として、defer属性を持つscript要素は、複数のファイルがある場合にも読み込まれる順序が保証されないため、依存関係に注意する必要があります。
HTMLの説明は以上です。ありがとうございました。