ライティング

ブログを書く人が知っておきたいHTMLタグ7選【初心者向け】

今回は、「HTMLやプログラミングの基礎について知っておきたい!」という方に向けた、初心者向けの解説記事です。

本記事の内容

  • HTMLの基礎知識
  • ブログを書く人が知っておきたいHTMLタグ7選
  • HTMLを学ぶためのおすすめ学習サービス3つ

 記事の信頼性

僕は大阪にあるWebマーケティングの会社で、SEOライターをしています。過去に、少しだけですがWeb制作の会社で営業をしていた経験もあります。1~5ページくらいの動きがないWebサイトなら作ることが可能です。

HTMLはWebサイトを作成するプログラミング言語

HTMLとは、Webサイトを作成するために使用するプログラミング言語のことです。

Hyper Text Markup Languageの頭文字を取って、HTMLと呼ばれています。

ここでは、HTMLはWebサイトの表示に関わる基本的なプログラミング言語、ということを理解しておくだけでOKです。

HTMLタグを使うときは、下のように<開始タグ>と</終了タグ>で文章を囲んで使用します。

<h1>ブログを書く人が知っておきたいHTML10選</h1>

ポイント

HTMLは、Webサイト作成のための基本的なプログラミング言語

ブログを書く人がHTMLを理解しておくと良いこと

HTMLについて知っておくと、ワードプレスなどのブログ投稿システムで、本文が思うように表示されないときの原因やエラーを発見することができます

例えば、ワードプレスでブログ投稿している人は、普段ビジュアルエディターで編集作業をしていると思います。そのビジュアルエディターに何か文字を入力したときに、裏ではHTMLが同時に入力されています。

ところが、たまにビジュアルエディターが思いどおりに動いてくれないことがあります。

そのときにHTMLを編集することができると、自分がしたいように表示を変えることができます。パソコンの画面上の表示はこのHTMLが担っています。

HTMLを知っていると、どういう仕組みで画面上に表示されているかわかるのでブログを書く人はある程度把握しておくことをお勧めします。

ブログを書く人が知っておきたいHTMLタグ7選

ブログを書く人が知っておくと何かと役に立つHTMLタグは以下の7個です。

  • hタグ
  • pタグ
  • aタグ
  • imgタグ
  • olタグ、ulタグ、liタグ
  • brタグ
  • blockquoteタグ

順番に解説します。

hタグ

hタグは、文章の見出し(heading)につけるタグのことです。

以下のように、テキストをタグで囲んで使用します。

hタグの使用例

<h2>ブログを書く人が知っておきたいHTMLタグ8選</h2>

見出しタグを使うことで、検索エンジンに重要度の高い情報を優先的に伝えることができます

見出しタグはh1〜h6まであります。h1は記事タイトルに、h2〜h6は文章中の見出しに使用します。

pタグ

pタグは、文(paragraph)につけるタグのことです。

pタグの使用例

<p>h1タグは記事タイトルに使用します。</p>

pタグを使うことで、囲まれたテキストを1つの段落としてコンピュータに伝えることができます

aタグ

aタグは、他のWebサイトやページ内にリンクをつけるときに使います。aはanchorの略称で、リンクの開始と終了を意味します。

aタグの使用例

<a href="https://www.tatsuo-blog.net/">たつおのブログホーム画面</a>

Webサイトの表示

たつおのブログホーム画面

例のように、aのあとにリンク先のURLをhref=""内に記入して、開始タグと終了タグの間にテキストを入力することで、テキストリンクを作ることができます。

Webサイトのリンクには、すべてこのaタグが付いています。

aタグを工夫することで、リンク先のページを別のタブで開いてもらったり、ページ内のリンクをつけることも可能です

imgタグ

imgタグは、画像(image)につけるタグのことです。コンピュータに画像を使用していることを伝えることができます

imgタグの使用例

<img alt="たつおのプロフィール写真" src="https://www.tatsuo-blog.net/wp-content/uploads/2020/10/~.png">

imgタグは、開始タグのみで終了タグは不要です。src=""内に画像データの保存場所を入力します。

そして、imgタグにはalt属性というものがあります。altとは、alternative(代わりのもの)のことです。これを設定することで、画像が表示されないときや、目の見えない方に音声で画像が表わしていることを伝えることができます。

画像を装飾目的で使っていない限り、SEO対策上、このalt属性を設定することをおすすめします。

olタグ、ulタグ、liタグ

olタグ、ulタグ、liタグは、箇条書きをするときに使用するタグです。文字どおりタグで囲まれたテキストが箇条書きされていることをコンピュータに伝える働きがあります

  • olタグ・・・順序付き箇条書きタグ(ordered list)
  • ulタグ・・・順序なし箇条書きタグ(unordered list)
  • liタグ・・・箇条書きのリストに使うタグ(list item)

olタグはものごとの順番を箇条書きにするときに使います。

olタグの使用例

<ol>

<li>申し込みフォームに入力する</li>

<li>送信ボタンを押す</li>

<li>届いたメールに記載のURLをクリックする</li>

</ol>

Webサイトの表示

  1. 申し込みフォームに入力する
  2. 送信ボタンを押す
  3. 届いたメールに記載のURLをクリックする

ulタグは順序が関係ない、箇条書きに使います。

ulタグの使用例

<ul>

<li>hタグ</li>

<li>pタグ</li>

<li>aタグ</li>

</ul>

Webサイトの表示

  • hタグ
  • pタグ
  • aタグ

liタグは、上の例のようにolタグとulタグにあいだに入れ込んで、リストアイテムのテキストを囲んで使用します。

olタグ、ulタグ、liタグはユーザーの見やすさを高めたいときに積極的に使いましょう

brタグ

brタグはbreakの略で、改行するときに使います

brタグの使用例

<br>

終了タグは不要です。

ワードプレスなどで何気なく改行しているかと思いますが、改行したときには、このbrタグがコードとして入力されています。

たまにビジュアルエディターで改行しても、プレビューしてみると、改行されていないことがあります。そのときは、コードエディターにbrタグを入れてみてください。

注意点として、pタグを使わずbrタグで本文の段落をつけることは避けましょう

brタグのみで作った段落はコンピュータにコンテンツとして認識されません。必ずpタグでテキストを囲んでください。

blockquoteタグ

blockquoteタグは他のサイトや本などから、文章を引用するときに使います

引用タグを使用することで、検索エンジンに使用した文章がコピー(無断使用)したものでないことを伝えます

blockquoteタグの使用例

<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote">

<p>HTML の <blockquote> 要素 (HTML ブロック引用要素) は、内包する要素の文字列が引用文であることを示します。</p>

引用元:<cite><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote"><blockquote>: ブロック引用要素</a></cite>

</blockquote>

HTML の <blockquote> 要素 (HTML ブロック引用要素) は、内包する要素の文字列が引用文であることを示します。

引用元:<blockquote>: ブロック引用要素

引用元の表記は、blockquoteタグの外でも大丈夫です。citeタグには引用元のURLを入れて、aタグにも引用元のURLをつけることが望ましいです。

注意点として、引用を過剰に使いすぎることは避けましょう。

なぜなら、SEOとして引用が多くなりすぎると、Googleからの評価が上がらない可能性があるからです。

以上、ブログを書く人が知っておきたいHTMLタグ7選を解説しましたが、そのほかにもHTMLタグはたくさんあります。

※専門的な解説を知りたい人は、その都度MDNで調べることをおすすめします。▶︎HTML: HyperText Markup Language | MDN

HTMLを学びたい人におすすめの学習サービス

最後に、僕が過去に使用したプログラミング学習サービスを3つ紹介します。

ブログの見た目にこだわりたい人や、時代に乗ってプログラミングの基礎を理解しておきたい人は、プログラミング学習サイトで勉強することがおすすめです。

おすすめプログラミング学習サービス

  • Progate
  • ドットインストール
  • TechAcademy

Progate

Progateは、プログラミング学習サービスの一つです。無料会員登録すれば、HTMLを含むプログラミングの基礎的なことを学ぶことができます。

Progateのおすすめポイントは、プログラミングを学習するための環境構築が不要な点です。プログラミング初心者でも、簡単にコードを書いてサクサク学習を進めていくことができます。

また、基礎的なことに限らず、本格的に独学でプログラミングを学びたい人は、月額980円(税別)で応用や実践的なスキルを身に着けていくことができます。

Progate

ドットインストール

ドットインストールは、動画を見ながらプログラミングを独学できるサービスです。僕はドットインストールでプログラミングの基礎知識やスキルを固めました。

すべて3分以内の動画で学ぶことができるので、集中しやすいし早送りしながら勉強できるのがおすすめです。

ドットインストールは自分で環境構築して学習を進めていきます。基礎的な概念も学びながら、学習を進めていけるのがこのサービスの特徴です。無料で見れるものと月額1,080円(税込)の会員登録することで見れるものがあります。

深く学びたい人は2~3ヶ月だけ登録して学ぶことがおすすめです。

ドットインストール

TechAcademy

TechAcademyはオンラインプログラミングスクールです

オンラインの無料体験があって、1週間のあいだチャットでメンターに質問することができます。プログラミングの基礎をサクッと学びたい方におすすめです。

また、Web系の仕事をしている方が、2週間でHTMLなどについて本格的に学ぶコースもあります。

まずは無料でプログラミングの基礎を学んでみて、自分に合っていれば実践的なコースを受けることをおすすめします。

オンラインブートキャンプ無料体験

以上、プログラミング学習サービスについて紹介しました。

気になるものがあれば無料でお試ししてみてはいかがでしょうか。

-ライティング

© 2020 たつおのブログ Powered by AFFINGER5