0WordPressでコンテンツ制作をおこなう際、「HTMLタグ」を使用します。HTMLタグとは、見出しや太字など、文字に装飾を施したり、図表や画像を表示させるためのタグのことをいいます。ウェブページを制作するためには、構造を定義する「HTML」というプログラミング言語がベースとなっています。表示したい文字や情報を「HTMLタグ」で挟むことで、表現します。今回のレクチャーでは、HTMLタグのルールを解説していきます。記事の後半では、WordPressでのコンテンツ制作に役立つHTMLタグを紹介します。これからWordPressでコンテンツ制作をはじめようと思っている方は、ぜひ参考にしてくださいね。見出しタグ(h2、h3、h4・・・)段落タグ(p)改行タグ(br)強調タグ(strong、b)スパンタグ(span)引用タグ(blockquote、q)リンクタグ(a)画像タグ(img)リストタグ(ul、ol、li)テーブルタグ(table)まとめHTMLタグとは?HTMLは、ウェブページのベースとなる、情報の「構造」を定義するプログラミング言語です。Language」の略で、直訳すると「ハイパーテキストに目印をつける言語」という意味の通り、書かれている情報がどのような構造なのか、伝える役割があります。記載される情報がどのような構造なのか、目印をつけることを「マークアップ」といい、そのために「HTMLタグ」を使用します。HTMLタグは、「<>」で囲まれた英数字と記号でできており、HTMLタグを使用することで、情報の構造を伝えることができます。HTMLは、スラッシュなしの開始タグと、スラッシュありの終了タグで囲むのが、絶対のルールです。ヘッダーやフッター、サイドバーといった、ウェブサイトのレイアウトはHTMLによって定義されます。コンテンツ制作では、文字に装飾を施したり、図表や画像を挿入することができます。ちなみに、ウェブページは、HTMLだけではなく、CSSやJavaScriptなどの他の言語を組み合わせて制作していきます。Dr.TDキーワードタグ:開始タグと終了タグをまとめた呼称。開始タグ:「要素」の先頭にあるタグ。「属性」を含めることが可能。終了タグ:「要素」の末尾にあるタグ。「属性」を含めることはできない。タグ名:タグを表す名称。属性:「属性」を使うことによってタグに追加の情報を与えることができる。属性値:「属性」に設定したい値を記述する。要素の内容:タグで囲まれた情報。要素:開始タグから終了タグまでのすべての情報。WordPressでHTMLタグを使おう!WordPressでコンテンツ制作をする際、HTMLタグは投稿画面の「テキストエディタ」で使用します。改行や段落分けは、タグを挿入しなくても自動で反映されますが、見出しや、文字の装飾、図表、画像の挿入は、HTMLタグを使用します。コンテンツ制作においてHTMLタグは、もちろん情報の構造を伝える役割もありますが、文字の装飾や図表、画像の挿入など、コンテンツを読みやすくするための意味合いが強いかもしれません。Dr.TDリサHTMLタグを使って、コンテンツを読みやすく、華やかにしましょう!WordPressの投稿機能を使ってコンテンツを公開する方法:HTMLタグを追加するHTMLタグで装飾したテキストを下書き保存し、プレビューを開くと、画像のように表示されます。HTMLタグで囲まれた文字は、装飾されていることがわかりますね。WordPressの投稿画面には、テキストエディタの他に、HTMLタグを使用せずに、直接、文字の装飾や画像の挿入がおこなえる「ビジュアルエディタ」があります。ビジュアルエディタは、Wordの操作方法に似ており、初心者の方でも直感的にコンテンツ制作がおこないやすい一方、複雑な文字の装飾や図表の作成ができない場合や、意図せぬ装飾が挿入される可能性があります。テキストエディタでHTMLをタグを使用したコンテンツ制作は、はじめのうちは操作が難しく感じるかもしれません。操作に慣れていくと、ビジュアルエディタよりもテキストエディタの方が、逆説的ではありますが、タグの存在を意識せずコンテンツ制作をおこなうことができます。質の高いコンテンツ制作を目指している方には、テキストエディタの使用をおすすめします。慣れてくると、プレビューをしなくてもテキストエディタの状態で実際に装飾された状態が、頭に浮かぶようになります。Dr.TDリサ『マトリックス』みたいですね〜!コンテンツ制作に役立つHTMLタグ10選ここからは、コンテンツ制作に欠かせない、基本的なHTMLタグを10個紹介していきます。この他にも、テーマやプラグインによってカスタマイズされたHTMLタグや、複雑な処理を呼び出せるショートコードを活用することによって、よりよいコンテンツ制作をおこなっていきましょう!WordPressのテキストエディタの上部には、よく使うHTMLタグがボタンになっています。テキストを選択してボタンを押すだけで、かんたんに囲むことができます。<h1>記事タイトル</h1>「見出しタグ」は、囲まれた文字列が「見出し」であるという、まさに情報の構造を定義するためのタグになります。“h”は見出しを意味する「heading」の略です。見出しとは、コンテンツの階層構造を正しく表現するために使用します。h1からh6までのタグを順番通りに使うことによって、ユーザーや検索エンジンにコンテンツの階層構造を伝えることができます。h2の見出しタグの下層には、h3を、h3の次にはh4を、見出しタグは順番通りに正しく使用しましょう。見出しタグは、使いすぎると見辛くなるので、h3くらいまでで収めるととスッキリしていて見やすいです。WordPressでは、記事タイトルにh1が使われていることが多いので、コンテンツ本文の見出しはh2から使用しましょう!Dr.TD見出しタグのデザインは、CSSを使用しておしゃれに装飾することができます。inc.」では、左に線を表示させるデザインを採用しており、他には下線をひく、見出し全体を囲う、背景色をつけるなどの装飾ができますよ。<p>テキスト</p>「段落タグ」の”p”は段落を意味する「paragraph」の略です。テキストの区切りに設定する必要があります。WordPressでは、テキストエディタでテキストを2回改行すると自動で挿入されます。意識して使うことはほとんどありませんが、例えば、中央寄せしたい時など、段落を装飾したい場合に、意図的に使用することもあります。ここでは、段落は段落タグが使用されることだけ覚えておきましょう。テキスト<br>テキスト「改行タグ」の”br”とは、改行を意味する”break”の略です。テキストを改行したい部分に設置します。ほとんどのタグには「開始タグ」と「終了タグ」がありますが、改行タグはひとつのタグ単体で定義をおこないます。いったタグを「空要素」といいます。Dr.TDWordPressでは段落タグと同じように、テキストエディタでテキストを改行すると自動で挿入されます。意図的に挿入するタイミングももちろんあります。タグを使った要素の内容で改行をおこないたい時には、改行タグを使用する必要がある場合があります。<strong>強調しています</strong><b>太字にしています</b>「強調タグ」は”strong”を使用します。文字を太字にして、強調することができます。太字にすることで、テキストの中で文字列を目立たせることができるので、ユーザーへコンテンツの内容をよりわかりやすく伝えるために使用します。検索エンジンに対しても強調していることを伝えることができます。検索エンジンには強調していることを伝えず、太字にしたい場合には「太字タグ」を使用します。太字タグの”b”は太字を意味する「bold」の頭文字です。Googleの公式見解によると、強調タグを使っても、太字タグを使っても、SEOに効果の差はないそうです。SEO?YouTubeWordPressには、強調タグがテキストエディタにワンクリックで装飾できるボタンも実装されていますので、こだわりがなければ強調タグを使用することをおすすめします。<span>テキスト</span>「スパンタグ」は、タグの中で使用することが多いタグです。段落タグや強調タグの中で、さらに文字を装飾したい場合に使用します。スパンタグは単独では、ほとんど使うことはありません。属性でスタイルを指定するなど、初歩的なCSSの知識を使って文字を装飾します。上の例では、見た目としてはピンクの太字になっていますが、検索エンジンには強調を伝えていません。他にも赤字にしたいときや、文字を大きくしたときに使ってみましょう。<blockquote>引用文です。