動画で基礎を学ぶ!

宣言文の記述から、headタグなど

HTMLとは

HTMLはHyperText Markup Languageといいます。
Webサイトを作るための基本的な言語です。

HTMLは、Webサイトの構造を定義し、テキスト、画像、リンク、フォームなどの要素を配置します。
例えば、見出しや段落、リスト、リンクなどを記述すると、ブラウザがそれを解釈し、視覚的なWebページとして表示します。HTMLを理解すると、インターネット上で情報を整理して表示する方法が学べます。

HTMLをコーディングする際には、基本構文を理解することが重要です。
基本構文は、Webページの構造を正しく定義し、ブラウザがそのページを正確に表示するためのルールです。
これがなぜ必要かというと、正しい構文を使うことで、誰が見ても同じように表示されるWebページを作成できるからです。

標準化
基本構文に従うことで、Webページがどのブラウザでも一貫して表示されます。
これは、ユーザーにとって使いやすいWebサイトを提供するために重要です。
可読性
構文を守ることで、他の開発者や自分自身が後からコードを見たときに理解しやすくなります。
これにより、メンテナンスや更新が容易になります。
SEOとアクセシビリティ
正しいHTML構文を使用すると、検索エンジンがページをより良く理解し、検索結果で適切に表示されやすくなります。また、アクセシビリティが向上し、スクリーンリーダーなどの支援技術を使うユーザーにもやさしいWebサイトになります。

「Doctype宣言」といい、ファイルがhtmlであるということを宣言します。
html5では、「<!DOCTYPE html>」と記述し、HTMLをコーディングする際には必ず必要となります。

<!DOCTYPE html>はショートカットキーで記述する方法があるので覚えておきましょう。
ショートカットキー：エディター上で ! と入力 + Tab キー

Doctype宣言のすぐ下に記述します。
htmlのすべての要素はHTMLタグの中に記述する必要があり、外側に書かれているものは正確に読み込まれません。
※htmlタグの中に記述されているものがhtmlのコードであると判断されます。

lang 属性
初期値では、lang属性に”en”が指定されており、このWebページは英語で書かれていることを示しています。基本的に日本語のWebページを作成するので、lang属性に”ja”に設定しておきましょう。

<head>タグは、ページに必要な情報を定義するためのタグです。
ブラウザに直接表示されるコンテンツではなく、ページのタイトル、紹介文、検索キーワード、外部ファイルの読み込みなどを定義します。

<title>:	ページのタイトルを定義。
	ブラウザのタイトルバーに表示。

<meta>：	メタデータを定義。
	キーワード、説明、文字エンコーディング、ビューポート設定などを指定するために使用。

<link>：

外部のスタイルシートやアイコンファイルなどを文書にリンクするために使用。

<style>：

内部スタイルシートを文書に埋め込むために使用。

<script>：

JavaScriptコードや外部スクリプトファイルを文書に埋め込むために使用。

<body>タグは、ページの実際のコンテンツを定義するためのタグです。
<body> タグ内には、テキスト、画像、リンク、表、フォームなどのブラウザに直接表示されるすべての要素がこのタグ内に配置されます。

<header>、<main>、<footer> タグは、Webページの構造をより意味のある方法で表現するために使用されるタグです。

<header>タグ
<header> タグは、Webページのヘッダーを定義します。
通常、Webサイトのロゴ、サイトのタイトル、ナビゲーションメニューなど、ページの最上部に配置されます。
<main>タグ
<main>タグは、Webページの主要なコンテンツを定義します。
通常、ページの中心部に配置され、Webページの核となる情報やコンテンツが含まれます。
<footer>タグ
<footer>タグは、Webページのフッターを定義します。
通常、ウェブサイトの連絡先情報、著作権情報、サイトマップなど、ページの最下部に配置されます。

次のステップで、「HTMLをブラウザで表示する方法」に取り掛かります。

HTMLの基本

全 4 動画

CSSの基本