HTML入門まとめ - 元Webデザイナー兼コーダーの備忘録

他のサイトと同様、当ブログでもHTMLの入門記事を書いています。しかし、網羅的に書いているわけではありません。そのような解説サイトは他にいくらでもあります。詳細な説明はそちらに譲ります。当ブログでは、知っておきたい基礎知識やつまずきそうなところに絞って記事にしています。

本記事は、HTML入門シリーズの記事をまとめています。HTMLの概要、ルール、最低限覚えておきたいタグ、ページの構成とレイアウトなどについて書きました。

HTMLはルールを守り、適切なタグを使えれば問題ありません。

HTMLとは
HTMLのルール
- 記述ルール
- 基本構造:HTMLファイルの構成
はじめてのウェブページ
タグ
ページの構成
ページのレイアウト
その他
HTML,CSS,JavaScriptの役割
番外編:Pug
HTMLの勉強法
参考サイト

HTMLとは

HTMLとは、HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略で、ウェブページを作るための言語です。ハイパーテキストについてもう少し知りたい場合は、HTML入門:HTMLとはをご覧ください。

» HTML入門:HTMLとは

HTMLのルール

HTMLには、以下の2つのルールがあります。

記述ルール
基本構造

記述ルール

HTMLの記述で特に覚えておきたいルールは、以下の2つです。

ブラウザに表示したい内容をタグで囲む
ネストで書く

タグで囲む

HTMLファイルには、タグとブラウザに表示したい内容を記述します。具体的には、以下のように書きます。

<h1>HTMLの練習</h1>

タグとは<h1>や</h1>のことです。<h1>は開始のタグで、</h1>は終了のタグです。タグの間にブラウザに表示したい内容を書きます。

ネスト

要素の中に要素を入れて記述します。これをネストと言います。入れ子とも呼ばれます。具体的には、以下のように書きます。

<h1>HTMLの<strong>練習</strong></h1>

上記は正しいですが、

<strong><h1>HTMLの練習</strong></h1>

この記述は間違いです。タグは、入れ子になっていないといけません。ブラウザが正確に解析できず、想定とは違う表示になってしまう可能性があります。HTMLの記述ルールについては、HTML入門:HTMLとはをご覧ください。

» HTML入門:HTMLとは

コメントは、の間に書きます。以下のように書きます。

<!-- ここにコメントを記入する -->

コメントについては、HTML入門:HTMLのコメントの書き方と注意点をご覧ください。

» HTML入門:HTMLのコメントの書き方と注意点

基本構造:HTMLファイルの構成

HTMLファイルの中身の構成は、以下のようになります。

①DOCTYPE宣言
②htmlタグ
③headタグ
④bodyタグ

これがHTMLの基本構造です。この構造を守ってHTMLを書きます。HTMLの基本構造の説明は、HTML入門:HTMLの基本構造をご覧ください。

» HTML入門:HTMLの基本構造

はじめてのウェブページ

HTMLファイル作成し、表示を確認します。以下のようなコードをファイルに書いて保存します。ファイル名は、index.htmlとします。ファイル名は、任意のもので構いません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLの練習</title>
</head>
<body>
<h1>見出しタグ</h1>
</body>
</html>

保存したファイルをブラウザで開くと「見出しタグ」という文字が表示されます。

はじめてのウェブページを作るなら、HTML入門:はじめてのウェブページで手順を説明しています。

» HTML入門:はじめてのウェブページ

タグの種類は、100個以上あります。すべてを覚える必要はありませんが、一度すべてに目を通してください。よく使うタグだけ覚えて、その他は頭の片隅に置いておきます。あまり使わないタグは、使うときにその都度、確認すれば問題ありません。

よく使うタグ1

bodyタグ内でよく使うタグを挙げます。

h1～h6タグ
pタグ
aタグ
imgタグ
ul,liタグ
divタグ
spanタグ

他にもありますが、最低限覚えておくタグです。これらのタグの使い方や説明は、HTML入門:よく使うタグその1をご覧ください。

» HTML入門:よく使うタグその1

よく使うタグ2

headタグ内でよく使うタグを挙げます。

metaタグ
titleタグ
linkタグ
scriptタグ

他にもありますが、最低限覚えておくタグです。これらのタグの使い方や説明は、HTML入門:よく使うタグその2をご覧ください。

» HTML入門:よく使うタグその2

リンクの貼り方:aタグの使い方

aタグでリンクを作れます。とても重要なタグです。

aタグは、h1タグやpタグとは少し違う書き方をします。aタグは、タグに属性を指定して書きます。属性とは、ここでは「href」のことです。

<!-- aタグの記述例(絶対パスで指定) -->
<a href="https://shiroyuki2020.hatenablog.com/">元Webデザイナー兼コーダーの備忘録へ移動</a>

他に別タブで開いたり、ページ内リンクの書き方については、HTML入門:aタグの使い方をご覧ください。

» HTML入門:aタグの使い方

箇条書き:ul,liタグの使い方

箇条書きもよく使います。

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

箇条書きは、3種類あります。ここで紹介した以外の箇条書きについては、HTML入門:ul,liタグの使い方をご覧ください。

» HTML入門:ul,liタグの使い方

引用

ブログでは引用を書くことがあります。引用するときは「引用文と引用元をセット」で書きます。以下は、引用の参考例です。

<!-- 引用の記述例 -->
<blockquote>引用タグの基本的な使い方について書きます。引用文と引用元のセットで書きます。引用するときに法律の面で注意点がありますが、専門外なのでその点に関しては触れません。詳しくは他のサイトを参考にしてください。
<p><cite>参照元:<a href="https://shiroyuki2020.hatenablog.com/">元Webデザイナー兼コーダーの備忘録</a></cite></p>
</blockquote>

引用については、HTML入門:引用タグの使い方をご覧ください。

» HTML入門:引用タグの使い方

ページの構成

ウェブサイトの1ページの構成は、下図のとおりです。

ヘッダー
メイン(コンテンツ)
サイドバー
フッター

ここでは、おおまかに4つの部品を紹介しました。もっと細かい部品に細分化することもできますが、基本で覚えるには以上の4つで問題ないと思います。必ずこの名称というわけではありません。人や会社によって違うので、名称は適宜合わせてください。ページの構成については、HTML入門:ウェブサイトのページの構成をご覧ください。

» HTML入門:ウェブサイトのページの構成

ページのレイアウト

よくあるページのレイアウトは、下図のとおりです。

ページのレイアウトについては、HTML入門:ページのレイアウトをご覧ください。

» HTML入門:ページのレイアウト

その他

HTMLでつまずくところ

はじめてHTMLを書く方が直面するであろうつまずきポイントを挙げます。

スペルミス
画像が表示されない
構文エラー

これらの対処法は、HTML入門:HTMLでつまずくところをご覧ください。

» HTML入門:HTMLでつまずくところ

タグの誤用

SEO対策に関係するのが、タグの誤用です。簡単にいうと「適切なタグを選んで使いましょう」ということです。タグの誤用については、HTML入門:タグの誤用をご覧ください。

» HTML入門:タグの誤用

ウェブサイトの公開

全世界の人々にウェブサイトを見てもらうには、公開する必要があります。ウェブサイトを公開する方法については、ウェブサイト公開の手順をご覧ください。

» ウェブサイト公開の手順

HTML,CSS,JavaScriptの役割

ここまでHTMLについて書きました。ウェブサイト作りといったら、CSSとJavaScriptも関係します。 HTML、CSS、JavaScriptの関係については、HTML,CSS,JavaScriptの役割をご覧ください。

» HTML,CSS,JavaScriptの役割

番外編:Pug

HTML作成を効率化するために出てきたのがPugです。Pugについては、Pugの学習メモをご覧ください。

» Pugの学習メモ

HTMLの勉強法

HTMLの学習は、書籍やオンラインサービス、プログラミングスクールなど多種多様です。勉強法でお悩みでしたら「HTML入門:学習方法と学習リソース」をご覧ください。

» HTML入門:学習方法と学習リソース