プログラミング未経験からでも月50万円達成

【学生初心者必見】初めに覚える!HTMLタグ16選

作成: 2016.11.08 更新: 2019.04.01

>> 世帯年収300万以下限定!
転職成功まで受講料発生なし。詳細はこちら

  

『HTMLタグ』とは?

under_titile_image

webサイトを作るため、まずHTMLの勉強を始めたあなた!
しかし覚えることが多すぎて、まず何から勉強していいのか悩んでいるのではないでしょうか?

HTMLを学ぶための足がかりにするため、プログラムマスターがあなたに絶対に覚えておきたいHTMLの基礎とその実装のためのタグを紹介します。

 

HTMLの準備

まず、HTMLを記述するための準備として実際にコードを書くためのテキストエディタをダウンロード、インストールしましょう。

 

今回はテキストエディタとしてSublimeText3をインストールしましょう。

以下の手順に従って、SublimeText3をインストールしてください。

1以下のリンクからSublimeText3をダウンロードします。Downloadの一番上にあるOS Xをクリックしてファイルを解凍してください。

http://www.sublimetext.com/3

sublime_text_1

 

2下に表示されたファイル名をクリック後、SublimeText3をアプリケーションフォルダに移動します。1の後、SublimeText3をアプリケーションフォルダにドラッグ&ドロップします。

sublime_text_2

 

3SublimeText3を起動します。次のような黒い画面が表示されれば完了です。

sublime5

HTMLを書く準備が整ったところでまずは基本から学んでいきましょう。

 

HTMLの基本

そもそもHTMLとはざっくりとどのようなものなのでしょうか?

 

HTMLとは、webページの「見た目」に直接反映する、文の始まりと終わりに、意味をつけるためのタグというものを使って書かれる「マークアップ言語」の1つです。

※マークアップ言語・・・文字に意味(見出しや段落など)をつけて文章を記述する言語。

 

実際にタグで書かれた次の例を見てみましょう。

Hello world!

上のコードでは、「見出し」という意味を持つh1タグによってHello world!という文字が意味付けされています。

詳しく説明すると、文である Hello world! の<>の間にタグ名(この場合はh1)を入れた開始タグ<h1>と、タグ名の前に/を入れた閉じタグ</h1>によってマークアップされます。

 

ブラウザでは以下のように表示されます。

Hello_world

また、終了タグの存在しない以下のようなタグも存在します。

img_tag このようにHTMLはタグによってマークアップされていくわけですが、タグには属性という、そのタグに対して更に詳しい意味を持たせるものがあります。

属性=”値”

で属性を定めます。

上の src=”example.jpg” や alt=”example” がそれにあたります。

 

この場合、imgタグで画像を添付するという意味を作り、その画像を src 属性で指定し、 alt 属性で画像が表示されなかった際のための代替テキストを表します。

 

以上のように、属性はタグに対して+@の意味を持たせることができます。属性はタグの紹介でも登場するので、具体的な使い方を覚えていきましょう。

 

また、それぞれのタグをCSSという言語を使ってその大きさを指定したり、色をつけたり、場所の指定をすることができます。

ここではHTMLタグの説明に重きをおくので詳しいCSSの解説は割愛させていただきますが、例として先ほどの Hello world!に文字を赤くする記述をCSSで記述します。すると以下のようになります。

red_color_text

このように、HTMLで作った要素に対して、CSSで具体的に装飾やレイアウトを決めていく。という流れでWEBページを作っていきます。

 

では、実際にコードを書いてそれをブラウザに表示させてみましょう!

①ファイルを保存しましょう。

「command+S」を押して保存画面が出てきます。次のGIFのようにデスクトップにsample.htmlを保存しましょう。


②次に、SublimeTextに以下のコードをコピー&ペーストしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
</head>
<body>
 
</body>
</html>

以上のコードは覚える必要はありません。記述に関する設定を記述しています。

このコードの

form_tag

の「〜」の部分に記述していきます。実際に「〜」と記述する必要はありません。あくまで説明にために書いたものです。これから様々なタグを紹介していきます。このコードは消さずに残して、

「〜」

の場所にコードを書いていきましょう。

 

まず、先ほどの

Hello world!

bodyタグの間に記述してください。以下のようになりましたか?

hinagata

上のようになりましたら、このファイルを保存しましょう。

Macの場合、「command + s」で保存できます。

 

③これをブラウザに表示します。ブラウザの新規ページを開いてください。

Finderを開いて、ブラウザのページに先ほどのファイルをドラッグ&ドロップしてください。

 

 

表示されましたか?このように、<body> ~ </body>の中に記述をして保存。これをドラッグ&ドロップ。という流れでブラウザに表示できます。

 

それでは、実際にコードを書きながらHTMLの基礎タグを学んでいきましょう!

趣味としてwebサイトを作ろうと考えている方は、まずはHTMLから学ぶと始めやすいでしょう。以下の記事では、プログラミングを始める方法について解説しています。『初心者が趣味としてプログラミングを始める方法について解説

目的別HTMLの実装方法

h1~h6タグ(見出し)

h1,h2,h3,h4,h5,h6タグは見出しとして使われます。h1に近いほど文字が大きく、h6に近いほど文字が小さい見出しとなります。

h_tag

ブラウザで表示してみましょう。

compare_heading

数字によって文字の大きさが変わるのが分かりますね。

 

aタグ(リンク)

saタグは文中にリンクを挿入したい時に使います。

aタグで囲った文をクリックするとhref属性 によって指定したURLに移ることができます。

aタグ

上のようなコードを書くと、実際に次のように動きます。

また、target=”_blank” という属性を aタグで指定することによって新しくタブを開き、そこで指定したURLを開くことができます。

 

 

imgタグ(画像)

画像を表示するためのタグです。この説明は、上の「HTMLの基本」にあります。

こちらの記事もご参考ください。

【HTML】初心者に捧げるHTML画像入門

 

tableタグ(表)

表を作成するためのタグです。tableタグの他に、thタグtrタグtdタグを使って表を構成していきます。まずはコードとその時にできる表をみてみましょう。

table_tag

table

tableタグによって表構造であることを示し、

  • trタグ・・・横一列
  • thタグ・・・見出し
  • tdタグ・・・データ

として表を作成します。

また、tableにたいして border=”2″ などのようにborder属性によって数字を指定すると、その数字に対応する大きさの枠を作ることができます。

table_with_a_frame

こちらの記事もご参考ください。

【初学者必見】HTMLのテーブル(表)作成に役立つ Tips

 

divタグ(ブロック)

divタグは今まで学んできたタグとは異なり、意味を持たないタグです。

意味を持たないタグなんてどこで使うのだろうか?と思っている方も多いかもしれません。

divタグはレイアウトを考える上でかなり重要なものです。

divタグによってブロック要素という、ブロックを作ることができます。

CSSで高さと横幅を指定することで自由にブロック要素の形を変えることができます。そのブロック要素を横に並ばせたり、ブロック要素の中にブロック要素を含めたりすることでレイアウトを作ります。

 

pタグ(段落)

pタグは段落を意味するブロック要素を作ることができる要素です。

p_tag

spanタグ(文字の装飾)

spanもdivと同様、意味を持たないタグです。ただ、 span タグは div タグと異なり、インライン要素を作ることができます。

インライン要素とは、テキストを装飾するために使う要素です。

文字の一部を指定することで一部分にのみ装飾(太字化、アンダーラインなど)を施すことができます。装飾はCSSで行います。インライン要素を使って以下のようなことができます。

inline_example

まとめると、spanタグは文字の一部を装飾するためのインライン要素を作ることができます。

以下がspanタグを使ったコードです。

span_tag

 

改行タグ

一つの段落内で改行したい時、テキストエディタ上で改行してもブラウザでは改行されずに半角スペースとして認識されてしまいます。

そのため、段落内で改行するときは改行タグを使って改行をします。

改行には br タグを使用します。br タグには閉じタグは必要ありません。

<br>と書くだけで改行してくれます。

 

br_tag

とコードを書くと次の通り改行してくれます。

br_effect

 

formタグ、inputタグ、textareaタグ…(フォーム)

フォームを作るには複数のタグを組み合わせます。フォームから何か情報を送るにはRuby on Railsなどのフレームワークを使う必要がありますが、この段落では情報を送るのではなくフォームの作り方について勉強します。

まず、フォームであることを示すため、フォームの全てを

 

form_tag

で囲みます。

以下、フォームのそれぞれの要素を紹介していきます。

必要に応じて使っていきましょう。

 

テキストボックス

form_text

テキストボックスは文を入力するためのボックスです。以上のように書くことで次のように動くテキストボックスを作成できます。

ここで登場する input タグは入力欄やボタンを作成してくれるタグです。input タグは type 属性によってどのようなフォームを作るのかを決定します。

inputタグには閉じタグは必要ありません。

inputタグはこの後も登場するので覚えておきましょう。

また、フォームは

form_text_2

の ように、formタグの間にコードを書いていきましょう。

 

チェックボックス

チェックボックスはその名の通りチェックするためのボックスのことです。どのようなものか、GIFで確認しましょう。

チェックボックスは選択肢の中から複数の要素を選ぶことができます。

このようなチェックボックスを作るには先ほどと同様にinputタグを使います。

form_checkbox

 

 

ラジオボタン

ラジオボタンは複数ある選択肢のうち、一つだけを選ぶことができるボタンです。次のように記述します。

radio

選択肢の中から1つ選択する場合、name 属性として同じ値を指定します。そのようにすることで1つのグループとして認識させることができます。

また、value属性はそれぞれ異なるものを指定して、どのデータが送信されるのかを決める役割を与えます。

 

メニュー(セレクトボックス)

selectタブを使ってセレクトボックスを作ることができます。

select_tag

また、その選択肢をoptionタブを用いて定義します。optionはselectタブの中に定義します。

optionタブにはvalue属性を用いて送られるデータを決定します。

実際に次のように機能します。

 

テキストエリア

textareaタグを用いて複数行のテキスト入力欄を作ることができます。

textarea_tag

 

テキストに文字を表示

テキストボックスやテキストエリアに属性として placeholder=”表示したい文” と書いておくことで初めに文を表示することができます。

 

テキストに初期値を表示

テキストボックスの場合、属性としてvalue=”aiueo”とすることでテキストボックスに初期値としてaiueoが入力された状態で表示されます。

また、テキストエリアには開始タグと閉じタグの間に文を入力することで初期値を表示できます。

 

構成部品と項目を関連づけ

labelタグを使うとボタンやその項目を関連づけることができます。

関連づけをすると、その項目名をクリックするとボタンが選択されたりさせることができます。

フォームの構成部品とその項目を<label> ~ </lavel>で囲むことによって関連付けがされます。

label_tag

 

 

送信ボタン

最後に、送信ボタンです。次のような記述によって送信ボタンを作ることができます。

submit_tag

次のような送信ボタンができます。

submit

 

ul, ol liタグ(箇条書きリスト)

箇条書きリストを作るにはulタグliタグ、またはolタグliタグを使います。ulタグは順序づけのされていないリスト(unordered list)を作成できます。

olタグは順序づけのされているリスト(ordered list)を作成できます。

これらは、次のようにliタグをulタグ(olタグ)で囲うようにするとリストを作ることができます。

list_tag

以下のようなリストが作成されます。

list

この記事のハッシュタグ

覚えておくと便利!応用タグ

blockquoteタグ(引用)

blockquoteタグを使うと引用してきた内容であることを示すことができます。次のように記述してみましょう。
blockquote_tag

blockquoteで囲ったテキストは上下左右にスペースが入ることがわかると思います。

以下のように表示されます。

blockquote

 

codeタグ(コード)

codeタグを使うとプログラミング言語のコードであることを示すことができます。

また、プログラミングを書くときは改行をたくさんします。改行するたびにbrタグを書くのは面倒臭いですし、コードが読みづらくなります。

そのため、タグで囲んだ文の改行は認識して改行してくれるpreタグでコードを囲みます。

code_tag

以下のように表示されます。

code

 

 

 

rubyタグ(ふりがな)

rubyタグを使うとふりがなをふることができます。以下のようにrtタグの中にふりがなを書きます。

ruby_tag

以下のようにふりがなを振ることができます。

ruby

 

strongタグ(強調)

strongタグは重要性のある語句に対して強調します。

強調したい語句を

strong_tag

のように囲うことでstrongタグで囲った文のみ強調します。ブラウザでは次のように表示されます。

strong

 

 

iタグ(斜め文字)

iタグは通常の文とは区別したい語句、文を斜め文字にすることができます。

斜め文字にしたい語句、文を

i_tag

のように囲うことでiタグで囲ったもののみ区別します。ブラウザでは次のように表示されます。

i

 

 

TECH::EXPERT 東京・名古屋・大阪・福岡

プログラミング未経験からWebエンジニアとして転職成功まで導くスクール TECH::EXPERT は、挫折しない環境を提供いたします。すべて駅から通いやすい便利な場所。いつでも質問できるメンター(講師)、一緒に頑張る同期がいるから頑張れる。そんな教室を是非見にきてください!

オススメの参考書

HTMLタグ以外にもwebページ制作にはさまざまな知識が必要です。
 
エンジニアである筆者がおすすめする参考書を最後にご紹介しますので、ぜひご覧ください!
 

HTML_book1

参考 スラスラわかるHTML&CSSのきほん

HTML_book2

参考 いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

またこちらの記事では、webデザインを学ぶ際に役立つ参考書を紹介しています。『【Webデザイン初心者必見】役立つ学習サイト・参考書20選

さいごに

 今回紹介したものは基礎的なHTMLタグです。すぐに使えるものばかりですので、この記事を参考にしながら、ご自身のwebサイト制作に役立ててくださいね!
 
こちらの記事もご参考ください。
 

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようになります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新たなスキルを身につけることができます。

この機会にプログラミングを学びませんか?

banner_techcamp

未経験からエンジニア・Webデザイナーを目指すならTECH::EXPERT

TECH::EXPERTは未経験からのエンジニア・Webデザイナー転職を実現するスクールです。

転職成功率は98.5%(2019年1月時点)。確実に使えるスキルを身につけるための教育と、徹底した就職サポートであなたの転職を叶えます。

無理な勧誘は一切ありません。まずは無料キャリア相談(カウンセリング)にぜひお越しください。

無料キャリア相談の日程を見る

この記事を書いた人

Avatar
IgariRentaro