このページについて
このページではウェブサイトを作る上で欠かせないHTMLの役割と、書き方を解説しています。
HTML
HTMLはHyper Text Markup Languageの頭文字をとってHTMLと呼ばれています。ハイパーテキストとは簡単にいえばインターネット上のテキスト全般の事を指します。マークアップはコンピュータに対してハイパーテキストに対して意味を付与していく、いわゆる「タグ付け」みたいな事を指します。Languageはそのまま言語です。
つまりHTMLを日本語に訳すと「インターネット上のテキストに対してコンピューターが理解できるようにタグ付けをする言語」って事になります。
HTMLの役割
HTMLはウェブサイトを作る上でかなり頻繁に出てくるのでワードだけ見た事があるとか、実際に何かしら書いた事があるとか言う方もいると思います。HTMLは他のPHPやJavaScriptとは違ってかなりシンプルなので、覚えてしまえば結構簡単に扱えます。
HTMLは上で書いた通り、テキストにタグ付けをする言語です。ウェブサイト構成でよく使われる他言語の特徴はそれぞれ別の分野を担当しているので、HTMLはHTMLが担当する事をしてもらう事になります。
HTMLのタグ付けの例を書くとこんな感じの太字だったり、リンクを表したり、表を書いたり。CSSは文字の装飾や表示位置、色なんかを変更できます。PHPとJavaScriptは受け取ったデータを処理して色々と変化させたり、そう言う事が得意です。
HTMLの書き方
実際にHTMLを書くための準備を紹介しますが、特別なソフトウェアとかは必要ありません。このサイトではmacOS向けの解説が中心なのでmac寄りにはなりますが、基本的にはテキスト編集ソフトさえあればOKです。
macでは標準でテキストエディットというソフトウェアが入っているのでそれでOKです。
HTMLは「タグ」と呼ばれる要素を使います。この「タグ」で、テキストを囲む書き方をします。しかしウェブサイトとして認識される必要もあるので、まずはテンプレートをコピペしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>いきなり色々と書かれていますが、これら全てを覚える必要はありません。最初に覚えてほしい重要な事は「開始タグ」と「終了タグ」の2種類があると言うことだけです。
開始タグと終了タグ
HTMLは文字の前後に開始タグと、終了タグを書くのが正しい書き方になります。一部は終了タグを省略することもできるんですが、できるだけ書いておいて方がいいかなって思ってます。
開始タグと終了タグの関係性は以下のようになっています。
テキスト部分の前後にそれぞれタグがあります。開始タグと終了タグの違いはスラッシュ(/)の有無です。タグにはかなりの種類があるんですが、上のテンプレート的なものもあればかなり多く使うものもあったりします。
HTMLを書く場所について
上記のテンプレートのうち、HTMLを実際に書くのはbody部分の真下からです。正確にはbodyタグの間ですね。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>これも全てHTMLタグなので、開始タグと終了タグが存在しています。そしてbodyの開始タグと、終了タグもしっかり存在しますね。通常、ウェブサイトとして表示されている部分は全てbodyタグの中身です。
それ以外のタグを簡単に解説するとheadタグはブラウザや検索ロボットに対して情報を渡すためのタグ。titleタグはそのページの名前になりますが、今回はまだ未設定でOKです。
中に一つだけ終了タグが存在しないmetaタグなるものがあります。これは少々特殊なタグで、終了タグがなくてもOKです。やってることはブラウザに対して文字コードというものを指定しているだけです。
実際に書いてみる
実際にhtmlタグを書いてみましょう。bodyタグの間に、まずpタグを書いてみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>段落</p>
</body>
</html>pタグは「段落」を意味するタグです。最もシンプルかつ文章を多く使うサイトでは頻繁に目にする事になるタグです。開始タグも終了タグもシンプルに書けます。
これを書いたらテキストファイルを保存します。
htmlファイルの作成
ファイルエディットで名前をつけて保存を選び、名前の部分はなんでもいいんですけど拡張子と呼ばれる部分を.htmlに変更します。
大文字でも小文字でも構いません。ファイルが出来上がったらダブルクリックなどして開いてみましょう。アプリケーションで開く→ブラウザの順でもOKです。おそらくは段落のみが表示された真っ白なページが現れると思います。
これが基本的なhtmlタグの書き方と、htmlファイルの作成方法です。上でも書いた通り、普段見ているのはbodyタグの中身だけです。まずはそこにhtmlタグを書いていくってことだけでも覚えておけばOKです。
おまけ
ウェブサイトを作る上で使う言語は主にHTML/CSS/PHP/JavaScriptの4つです。そしてどこから学べばいいの？みたいな事は考える事があるかもしれません。正直言うとHTMLは中学生でも問題なく理解できるレベルの言語なので、まず軽く触れてみるって感じであればHTML。
その他の3種に関しては本腰入れて勉強しようかな！って部分が多いため、ある程度継続するならお勧めではあります。短期間かつ軽く触れてみたい程度であればHTMLのみでOKです。
まとめ
HTMLはウェブサイトを構成する一番簡単な言語です。マークアップというタグ付けをする言語なのでHTMLのみではよく見かけるウェブサイトを作る事はできませんが、最も基礎である事は間違いないのでウェブサイトを作ってみたい方はこの言語もしっかりと覚えておきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。