HTMLは、Webサイトを作成するために使われる言語。初めてコーディングやプログラミングを学ぶ人はもちろん、実務に携わらない人も、HTMLの基本を知っておくとコミュニケーションがスムーズになります。
また、Webマーケティングをする人にも学んでおく必要があります。
そこで、そもそもHTMLとは何か、これからHTMLを学ぶ人は何から勉強していけばいいのかをご紹介します。
よく使われるタグや基本的なHTMLファイルの作り方も解説しますので、ぜひ参考にしてください。
目次
HTMLとは？初心者がまず知っておきたい基本
HTMLは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略で、Webページを構築する際の基本的な言語です。
「マークアップ」とは、文章の構成やその要素の役割をコンピュータが正しく理解できるように意味づけした言語・タグのことを指します。
このタグ付けにより、見出し、段落、表、リンクなどの要素がどんな機能を果たしているのかを示すことができます。そして、これが検索エンジンにとってウェブページの内容や構造を理解しやすくします。
また、タグ付けすることでテキストを「見出し」として表示したり、文字を「太字」にしたり、「下線」で装飾したりすることもできます。
しかし、HTMLはウェブページの基盤を作るものです。HTMLだけで構築されたページは、基本的にテキストと画像が並ぶシンプルなデザインとなります。
このシンプルな基盤を美しくデザインするのがCSSというスタイルシート言語です。CSSを利用することで、文字の色や背景、レイアウトの調整など、ウェブページの見た目を豊かにすることができます。
HTMLの表示方法と基本構造・記述ルール
HTMLを書いてWeb上で表示させるには、「テキストエディタ」とブラウザが必要です。それぞれ、以下のようなツールが代表的です。
主なテキストエディタ
- サクラエディタ
- Visual Studio Code
- Sublime Text
- Atom
ブラウザ
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
上記が準備できたら、実際にHTMLを記述していきます。
HTMLの記述方法と3つの要素
まずは、テキストエディタにHTMLを記述します。
HTMLファイルを作成する場合は、最初に<!DOCTYPE html>と記述します。この記述をすることで「このファイルはHTML文書です」とコンピュータに宣言します。
そこからHTMLを記述して行くのですが、HTMLは基本的に3つの要素で構成されます。
- HTML要素
- head要素
- body要素
HTML要素は、コンピュータにHTMLの記述であることを定義づけします。基本的に、<!DOCTYPE html>を記述した後、全ての要素はHTMLタグで囲われます。
なお、一部のタグを除いて、ほとんどのタグは<p>～</p> のように 開始タグと終了タグで囲うことで成り立ちます。開始タグのタグ名の前にスラッシュ(/)をつけたものが終了タグです。
head要素は、画面には表示されないですが、ページにとって重要な情報が記入されます。代表的なのはmeta情報やtitleですが、それ以外にもどのCSSファイルを読み込むかなどの情報も記載されます。
body要素は、実際にブラウザで表示される要素です。見出しやテキスト、画像などの記述を行います。
ファイルの保存とブラウザへの表示
HTMLファイルを作成したら、「〇〇（任意のファイル名）.html」とファイル名をつけて保存します。
ファイルを保存したら、ファイルをブラウザにドラッグ＆ドロップすることで、WebブラウザにHTMLで記述した内容が表示されます。
Webページを表示させるだけであればテキストファイルとブラウザだけで十分です。ただし、実際にWebサイトを構築するならサーバーを契約する必要があります。また、WordPressなどのCMSを利用するのがおすすめです。
HTMLでよく使われるタグ6選！まずは基本を学ぼう
ここからは、HTMLで非常によく使われるタグをご紹介します。
デザインされたサイトも、基本的にはここで紹介するタグがよく使われます。また、これからHTMLを学ぶ人にとって、視覚的な変化がすぐにわかるので、取り組みやすいタグでもあります。
ぜひ、実際に記述してみてくださいね。
hタグ｜見出しを作る
hタグとは、Webサイトの見出しを示すときに使うHTMLタグです。「h」はheadingの略で、見出しという意味を持っています。
h1〜h6まで6つのhタグがあり、数字が小さいhタグほど階層の高い見出しとなります。
目次には、基本的にhタグの内容が記述されます。それによって、どのような内容が含まれているのかをユーザーが理解しやすくなります。
ですが、それ以上に検索エンジンにコンテンツの内容を伝える効果（SEO）が重要です。
検索エンジンは、まずタイトル、その後見出しを見て大まかな内容を理解します。そのため、見出しがないとどのようなコンテンツなのかが理解されず、結果的に検索エンジンに表示されにくくなってしまいます。
hタグは、ユーザーに対しても検索エンジンに対しても重要な要素の一つです。
pタグ｜段落やテキストを作る
<p>タグのpはParagraph（パラグラフ）のpで、段落を意味します。pタグの間に書いたテキストは、Webページ上でそのまま表示されるので、高頻度で使うことになります。
pタグは、主にテキストを見やすくするために使われ、行間の調整にとても有効です。
なお、pタグと似たタグに<br>タグがあります。brは「改行」を表すタグですpタグは段落、bタグは改行を意味する要素ですが、ブラウザで表示されるデザインはあまり違いがありません。
ですが、基本的にはpタグを使用するのがおすすめです。理由は、pタグの方が検索エンジンがコンテンツを理解しやすいからです。
imgタグ｜画像を表示する
imgタグはimageのことで、文書内に画像を表示するためのタグです。imgタグには終了タグは不要です。
どの画像を表示するかはsrc属性で指定し、width属性やheight属性を用いることでサイズも指定できます。
また、必須ではありませんがalt属性を使用することも多くあります。alt属性を記述することで、何かの都合で画像が表示されなくなった時に代わりに表示されるテキストを指定でき、SEOの効果もあると言われています。
aタグ｜リンクを設置する
aタグはAnchor（アンカー）」の略で、指定した部分の要素をハイパーリンクとして扱うことができるタグです。
基本的にhref属性と一緒に使用され、aタグで囲われた要素をクリックすることでhref属性で指定したURLへ遷移できるようになります。囲う要素はテキスト以外に画像なども可能です。
また、同一ページの特定の位置に遷移させることも可能です。まずは、遷移先をidで指定します。その後、遷移元に#を使って記述することで、ページ内に遷移できるようになります。
ul・ol・liタグ｜箇条書きを作る
ul・ol・liタグは、表示するために使用するタグです。liタグをolタグで囲うことで順番がついた箇条書きに、ulで囲うことで順番がつかない箇条書きになります。
CSSを用いることで、箇条書きのデザインを変えることもできます。
tableタグ｜表を作る
tableタグは表を作成するためのタグです。基本的に、tableタグの中にtrタグを入れることで行が生成され、trタグの中にthもしくはtdタグを入れることで、列が生成されます。
thタグは表の見出し、tdは表の要素を意味します。
また、rowspanやcolspanを使用することでセルを結合することもできます。
まとめ
HTMLはWeb開発の基本スキルであり、Webサービスに携わる人はどのような業種でも基礎は知っておきたい言語です。
またHTMLは、記述した内容が視覚的にすぐわかるのでプログラミング初心者でも始めやすい言語です。
まずは実際に書いていくことが大切なので、まずはテキスファイルとブラウザを使って始めてみましょう。
