【初心者向け】HTMLタグの意味を簡単にまとめてみました【すぐわかる】

こんばんは、プログラミング初心者の氷犬です。

 

ProgateドットインストールでHTML/CSSを勉強していると、わからないながらもいろいろ疑問が湧いてきますよね。

 

【プログラミングを学習中の人】
「画面に出てきたとおりにコードを書いてるけど、このHTMLタグってどういう意味なんだろう。なんで同じページの中でタグがコロコロ変わるの? そもそもHTMLタグって何だ…」

僕も学習中はこんなことを考えながらやってきたんですけど、とりあえずは手を動かそうと思い、意図的にタグの意味を勉強してきませんでした。

 

しかし、HTML/CSSを使ったコーディングを仕事にするなら、できるだけきれいなコードを書けるようになりたいですよね。

 

そこで、この記事では初心者向けに、

  • そもそもHTMLタグって何?
  • HTMLタグの種類や使い方(メイン)

の2つについて解説しています!

 

こんな人におすすめ

  • ProgateやドットインストールでHTML/CSSの基礎学習が終わった
  • HTMLタグの意味に疑問や興味が沸いてきた
  • ランディングページの模写などをする上での知識が欲しい

 

-スポンサードサーチ

HTMLタグってそもそも何?どういう意味があるの?

HTMLタグの種類や役割について解説する前に、「そもそもHTMLタグとは」について、サラッとおさらいしておきましょう。

HTMLタグとは、「Webページを文字を使って構造化するためのもの」です。

簡単にいうと、「文字を使ってページの形を作るためのもの」です。

 

Webサイトの構築は、HTMLを使ってその構造をテキスト形式作っていく作業のことなんですね。

パズルや積み木を想像してもらうとわかりやすいかもしれません。

 

なぜ、HTMLタグをきちんと使う必要があるのか?

普段、インターネットで見ているページは「人の目で見てわかりやすいように」きれいに装飾されています。

 

たとえば、下の画像はこのブログのスクリーンショットですが、10秒も見ればどういう構造になっているかはわかりますよね。

 

しかし、パソコンは目を持たないので、このページを文字・テキストとして見ています↓

※パソコン=検索エンジンやAIなどのこと

見ていると目が痛くなってきますね

人の目で見れば一発でわかることも、テキストで見ると理解するのに時間がかかりますよね。

 

Webサイトは作って終わりではなく、次にGoogleやYahooといった検索エンジンに見つけてもらう必要があります。

Googleなどの検索エンジンは、Webサイトを見つける時に事前にWebサイトを見て内容を評価します。

しかし、検索エンジンがテキストで見て理解しにくいページは、「しっかり作ってないよこのページ」と検索エンジンがマイナスの評価をするので、検索結果の上位に上がりにくくなってしまいます。

 

要するに、Webサイトを作る時にはHTMLタグをきちんと使って、

  • 人の目で見てもわかりやすく
  • 検索エンジンやAIがテキストで見てもわかりやすく

なるように作る必要があるんですね。

 

HTMLタグの意味を理解するのは、「Webサイトを誰の目から見てもわかりやすく作るため」です。

タグの意味を理解していれば、Webサイトのコードを読めるようになるので、プログラミングの学習もしやすくなりますよ。

 

-スポンサードサーチ

HTMLタグの種類や使い方を一覧で見てみよう

さて、「HTMLタグの意味」がわかった上で、さっそくよく使うHTMLタグを一覧で見ていきましょう。

長くなるので、流し見しつつ気になったものをチェックするくらいでOKだと思います。

ちなみにHTMLタグの公式ページはこちらです⇒【HTML5リファレンス

 

タグを見る前に、Webサイトの構造を思い出しておくとわかりやすいので、参考としてコードを貼っておきますね。

1:ページの情報を示すタグ

・<DOCTYPE! html>

Webページの最初に書くタグ。
このタグを書くことで、「このページはHTMLで作ったものですよ」と宣言する。

・<head>

このタグで挟まれた範囲はヘッダ情報として、「目に見えないページの情報を表す部分」となる。

 

◇headの中に書くタグの一覧↓

  • <title>:ページの名前
  • <meta>:ページの情報を表す。文字コードやSNSに関する情報など
  • <link>:リンクを引っ張ってくる。CSSを適用させる場合などに使う
  • <script>:ページの中でJavascriptを適用させたいときに。※head以外でも使える

 

2:ページの構造を表すタグ

あらかじめこの画像を見ておくとわかりやすいです↓

HTML 4との違い、HTML5で可能になること

・<body>

Webページの中で「人の目に見える部分」をこのタグの中に書く。

サイトコンテンツ、ブログ記事など。

◇bodyの中に書くタグの一覧↓

①普段目にしないもの(Webサイトの構築に作るタグ)

  • <header>:ヘッダー。ページの上の部分。
  • <fooder>:フッター。ページの下の部分。
  • <nav>:ページナビの部分に使う。「これはメニューやサイトマップですよ」ということを示す。
  • <article>:タグの中の部分が1コンテンツであることを表す。たとえば、「このタグで囲んだ部分はブログの1記事です」ということ。
  • <section>:タグの中が1つのまとまりであることを示す。たとえるなら本の目次。わかりにくい。
  • <aside>:メインコンテンツのおまけの要素として使う。ちょっとした注釈など。
  • <div>:ページ内の要素を構造化する時に。CSSで扱うためのタグとして。

 

②よく目にするもの(コンテンツの中身に使うタグ)

  • h1,h2,h3…:コンテンツの中の見出しであることを表す。h1は大見出し、h2は中見出し…など。
  • p:段落、パラグラフ。1つの段落を表す。
  • ol:順序のある一覧を作る。①,②,③…(豆知識:ordered)
  • ul:順序のない一覧を作る。・,・,・…(豆知識:unordered)
  • li:olとulで作られた要素の1つであることを表す。

 

3:文章の意味を表すタグ(テキストを装飾するタグ)

簡単な一覧で示します。

  • <a>:リンクを表す。
  • <strong>:強調。囲んだ部分を強調したい時に使う。
  • <ruby>:ふりがな(ルビ)を振りたい時に使う。
  • <span>:範囲を表す。CSSでテキストを装飾したい時に使う。
  • <br>:改行。<p>タグよりも小さい改行。(豆知識:WordpressならShift+Enter)

 

HTMLタグの意味を覚えておくと役に立ちます

ここまで30弱のHTMLタグの意味を簡単にまとめてみました。

もちろん、他にもいろいろタグはあるのですが、よく使うものはこんな感じかなと。

全部暗記しておく必要はないので、わからなくなった時にHTML5リファレンスを覗く程度でいいと思います。

 

HTMLタグの意味まで考えるのは、実際にWebページの模写やサイト制作をする時になりますね。

Progateやドットインストールで基礎学習をしているレベルだとそこまで余裕がないと思うので。

 

ちなみに僕は実際にランディングページを模写している時に、「articleってなんだ?」と思ったのが始まりです笑

詳しくはこちら→【プログラミング学習記録④】はじめてのランディングページ模写【画像あり】

 

-スポンサードサーチ

初心者向けの記事は他にもあります+SNSでも

この記事以外にも、プログラミング未経験から初心者の方に向けた記事を書いていますので、興味がある方はぜひ見ていただければ。

【プログラミングに関する記事はこちら】

僕も未経験から学習中なので、まさに僕が悩んでいることを記事にしています。リアルな体験談です。

 

プログラミングで「わかんねー!」ってなった時にはTwiterで叫んでいますので、同士が欲しい方はぜひフォローを(-_-;)笑

Twitter:@icedog_410

(フォローは気が向いた時に返しているので、リフォロー希望の方は「おいこら」と声をかけてください)

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA