【フロントエンド入門1】HTMLの基本構造｜Webページ作成の出発点

Webページを作成したいと思ったら、まず最初に了解するべきはHTMLの基本構造です。HTMLはWebページの格容を構成し、テキストや画像、リンクなどをロジカルに配置する基盤となる言語です。ここでは、その基本構造をステップバイステップで解説していきます。初心者でも理解しやすい内容となっていますので、実際に手を動かしながら見ていきましょう。

HTMLの基本構造
1. HTML文書の基本構造
2. HTML構造の要素の解説
HTMLの基本要素
1. 要素とは何か
2. 代表的な要素
HTMLの構文と定義法
1. 定義法の基本
実際に手を動かしてみよう
1. シンプルなWebページ作成
おわりに

HTMLの基本構造

HTMLの基本構造は、Webページを上手に構築するための要素がきちんと並べられています。このセクションでは、基本的なHTMLドキュメントの体系を見ていきます。

HTML文書の基本構造

次は基本的なHTMLの代表的な構造例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
</head>
<body>
    <h1>ヘッダー1</h1>
    <p>これはサンプルなテキストブロックです。</p>
</body>
</html>

HTML構造の要素の解説

<!DOCTYPE html>: HTML5のドキュメントであることを示します。
<html>: HTML文書の格容を展開する格納タグです。
<head>: メタ情報やタイトルなど、ページの背景情報を記述します。
<body>: 実際に表示されるページ内容を記述する部分です。

HTMLの基本要素

以下に、HTMLでよく使われる基本要素とその定義を解説します。

要素とは何か

HTML要素はページの一部分を構成する基本ユニットです。それぞれの要素には意味や定義があり、ブラウザに正しく認識されることで、ページを正しく表示させることができます。

代表的な要素

<h1>：要素のヘッダーレベル1です。ページの最大の要点やタイトルに使用されます。
<p>：パラグラフ要素で、段落を表します。
<a>：ハイパーリンク要素で、別のページやURLへのリンクを記述します。
<img>：画像を表示する要素です。

HTMLの構文と定義法

HTML文書を構築する際は、正しい構文で要素を定義することが重要です。このセクションでは、定義法の基本を解説します。

定義法の基本

たとえば、要素を定義するときは次の構文で表します：

<要素名> コンテンツ </要素名>

この構文を正しく使用することで、ブラウザに正確なページ情報を伝えることができます。

実際に手を動かしてみよう

シンプルなWebページ作成

さらに理解を深めるために、実際に以下のコードを実装してみましょう。

ファイル名にindex.htmlを設定します。
上で解説した基本構造を試して実装してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初めてのWebページ</title>
</head>
<body>
    <h1>ようこそ、私のページへ！</h1>
    <p>ここにシンプルなテキストを記述します。</p>
    <a href="https://www.example.com">こちらにリンク</a>
</body>
</html>

このように実際に書いてみることで、HTMLの基本構造を身に付けることができます。