投稿日：2024年1月24日 | 更新日：2024年03月14日

この記事を監修した専門家

応用情報技術者

tomo_2017

HTMLという言葉を耳にした人や、なんとなく学ぼうと考えている人も多いのではないでしょうか。

ただし、HTMLがどういうものか具体的に説明できない人、より詳しく知りたいという人もいるはずです。

そこで今回は初心者の人に向けて使い方やCSSなどとの違いについて解説します。

覚えておきたいタグについても解説するので、参考にしてください。

HTMLってなに？

「HTMLがどのようなものか分からない」あるいは「なんとなくわかるけど詳しい説明はできない」という人も多いのではないでしょうか。

ここでは、HTMLの概要を把握するために次の2点について解説します。

順番に見ていきましょう！

1.HTMLの役割

HTMLは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略であり、「エイチティーエムエル」と読みます。

皆さんは普段からさまざまなWebサイトを閲覧していると思いますが、多くのWebページがHTMLによって作成されているのです。

もちろん、今まさにご覧になっているこのWebページも例外ではなく、HTMLでつくられています。

HTMLの主な役割は下記の2つです。

つまりWebページをコンピュータと人間に対して、わかりやすい状態にすることがHTMLの役割といえます。

2.HTMLはプログラミング言語ではなくマークアップ言語

HTMLを「プログラミング言語」だと思い込んでいる人、あるいはHTMLを作成することを「プログラミング」だと勘違いしている人は少なくありません。

しかし、HTMLは「マークアップ言語」の1種であり、プログラミング言語ではありません。

その他のマークアップ言語は次のとおりです。

初心者でもできるHTMLの作り方

HTMLと聞くと難しく感じるかもしれませんが、初心者でも簡単に作成可能です。

ここではHTML初心者に向けて、以下の2つを解説します。

1.HTMLの基礎

HTMLは「タグ」とよばれる文字を利用して、テキストなどに意味を与えます。

なお、タグには開始タグと終了タグがあり、それぞれで囲むのがルールです。使用例は以下のとおりです。

なお、HTMLにはさまざまなタグがありますが、各タグには「属性」と呼ばれるものがあります。

属性を設定することで、タグの機能をフル活用できます。

例えば「input」というタグは画面に入力項目を作成するためのタグですが、属性を利用することで最小入力値や最大入力値などを制御できます。

2.HTMLの作り方

以下のテキストをPCのメモ帳に保存し、拡張子を「.HTML」に変更してください。

以上でHTMLファイルの作成は完了です。

またプログラミングに関して学びたい方はユーキャンのプログラミング講座をおすすめします。

未経験者でも安心のカリキュラムが組まれているため詳細を確認してみると良いでしょう。

＼詳細を確認してみる／

【入門編】HTMLタグの種類

ここでは入門編として覚えておきたいHTMLタグとして、下記を解説します。

HTMLに見出しを作成するh1~h6タグ

h1~h6の「h」は「heading」の頭文字であり、見出しを作成するために利用するタグです。

このタグは、Webページの重要な内容やテーマなどを示すために使われます。

また、h1~h6タグで囲んだ文字列は、Webブラウザ上で文字が大きくなったり、太文字で表示されます。

使用例は次のとおりです。

表を作成するtable、th、tr、tdタグ

tableタグは、テキストなどを表(table)形式で表示するために利用するタグです。

tableタグは、列名を作成するthタグ、行を作成するtrタグ、そして各行のデータを作成するtdタグなどと合わせて定義します。

使用例は次のとおりです。

リストを表示するul、ol、liタグ

ただ、テキストを書き連ねるよりも、内容を箇条書きにしたほうが簡潔でわかりやすいWebページになります。

そのようなときに利用できるのがul、ol、liタグです。

順序がある(先頭に付番した)箇条書きはol(Ordered List)タグ、順序がない箇条書きはul(Unordered List)タグを利用しましょう。

なお、リストの要素はli(List Item)タグで表現します。

使用例は次のとおりです。

文章や画像などコンテンツを改行するbrタグ

文章や画像などコンテンツを改行したいときは、brタグを利用します。

Wordやメモ帳で文章を改行するときは、リターンキーを押します。

HTMLを作成中もリターンキーを押すと一見改行したように見えますが、Webブラウザでは改行されず半角スペースなどで表示されます。

そのようなときに利用するのがbrタグです。

なお、brとはBreakの略語です。

使用例は以下のとおりです。

要素をグルーピングするdiv、spanタグ

divタグとspanタグはWebページの構成要素をグルーピングするタグです。

これまで説明してきたものとは異なり、Webページの外観にはあまり直接的な影響を与えません。

divタグは、HTMLと合わせて利用する「CSS」というものでデザインする際に、ひとまとまりとして指定するときに使います。

また、spanタグは文章内をグルーピングするときに使用するものです。

それぞれの使用例は以下のとおりです。

画像を表示するimgタグ

テキストを羅列するより豊富な画像を表示しているWebページは、視覚的に楽しめます。

そのような画像表示に利用するのがimgタグです。

imgはimageの略であり、以下3つの画像形式に対応しています。

imgタグには画像ファイルを指定するsrc属性、画像の幅と高さを指定するwidth属性およびheight属性、そして画像が表示されない場合に代替として表示するテキストを指定するalt属性などがあります。

使用例は以下のとおりです。

URLリンクを埋め込むaタグ

WebページにURLリンクを埋め込みたいときは、aタグを利用します。

aはanchor(アンカー)の略であり、指定された部分クリックすることで別のWebページへ遷移させることが可能です。

なお、リンク先はhref属性で指定します。

href属性は絶対パス(URLのすべて)はもちろん、相対パス(自身のページから見たリンク先のページ)の指定もできます。

使用例は以下のとおりです。

Webサーバーに情報を送信する画面を作成するformタグ

Webサイト上で会員登録やアンケート回答などを行った経験がある人も多いのではないでしょうか。

Webページに入力した氏名や住所といった情報を、Webサーバーに送信する入力フォームを作成したいときは、formタグを利用します。

なお、formタグだけでは入力項目などを作成できないため、formタグの内部にinputタグ(入力項目)やselectタグ(選択リスト)などを指定する必要があります。

使用例は以下のとおりです。

HTMLとCSSとの違い

2つの違いは、役割です。

具体的にはHTMLはWebページの構成要素、CSSはWebページのデザインを設定するものと覚えておきましょう。

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略であり、Webページのデザインを構成する役割を持っています。

HTMLとCSSはどちらもWebページを作成するための言語です。

また、HTML単体でもタグの属性などを利用すれば、デザインも可能です。

ただし、HTMLの機能でデザインを変更する場合はタグの1つひとつに設定しなければならず、「tableすべてのデザインを一括で変更する」といったことができません。

そこでCSSの出番です。

CSSを使えば「この要素にはこのデザインを適用する」といった管理ができるため、効率的にデザインを変更できるのです。

HTMLとJavaScriptとの違い

HTMLはWebページを構成するためのマークアップ言語であり、JavaScriptはWebページに動的な機能を実現するものと覚えておきましょう。

JavaScriptは、主にフロントエンドを開発するためのプログラミング言語です。

HTMLとJavaScriptはどちらもWebページを作成するために必要なものです。

ただし、前述したとおりHTMLはマークアップ言語であるため、JavaScriptとはそもそもの種類が異なります。

具体的にいうと、JavaScriptはWebページに動的な機能を追加できます。

例えば、Webページに何らかのメッセージや簡単なアニメーションを表示可能です。

また、ポップアップウィンドウやマウスオーバーで画像を拡大するなどもJavaScirptで実現できるのです。

HTMLをマスターしよう

今回はHTMLについて解説しました。

HTMLはWebページを構成するために必要な要素の1つです。

Webデザイナーやフロントエンドエンジニアを目指す人にとって、CSSやJavaScriptと並んで必須スキルといえます。

HTMLファイルを作成してWebブラウザで表示すれば、すぐに確認できるため学習しやすいのも特徴です。

HTMLに興味がある人は、まずはこの記事を参考にHTMLの学習をはじめてみてはいかがでしょうか。

この記事を監修した人

tomo_2017

情報工学系の大学を卒業後、国産パッケージソフトウェアの 開発・販売を行う企業にてシステムエンジニアとして、 約7年ほど働いておりました。