HTMLタグって何？HTMLタグの基礎知識と基本的なタグ

公開日：2017/04/04　更新日：2019/09/11　

※本ページにはプロモーション(広告)が含まれています

指定した文字を斜め文字にしたい場合はiのHTMLタグを使います。太文字同様、大事な部分を斜め文字にすることで、特定の部分を強調できますし、サイト内にメリハリを作れます。覚えておくと便利なタグの１つです。

９.漢字にふりがな：ruby

難しい漢字を読みやすくしたり、幅広い年齢層の方に読んでもらうサイトなどを作る際は、漢字にふりがなを打っても効果的です。rubyのHTMLタグを使えば、指定した漢字にふりがなをうつことができます。

１０.文章を改行する：br

段落をつけたい場合はpのタグを使いますが、改行したい場合はbrのHTMLタグを使います。brを使うことで希望の場所で改行できるため、読みやすい文章を作れます。pと上手く使い分けることが大事です。

１１.改行させない：nobr

brを使えば文章を改行できますが、nobrを使えば文章を改行させないようにすることができます。サイトの端に到達しても文章がそのまま横に表示されます。サイトの見せ方によってnobrを使いましょう。

１２.文章を引用する：blockquote

blockquoteのHTMLタグを使えば、特定の文章を引用できます。SNSや他サイトから文章を引用して表示する場合に使います。客観的な情報を載せたい場合などに役立ちます。

１３.動画挿入：video

動画を表示したい場合は、videoのHTMLタグを使います。VideoはYouTubeやその他の動画も表示できますので、動画を使った説明や紹介をする場合に便利なタグです。

１４.箇条書きリスト：ul、li

サイト内に箇条書きリストを作りたい場合は、ul、liのHTMLタグを使用します。手順の説明など、箇条書きで分かりやすく説明したい場合に使えます。

１５.番号付きリスト：ol、li

ol、liのHTMLタグを使えば番号付きのリストを作れます。ただ箇条書きをしたい場合は、ul、liを使いますが、ol、liを使えば、１、２、３、４、などの番号が先頭に表示されます。順を追って説明したい場合などに役立ちます。

１６.画像挿入：img

imgを使えば好きな画像をサイト内に表示できます。商品画像やおもしろ画像、思い出画像など、自由に載せることができます。サイトを見ている側も画像がある方が信用できる可能性があります。

１７.タイトル：title

サイト内のタイトルを表示する場合は、titleのHTMタグを使います。Titleタグで表示されたテキストが検索結果などに表示されます。サイトを作る際に必須のタグとなっています。

１８.出典先を表す：cite

citeを出典先や参照先を表すためのHTMLタグです。何かを参照の元、サイトを作成する場合には使いましょう。

１９.フォーム作成：form

サイト内に入力フォームを作りたい場合はformのHTMLタグを使用します。サイト内にフォームを作成する必要がある場合に用いましょう。

２０.メニュー表示：menu

サイト内にメニューを表示したい場合に使うのがmenuのHTMLタグです。ulタグを使う方がおすすめですが、menuタグがあるということを覚えておいて損はありません。

２１.文字を等幅フォントで表示：tt

ttのHTMLタグを使えば、文字を等幅フォントで表示できます。サイト内で等幅フォントで見せたい箇所がある場合などに役立ちます。

HTMLに関連する用語

HTMLを学習していると様々な用語が目に入ってくることになります。

本項目では HTMLに関連する用語を解説します。入門レベルならなんとなく理解している程度でも問題はないのですが、知っておくと習得速度にも大きく影響します。順番に見ていきましょう。

DOCTYPE

DOCTYPEは HTMLのバージョンを宣言するための記述 です。HTML5であれば「!DOCTYPE html」というように記述します。

要素

要素は 開始タグから終了タグまで構成される全体のこと を指します。h1の開始タグと終了タグがあったら、h1要素といった感じになります。

要素と言われたらタグ全体を、タグと言われたら開始タグか終了タグどちらか一方を指すことになります。

html要素

html要素は htmlの開始タグと終了タグを指します。HTMLファイルは要素の集合体となっていますが、html要素はその中でも最も外枠に位置する要素になっています。

試しに マウス右クリック→ページのソースを表示 で適当なサイトのソースコードを表示してみてください。1行目、もしくは2行目にhtmlの開始タグが、一番最後の行に終了タグが記述されていることが分かると思います。

このようにhtml要素は全体を囲みこむようなイメージです。

head要素

html要素は headの開始タグと終了タグを指します。見た目には反映されない、サイトに関する情報を定義する場所となります。

代表例としては、文字コードの指定やCSSファイルの指定などを行う箇所となります。

body要素

body要素は bodyの開始タグと終了タグを指します。こちらにHTMLを記述していくことになります。記述された内容はブラウザ上にも反映されるようになります。

HTMLは、ここまでご紹介してきた要素「DOCTYPE宣言」「html要素」「head要素」「body要素」で構成されることになります。始めのうちは全てを理解する必要はありませんので「body要素」以外はおまじない程度に思っていても問題ないかと思われます。

「head要素」の記述の意味などは、HTMLを学習していく上で段階的に認識を深めていけるのが理想的です。

属性

属性は 要素が持つ役割 を意味します。要素に働きをもたせるために使われるもので、かなりの数の属性が用意されています。

リンク属性をもたせる

ウェブサイトを閲覧していると他ページへ遷移するリンクを見かけることがあると思います。要素に「href属性」をもたせることでリンクを張ることができます。

aタグの中に「href=”URL”」を記述することでタグがリンク属性を持つようになります。

class属性をもたせる

classは要素を分類名を指定する属性です。cssファイルでstyleを指定するときに判別するために利用されることがほとんどです。

要素にclass属性を持せたい場合はタグの中に「class=”zokusei”」と記述します。この記述によって該当タグはzokuseiという属性を持つことになりました。

CSS

CSSは HTMLを装飾するための言語 です。言語というと少し構えてしまうかもしれませんが、HTMLの延長みたいなものなので難しくかんがえる必要はありません。

htmlを装飾する

HTMLだけで構成したウェブサイトは何の装飾も施されていない味気のないサイトになってしまいます。CSSを利用することでユーザーが見やすいウェブサイト作りを心がけることが必要となります。

まとめ

いかがでしたでしょうか。今回は、「HTMLタグって何？HTMLタグの基礎知識と基本的なタグ」について紹介いたしました。HTMLタグはコンピュータに定義付けを行ううえで必要なものであり、HTMLタグがあるからこそテキストなどをサイトに表示できます。HTMLタグの種類は非常に多くありますが、まずは基本的なタグを覚えることが大事です。

応用的な内容のHTMLタグは、サイトを作っている内に自然と覚えていきますので、まずは基本を覚え、実際に使っていきましょう。早速、試しに使ってみましょう！

1 2