目次

HTMLとは?初心者向けに簡単なコードの書き方や基本的なタグを解説

表紙

「ウェブサイトを作りたい!」と思っても、「そもそもHTMLって何?」となる方は多いと思います。

私も最初はまったく知らない状態から始めたので、その気持ちはすごくわかります。

HTMLとは、簡単に言うとウェブサイトに表示される「文字列」を記述するものです。(文字列とは文字の集まりのことです。簡単に言うと文章ですね。)

今回はHTMLとは何か?特徴やコードの書き方、基本的なタグを解説していきます。

目次

HTMLとは?

HTMLとは、ウェブサイトに表示する文字列を記述したファイルです。

HTMLでできることは、表示する文字列を決めたり、画像を表示させたり、表を作ったりできますが、HTMLだけでは見やすいウェブサイトを作ることができません

HTMLだけで作ったウェブサイト→

今どきの見やすいサイトを作るには、HTMLのほかに「CSS」が必須です。

CSSを使うことで、文字の大きさや色、画像の大きさやサイトの背景のデザイン。さらにはボタンを押したときのアニメーションまでをプログラムすることができます。

HTMLはマークアップ言語

実は、HTMLはマークアップ言語です。プログラミング言語ではありません。

マークアップ言語とプログラミング言語の違いは、情報を伝えるための言語か、情報を処理するための言語か、です。

マークアップ言語タグを使って、文章(情報)の意味、構成を伝える。
例: HTML、XML
プログラミング言語情報を処理する手順を書いたもの。
例: Javascript、Python

HTMLを始めたばかりで理解するのは難しいかもしれませんので、無理に覚えなくても大丈夫です。覚えても使わないので。

HTMLでできること

HTMLはどんなものか大体理解したところで、HTMLで何ができるか、見ていきましょう。

HTMLができると、様々なことができるようになります。

ウェブサイトの作成

HTMLのもっとも一般的な使い道は、ウェブサイト製作です。

これから説明するHTMLタグを使って、タイトル、見出し、段落などを書いていき、ブラウザに表示させます。

HTMLメールの作成

メールの中に画像があるメールを目にしたことはありますか?

あれらはHTMLメールといわれるもので、文字の色、リンクの貼り付けなど、メールの受信者の印象に残るメールを作ることができます。(文字の色付けにはCSSを使います。)

HTMLだけではできないこと

HTMLだけでも、文字や画像を表示することはできますが、ウェブアプリやフォームの作成などはできません。

そのような物を作る際に、CSSやJavascriptを使います。

動的サイトの作成

動的サイトとは、ユーザーごとに違う画面が表示されるサイトのことです。

例えば、ログインした際のユーザーページに表示される名前やメールアドレスはひとりひとり違うものが表示されますよね?

このような「動的」なサイトを作るにはJavascriptなどのプログラミング言語を使います。

動きのあるサイトの作成

動的の後に「動きのある」と書くと、同じじゃないかと思うかもしれませんが、動きのある、というのはそのままの意味で、例えば背景が動いたり、文字をクリックしたら色が変わったりすることです。

このような動きのあるサイトは、CSSを使って作成します。

現在目にするウェブサイトでCSSを使っていないものはほぼないといえます。

HTMLの構成

HTMLは三つの要素で出来ています。

タグそれがタイトルなのか、見出しなのか、本文なのかなどをブラウザに伝えるための記号。画面には表示されない。
要素タグに囲まれた画面に表示される文字列。
属性タグにつける追加情報。画面には表示されない。

それぞれを詳しく説明していきます。

タグ

タグとは、ウェブサイト上でタグが囲んでいる要素がタイトルなのか、見出しなのかなど、構造を表すものです。

開始タグ<>、終了タグ</>がタグです。

タグの説明

h1タグは開始タグと終了タグで囲った文字列をページのタイトルとして表示させます。

imgタグのように、終了タグを使わないタグもあります。

要素

要素は、開始タグ、終了タグに囲まれた文字列です。

ここのタグに囲まれた要素の内容が、実際にブラウザに表示されます。

要素の説明

上の画像でいう、「試しにHTMLだけで作ったウェブサイト」や、「これが、HTMLで作った文字と...」などが要素です。

例→

タグに囲まれた要素が表示されていると思います。

属性

属性は、タグに追加の情報を与えます。

属性は全て開始タグ内に記述され、属性名と属性値の二つで構成します。

属性名とはその属性が何を示すか(URLなのか、画像の大きさなのか)、属性値はその値(リンク先のURLや、表示する画像の横幅)を示します。

属性の説明

タグの簡単な解説

早速HTMLを書いてみよう!といっても何のタグを使っていいかわかりませんね。

まず初めによく使うタグを解説していきます。これらのタグはHTMLを書く上で頻出するので覚えましょう。

よく使うタグ

HTMLを書く際によく使うタグを解説していきます。

pタグ<p></p>段落を表します。
aタグ<a></a>リンクを作成する。
ul/liタグ<ul><li></li></ul>箇条書きのリストを作る。
imgタグ<img>画像を表示する。

pタグ

pタグは文字のまとまりを表します。pは段落paragraphの頭文字です。

pタグを使うことで、ほかのタグとの間に自動で一行分のスペースが空きます。見やすさのために、適時使用しましょう。

pタグの使用例

pタグの使用例(一部省略)

<!DOCTYPE html><!--!DOCTYPE.html,head,body,meta,titleタグについては後で解説します。-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>pタグ使用例</title>
    </head>
    <body>
        <p>段落1です。pタグを使って書いています。</p>
        <p>段落2です。複数行になる長い文章を書くと、自動で折り返されます。この時、行と行の間はほかのタグとの間より小さいです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </body>
</html>

aタグ

aタグは、リンクを作ります。aはアンカーAnchorの頭文字です。

要素には、文字や画像を使うことができます。

aタグ使用例

aタグ使用例

<!DOCTYPE html><!--!DOCTYPE.html,head,body,meta,titleタグについては後で解説します。-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>aタグ使用例</title>
    </head>
    <body>
        当サイトの<a href="https://exp4all.com">ホームページへ</a>のリンク
    </body>
</html>

href属性でリンク先を指定します。

aタグで囲まれた部分がリンクになります。なので、もし後で説明するimgタグをaタグでかこった場合、imgタグで指定した画像がリンクになります。

ul/liタグ

ul/liタグは箇条書きのリストを作ります。ulはunordered list(順序なしのリスト)の単語の頭文字、liはlist item(リスト項目)の頭文字です。

箇条書きにしたい要素の全体をulタグで、項目をそれぞれliタグで囲います。

ul/liタグ使用例

ul/liタグ使用例

<!DOCTYPE html><!--!DOCTYPE.html,head,body,meta,titleタグについては後で解説します。-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>ul/liタグ使用例</title>
    </head>
    <body>
        <ul>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
            <li>リスト4</li>
        </ul>
    </body>
</html>

liタグで囲まれた要素ごとに自動で黒点がつきます。

ulタグの代わりにolタグを使うと、黒点の代わりにliタグの要素に上から1,2,3,4...と番号が振られます。olはorder list(順序ありのリスト)の頭文字です。

imgタグ

imgタグはウェブサイトに画像を表示します。imgはimage(画像)の略です。

imgタグ使用例

imgタグ使用例

<!DOCTYPE html><!--!DOCTYPE.html,head,body,meta,titleタグについては後で解説します。-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>imgタグ使用例</title>
    </head>
    <body>
        <img src='../image/what-is-html.webp' alt='imgタグ'>
    </body>
</html>

src属性で画像ファイルのパス、alt属性にその画像の説明を書きます。alt属性に書かれた文字は、src属性で指定した画像が存在しない場合に代わりに表示されます。

上のボタンを押すと開くサイトは、画面よりも大きく画像が表示されていると思います。これは、画像の大きさを指定していないため、画像がそのままの大きさで表示されているからです。

width属性、height属性の片方、または両方をつけることで好きな大きさにすることができます。

片方だけを指定した場合、縦横比を維持したまま、指定した大きさに縮小、拡大されます。両方を指定した場合、縦横比を考えずに指定すると、横伸びや縦伸びする場合があります。

imgタグ使用例サイズ指定

widthを指定したimgタグ

※width、heightはどちらも400pxを指定(縦横比を考えてない)

実際に書いてみる

HTMLでよく使うタグもわかったところで、実際にHTMLのコードを書いてみましょう。

HTMLを書く際に、メモ帳やその他のソフトを使ってもいいですが、VSCodeを使うことを私はおすすめします。

VSCodeにはHTMLを書くのに便利な機能がたくさんあり、素早くコードを書くことができるようになります。

そんなVSCodeの導入方法は、下の記事で解説しています。

ここからはVSCodeを使っていることを前提に解説していきます。

HTMLファイルの作成

まずはHTMLファイルを作ってみましょう。

VSCodeの左上にある三本線を押して「ファイル」>「新しいファイル」をクリックして、「ファイルの種類を選択するか、ファイル名を入力してください。」と表示されるのでそこに「(好きな名前).html」と入力してEnterしてください。

そのあとに出てくるウィンドウで保存先を指定してください。私はデスクトップにhtmlというフォルダを作ってその中に保存しました。

フォルダってどう作るの?って方のために画像付きで説明します。

HTMLファイルの作成

①、②、③の順番にクリックしていく。

HTMLファイルの名前を付ける

「(好きな名前).html」と入力してEnterを押す。

HTMLファイルの保存先

左側の欄から「デスクトップ」をクリックする。空いているスペースを右クリックしてメニューを出す。

フォルダの作成

「新規作成」>「フォルダー」をクリックして新しいフォルダを作成する。

フォルダ名の変更

好きなフォルダ名を付けた後、そのフォルダをダブルクリックで開く。

HTMLファイルの作成

もう一度「(好きな名前).html」を入力してEnterを押す。

これでHTMLファイルができました。早速コードを書いていきましょう。

下の画像のような画面を表示するコードを書いてみましょう。

目標

例として「Hello!!World!!」は段落(pタグ)として、「GoogleのHP: Google」と「YahooのHP: Yahoo」は箇条書き(ul/liタグ)で、箇条書きの中の文字列「Google」と「Yahoo」はリンク(aタグ)として書きます。

先ほど作ったファイルに下のコードをキーボード叩いて入力してください。

                        <!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの書き方</title>
    </head>
    <body>
        <p>Hello!!World!!</p>
        <ul>
            <li>GoogleのHP: <a href="https://google.com">Google</a></li>
            <li>YahooのHP: <a href="https://yahoo.jp">Yahoo</a></li>
        </ul>
    </body>
</html>
                    

まだ説明していない!DOCTYPEやhtmlタグなどは後ほど解説します。

その後、「 Ctrl + C 」または左上の三本線>「ファイル」>「保存」をクリックすると保存されます。

HTMLファイルを開いてみる

次は作ったファイルを開いてみましょう。

デスクトップの「html」フォルダーまたは先ほど作ったフォルダーを開いてください。

おそらく普段使っているブラウザのアイコンのファイルがあると思います。「(好きな名前).html」をダブルクリックで開いてください。

すると、ブラウザが起動すると思います。

下のような画面が開いていたら成功です。

作ったファイルを開いてみた。

!DOCTYPE・html・head・bodyとは?

!DOCTYPE・html・head・bodyタグは必ずHTMLを書く際に使うタグです。

!DOCTYPEとは、文章の解釈方法を宣言するものです。HTMLファイルを作る際、一番最初に書くべきものです。

解釈方法というのを簡単に言うと、HTMLの仕様をブラウザに伝えるための宣言です。

「!DOCTYPE html」を付けないと古いバージョンのHTMLでブラウザに表示されてしまい、思ったように動かない原因になるので、必ずつけましょう。

DOCTYPEを宣言した後にhtmlタグを書きます。htmlは全ての親要素です

なのでpタグもaタグも全てhtmlタグの中に書かれます。

しかし、htmlタグのルールで、htmlタグの子要素は「headタグ」「bodyタグ」のみです。

つまりどういうことか、下のコードに書かれているpタグはhtmlタグの子要素としておいてはいけません。一応このように書いてもブラウザで表示されてしまいますが。

<!DOCTYPE html>
<html>
    <p>ここに書いてはいけません。</p>
    <head>
        <meta charset="UTF-8">
        <title>htmlタグ解説</title>
    </head>
    <body>
        <a href="//google.com">Google</a>
    </body>
</html>

headタグはそのHTMLの情報を記述します。実際には画面に描画されない情報です。

そのページのタイトルや文字のエンコードなどを書きます。

bodyタグはブラウザに表示したい内容を記述します。ここに書かれている文章なども全てbodyタグ内でpタグをつけて書かれています。

ウェブサイトに評されている画像や文字はbodyタグ内に書かれているということです。

meta、titleとは?

metaタグは、ウェブサイトに関する様々な情報を記述するタグです。

今回属性として指定しているcharset属性は、そのHTMLがどの文字コードで保存されているかを示しています。

文字コードはShift-JIS、EUCなど、いろいろありますが、最新のHTML5ではUTF-8を推奨されているのでUTF-8を指定しましょう。

titleタグはHTMLファイルのタイトルを決めるタグです。

ブラウザのタブの部分に表示されたり、検索した際に表示されるページのタイトルをここに書きます。

VSCodeのすすめ

キーボードを打ってずらずらと長い<!DOCTYPE html><html>...</html>を書いていたと思います。

しかし、VSCodeを使うと、基本的に全てのHTMLで使うタグ(!DOCTYPE, html, head, body, meta, title)を自動で入力してくれる機能がついています。

下の動画のように一瞬で入力できます。すごいでしょ?

VSCodeのすすめ

そんなVSCodeは下の記事で初心者向けにダウンロード・インストールの方法や日本語化、おすすめの設定を解説しています。

VSCodeの導入方法は?画像を使って日本語化や基本的な設定まで。ダウンロード・インストールを解説

復習

復習として下の画像と同じサイトを作ってみてください。タイトルつけるのを忘れないでね。

画像は縦300px 横300pxで作ってください。画像のhref属性の属性値は

https://exp4all.com/programming/html-css/html/image/what-is-html/review.webp

を指定してください(長いのでコピペしてね)。alt属性はわかりやすいような名前ですきにつけてください。

復習

この下に上の画像と同じサイトを作るためのコード(復習の答え)を載せておきます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML書いてみた</title>
    </head>
    <body>
        <p>HTMLファイルの構成</p>
        <ul>
            <li>タグ</li>
            <li>要素</li>
            <li>属性</li>
        </ul>
        <p>下の画像はもともと縦600px 横800pxでした。</p>
        <img src="https://exp4all.com/programming/html-css/html/image/what-is-html/review.webp" alt="復習" height="300px" width="300px">
    </body>
</html>

まとめ

この記事では、HTMLの一番大事で基礎であるHTMLとは何か、HTMLを使って何ができるか・できないか、HTMLファイルをどのように書くかなどを解説しました。

HTMLはウェブ開発の基礎であり、プログラマーやウェブライターなど、ウェブを使って何かをしたい方はHTMLの仕組みをしっかりと理解することをおすすめします。


このサイトではHTMLやCSSなどに関する記事を書いています。

HTMLに関してわからないことができた、忘れてしまった場合はいつでも当サイトを見てみてください。

それでは、よいプログラミングライフを!

ではでは~!