🚀

HTML基礎[復習]

2023/09/02に公開

はじめに

学習したHTMLの内容を一気に復習たので覚えるためのメモにしています。
あやふやな部分をピックアップしました！！

HTMLの書き方

HTMLは、ページの要素や構造をブラウザに伝えるための言語です。
HTMLを文法どおりに記述し、.html（拡張子）をつけてファイルを保存することで、HTMLファイルが作成できます。
拡張子とは、ファイル名の末尾につけられる文字列で、ファイルの種類を識別するために使います。ファイル名の末尾を.（ピリオド）で区切り、3文字～4文字の半角英数字を追記します。

要素

開始タグ：表示内容の始まりを示すタグ　例：<div>
終了タグ（閉じタグ）：表示内容の終わりを示すタグ　例：</div>
コンテンツ：開始タグと終了タグの間に、文章などの内容（実際にブラウザに表示される内容）を- - 記述　例：<h1>アイウエオ</h1>
要素：開始タグ、コンテンツ、終了タグの全領域のこと
上の画像のように、コンテンツを開始タグと終了タグで囲むことがHTMLの基本書式です。
この開始タグと終了タグで囲んだ領域全体を、要素と呼びます。

文書型宣言

<!DOCTYPE HTML>

「!DOCTYPE」とは文書の解釈に使うDTDを宣言するもので、正確に言えばHTMLのタグではありません。HTML文書を作成するとき、HTMLタグよりも先頭にまず書くべきなのが DOCTYPE 宣言です。
この記述で文書タイプが「HTML」であるということを表しています。
多くのWebブラウザはDOCTYPE宣言の有無やその内容に応じて、標準準拠モード、おおむね標準準拠モード、後方互換モードといった異なる方法で文書を表示します。このDOCTYPEによる表示方法の切り替えはDOCTYPEスイッチと呼ばれています。
また標準準拠モードでは古いブラウザに対応していないので、後方互換モードを使用する必要がある場合もあります。

標準準拠モードとは?

標準準拠モードとは、ブラウザの表示モードの1つで、Web標準の仕様どおりに表示を行うモードです。
現在の新しいブラウザの多くは、標準準拠モードで作成されたページを表示するように作られています。

後方互換モードとは?

レイアウトは Navigator 4 や Internet Explorer 5 のような非標準の動作をエミュレートします。これは、ウェブ標準が広く採用される前に作られたウェブサイトをサポートするために必要です。

meta要素

<meta charset="UTF-8" />

meta要素は、ページの情報を定義する要素です。

要素	内容	例
文字コード	文字を表示するルール	「UTF-8」・「SHIFT-JIS」
title	Webページのタイトル	<title>初めてのHTML</title>
description	Webページの紹介文。検索結果のタイトルの下に小さく表示されているページ要約のテキスト	<meta name=”description” content=”〇〇〇”>
keyword	検索時のキーワードを設定する要素	<meta name=”keywords” content=”○○,○○,○○”>
viewport	「表示領域」とも呼ばれており、スマホやタブレットなどのモバイル端末でWebページを適切なサイズで表示させるために必要な値です。	<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover”>

HTMLブロックとインライン要素

HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールが簡単に見れるチートシートを見つけたので参考にしました！
https://yoshikawaweb.com/element/

ブロックレベルの要素

一般的に使用される 2 つのブロック要素は、<p> と<div>
常に新しい行で始まり、ブラウザは要素の前後にスペース (マージン) を自動的に追加する
ブロックレベルの要素は常に利用可能な全幅を占める

要素	説明
<div>	ブロックレベルの汎用コンテナ。
<p>	段落を表す要素。テキストの段落をマークアップ。
<h1>〜<h6>	見出しを表す要素。コンテンツのセクションを識別。
<ul>	順序のないリストを表す要素。<li>要素と組み合わせて使用。
<li>	リストアイテムを表すの要素。
<section>	セクションを表す要素。ウェブページの主要なセクションをグループ化。
<article>	独立したコンテンツを表す要素。ブログの投稿やニュース記事などをグループ化。

インライン要素

新しい行で始まらない。
必要なだけの幅を占める。

HTML の代表的なインライン要素は次のとおりです。

要素	説明
<span>	インライン要素のコンテナ。グループ化やスタイリングに使用。
<a>	アンカーリンクの作成。クリック可能なリンクを作る。
<strong>	強調されたテキストを表示。重要性や強調を表現。(太字)
<em>	強調されたテキストを表示。感情的な意味や強調を表現。(斜体)
<img>	画像の表示。URLや代替テキストを指定。
<input>	ユーザーの入力を受け付ける。テキスト入力やボタンなどの種類がある。
	改行の挿入。テキストや要素の表示を次の行に移動。

補足：コメントアウトのショートカットをメモしておきます
Windows：Ctrl + /

参考にさせていただいた記事

https://gc-seo.jp/journal/meta/

まとめ

ブロック要素とインライン要素の違いは調べればもっと詳細な違いが出てくると思うので、どんどん調べてアウトプットしていきたいと思います！
下記のような記事もブロックレベル・インライン要素と親要素・子要素の関係性について、参考になりそうだったので読んでみようと思います。