WordPressで知るべきHTMLタグを解説【初心者向け】

Wordpressで知るべきHTMLタグ【初心者向け】

  • WordPressのHTMLタグが分からなくて難しい
  • WordPressに詳しくなりたい

こんな悩みを解消します。

この記事では「Wordpressでよく使われるHTMLタグ」を解説しています。

 

この記事を読むことで「Wordpressでよく使われているタグの意味」を理解することが出来ます。

 

✓記事の信頼性

  • セブ島でIT留学経験

HTMLタグとは

HTMLタグとは

WordPressでブログを書く時にテキストエディタで見ると<></>という呪文のようなものが使われていますよね。

 

HTMLタグとは

「<」と「>」で囲まれた最初に書かれる方を開始タグ、後ろのタグを終了タグといいます。

この開始タグと終了タグは基本的にセットで使われますが、無いものもあり。

 

注意ポイント

ファイル名と同じように、タグに全角文字を使うことは出来ないので注意。

 

WordPressで知るべきHTMLタグ

Wordpressで知るべきHTMLタグ

WordPressで知るべきHTMLタグは下記の8つ。

  • h1〜h6
  • p
  • br
  • img
  • a
  • ol + li
  • ul + li
  • div
  • span

 

順に解説します。

 

h1〜h6

<h1>〜<h6>タグは「見出し」を表し、英語で「h」は「heading」の略です。

<h1><h2><h3><h4><h5><h6>と6種類のタグが有り、<h1>が一番大きな見出しで、Webページのタイトルや記事のタイトルなどによく使われます。

「h」の後の数字が大きくなるほど小さい見出しになっていきます。

p

<p>タグは文章の「段落」を意味します。「p」は英語で段落を意味する「Paragraph」の「p」から来ており、文章のまとまりを表示する時はこのタグを使います。

<p>タグを使うと囲まれた文章が段落になります。

参考

WordPressでは自動挿入機能が備わっており「Eenter」で改行すると自動で<p>タグで囲まれます。

br

<p>タグと似ていますがこちらは「改行」を意味します。

 

<p>タグでは

参考

WordPressでは自動挿入機能が備わっており「Eenter」+「Shift」で改行すると自動で<br>タグで囲まれます。

 

img

<img>タグは「画像」を意味します。通常のタグのように終了タグがないので、文字列を囲まず、単独で使うのが特徴的です。

実際には<img>タグだけでは画像は表示されません。

 

下記で<img>タグ必須の2つの属性を紹介。

  • src属性
  • alt属性

imgタグ

✔src属性

画像がどこにあるかを指定する属性です。

これが無ければ画像が指定されません。

 

✔alt属性

altタグは記載しなくても画像は表示されるのですが、webブラウザで画像がうまく読み込めなかった場合に画像に代わって表示するテキストです。

参考

alt属性を書くことでGoogleエンジンにも認識されるのでSEO的にもGOOD。

 

a

<a>タグ
<a>タグは「リンク」を意味します。リンク先を「href属性」で指定することで他のページにいくことが可能です。

 

ul + li

「箇条書きリスト」を意味します。「ul」は「Unordered List」の略で、「順序の決まっていないリスト」を意味します。

 

<ul>タグだけではリストは表示できず、<ul>タグ内に<li>タグを使ってリスト項目を追加する必要があるので注意。

「li」は「List Item」の略で、箇条書きにするリストアイテムを意味します。

 

ol + li

「番号のついたリスト」を意味します。「ol」は「Ordered List」の略で、「順序立てたリスト」の意味です。書き方は<ul>タグと同様。

ol + liタグ

 

div

<div>タグは意味を持たないタグですが、<dIV>タグで囲った部分をグループ化(ブロックレベル要素)することで、水平方向の位置を変更したり出来ます。

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。

 

span

<span>タグも<div>タグと同様意味を持たないタグです。

<SPAN>タグは文字を<SPAN>タグで囲っても、改行されない(インライン要素)ため、テキストの文字色・背景色を変えたりフォント調整などによく使われます。

 

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。

 

Wordpressで知るべきHTMLタグ:まとめ

WordPressでよく使われているタグの意味を紹介しました。

HTMLタグの意味を知ることで画像をリンクにしたり、オリジナルでボックスを作成することも出来ます。

WordPressでブログを書く際に参考にしていただければ幸いです。

Copyright© ヒラハラナオキのブログ , 2021 All Rights Reserved Powered by AFFINGER5.