【初心者向け】HTMLの基本的な書き方・構造を解説

※当サイトではアフィリエイト広告を利用しています。

HTMLとCSSを知っている人

HTMLファイルとCSSファイルを作成したら、Webページの土台を整えていく必要があります。

Webページの土台はHTMLというマークアップ言語を利用して作成します。

そこでこの記事ではHTMLを利用してWebページの土台を作っていきます。

気になる方は是非最後まで読んで頂ければと思います。

以下の記事も是非ご覧ください。

HTMLとCSSを知っている人

HTMLとCSSとは?

HTMLとCSSを知っている人

Webページの土台を作る前にHTMLとCSSとは何かみていきましょう。

HTMLとは?

HTMLはWebページの土台を作るための言語です。

HTMLは文章の構造をコンピューターに指示し、見出しや段落、画像の表示や他の文書へのリンクなどを指定する言語です。

世の中のほとんどのWebページはHTMLでWebページの土台ができています。

HTMLはテキストに「タグ」と呼ばれるものを利用して記述していきます。

例えば、タイトルや見出し、本文といった区切りをHTMLで記述できます。

「タグ」は「<開始タグ>~<終了タグ>」というようなルールでソースコードを書いていきます。

タイトルは「<title>~</title>」、見出しは「<h1>~</h1>」、段落は「<p>~</p>」と表現します。

他にも100を超える種類があります。

Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。

HTMLとCSSを知っている人

CSSとは?

CSSは見た目のデザインを整える言語です。

CSSは文章にどのような装飾（デザイン）を行うかを指定できます。

「Cascading Style Sheets」の頭文字をとったものであり、スタイルシートとも呼ばれます。

CSSにはHTMLのタグの「何を」「どうするのか」を記述しています。

例えば、CSSを利用することで「文字色」、「背景色」、「文字サイズ」などを指定できます。

HTMLだけを利用してWebページを作成すると単調なものになりますが、CSSを利用することでWebページをキレイに整えれます。

HTMLとCSSを知っている人

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

HTMLとCSSを知っている人

本書はHTMLの要素（タグ）とCSSのプロパティを解説したリファレンスです。

開きやすく手元に置きやすいB6判で、タグやプロパティの内容をサッと調べることができます。

タグやプロパティの解説だけでなく、基礎知識編ではHTMLやCSSの仕様、記述方法に加え、文字参照、URLといったWeb制作者として不可欠な知識も解説しています。

また、読者特典として、本書で使用しているサンプルコードをダウンロードできます。

リンク

HTML&CSSを学びたい方必見

HTMLとCSSを知っている人

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

リンク

【基本的な構造】Webページの土台をつくっていきましょう!

HTMLとCSSを知っている人

ここではHTMLを利用して最低限必要な設定をみていきましょう。

Webページの土台の完成イメージは以下の通りです。

複雑に見えますが、１つ１つおさえていくと、難しい話はほとんどありません。

HTMLは下記のように文字とアルファベットや記号を組み合わせて書きます。

<!DOCTYPE html>
<html lang="ja"> 　
<head> 　　
<meta charset="UTF-8">
<title>Webページの土台</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
</body> 
</html>

上記で使用されているHTMLタグ

<html>~</html>：HTML文書であることを宣言する
<head>~</head>：ヘッダ情報を表す
<body>~</body>：文書本体を表す
<meta>：メタ情報を指定する
<title>~</title>：文書のタイトルを表す
<link>：スタイルシートを指定する

Webページの土台作成手順

STEP.1

DOCTYPE宣言をする

ブラウザは、まず第一にその文書がどんな言語で書かれているのかを把握する必要があります。

そのため、WEBページ作成に際には、真っ先に宣言する必要があるのがこのDOCTYPEです。

そこで1行目でDOCTYPE宣言をします。

HTML5では、DOCTYPE宣言は1種類で、シンプルな記述となります。

<!DOCTYPE html>

STEP.2

ヘッダ情報と文章本体を記述する

「<html>~</html>」の中に「<head>~</head>」と「<body>~</body>」を用意します。

head要素の中には「文書に関する情報」をbody要素の中には「Webサイトで表示したいコンテンツ」を記述します。

そして、「<html>~</html>」にはlang属性を追加しました。

lang属性は、要素の内容がどのような言語で記述されているかを表します。

日本語を記述していくので、「ja」という値とします。

<!DOCTYPE html>
<html lang="ja"> 　 
<head> 　　 
</head> 
<body> 
</body> 
</html>

STEP.3

エンコードの種類を指定する

次にエンコードの種類を指定します。

エンコードの種類を指定することで文字化けが起きるのを防ぐことができます。

エンコードの種類は「<head>~</head>」の中に「<meta charset=”UTF-8″>」を追加します。

他にも文字コードには「Shift_JIS」「EUC-JP」「ISO-2022-JP」などがあります。

<!DOCTYPE html> 
<html lang="ja"> 　 
<head> 
<meta charset="UTF-8">　　 
</head> 
<body> 
</body> 
</html>

STEP.4

タイトルを指定する

タイトルは「<head>~</head>」の中に「<title>~</title>」を追加します。

ここでは「Webページの土台」というタイトルにしたいので、「<title>Webページの土台</title>」とします。

これらはブラウザのウィンドウ上部左側に表示され、またお気に入りやブックマーク登録の際にも表示されます。

<!DOCTYPE html> 
<html lang="ja"> 　 
<head> 
<meta charset="UTF-8">
<title>Webページの土台</title>
</head> 
<body> 
</body> 
</html>

STEP.5

スタイルシートを指定する

デザインを指定することができるスタイルシートを指定します。

スタイルシートは「<link rel=”stylesheet” href=”style.css”>」で指定できます。

ここで注意点ですが、保存するときはHTMLファイルと同じ階層に保存するようにしましょう。

<!DOCTYPE html> 
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webページの土台</title>
<link rel="stylesheet" href="style.css">
</head> 
<body> 
</body> 
</html>

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

HTMLとCSSを知っている人

月額100円程度で利用できるおすすめのレンタルサーバーとして以下のものがあげられます。

ロリポップ！
⇒ 10日間無料体験に申し込む!
・速さ・安定性を備えた定番ベーシックプランがおすすめ！
・初期費用無料、月額550円〜、ドメイン2個永久無料などお得なキャンペーン実施中！
・10日間無料体験期間実施中
エックスサーバー
⇒ 10日間無料体験に申し込む!
・【2024/4/3まで】最大50%オフ！月額495円～利用できるキャンペーン実施中
・全プランで独自ドメインが永久無料でご利用可能！
・10日間無料体験期間実施中
ConoHa WING
⇒ WINGパックでお得に申し込む!
・【2024/3/13まで】WINGパックの12カ月以上新規お申し込みで通常料金から最大53%OFF
・WINGパックなら独自ドメインが最大2つまで永久無料！

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

HTMLとCSSを知っている人

以下のプログラミングスクールもオススメです。

是非検討してみてはいかがでしょうか？

侍テラコヤ（初月50%OFF学び応援キャンペーン実施中）（解説記事はこちら）
⇒ 学び応援キャンペーンでお得に申し込む!
・コスパ最高! 月額2,980円〜利用できる!
・単月定額と比べて総額最大44,400円OFF!
・学び応援キャンペーン実施中!
ZeroPlus Gate（受講料98,000円がなんと0円!）（解説記事はこちら）
⇒ 受講料0円でプログラミングを学ぶ!
・受講料0円
・現役エンジニアに質問し放題
・30日で副業レベルのWebスキルを学べる
本気のパソコン塾（無料体験特典3つあり）（解説記事はこちら）
⇒ 7日間無料体験または無料相談会に申し込む!
・実際に役立つウェブデザイン、ウェブプログラミングを身につけることができる
・【期間限定】無料相談会参加特典3つあり!
・7日間無料体験・無料相談会実施中!