WordPress

html初心者入門!基本タグ一覧

今回は記事作成時に比較的よく使われる
htmlの基本的なタグを紹介します。

ここで紹介する基本的なタグさえ理解しておけば、
WordPressサイトの運営に関して言えば
それほど困ることはなくなります。
今回は、htmlに関する理論の説明は抜きで、
実際にどのように使用しているかを
紹介していきます。

※「font」と「center」タグは
HTML5.0から非推奨となりましたので、
CSSでの使用方法を紹介しています。
初心者の方は覚える必要はないので
「こんなようなタグがあるんだ」
くらいの認識で大丈夫です。

一通り目を通しておいてください。

html基本タグ:改行、br

※検索の時に「html 開業」と打ち間違えて
検索している方も多いようです^^;

通常よく改行コードで使用されるのは「ノーブレークスペース」です。
HTMLの文中に   を挿入すると半角スペース分の間隔を空けてくれるという機能を果たしてくれます。
そのため「  は半角スペースを入れたい時に使うもの」という認識の方も多いのです。

コードはこちら

 
↓改行のhtmlタグ (HTMLで書かれたページの場合)

  
↓改行のhtmlタグ (XHTMLで書かれたページの場合)

 
 

どちらを使っても問題ありませんが、
WordPressの場合は<br/>を使用します。

記事本文内の改行の場合は、以下を参考にしてください。
関連記事→ WordPressで改行できない(反映されない)時の解決策!プラグイン不要

 
 

 

html基本タグ:テーブル、table、表

↓テーブルの表示例

テーブルタイトル
ヘッダーセル1 ヘッダーセル2
データセル1 データセル2
データセル3 データセル4

↓上記テーブルのコード

 

 

※テーブルを結合したい時は以下を使用

colspan=””:水平方向
rowspan=””:垂直方向

エクセルを使って効率的に表を作成する方法を紹介しています。
関連記事→ EXCELエクセルで文字列を結合する方法

 
 

html基本タグ:リンク、link、a href

↓このサイトのトップページ
(https://catherineroyal.com/)へのリンクです。

→ catherineroyal.comのトップページ

↓上記リンク指定のコード

 

リンクの貼り方の詳しい説明は、以下を参考にしてください。
関連記事→ リンクの貼り方!アンカーテキストとは?

 
 

html基本タグ:リスト、ul、li、lo、箇条書き

↓箇条書きパターン「ul」

  • パターンul
  • パターンul-1
  • パターンul-2
  • パターンul-3

↓箇条書きパターン「li」のコード

 

↓箇条書きパターン「ol」

  1. パターンol-1
  2. パターンol-2
  3. パターンol-3

↓箇条書きパターン「ol」のコード

 
 

html基本タグ:コメントアウト

以下のように記載するとブラウザ上では表示されません。

ソースには表示されます。

 

 
実はこの文章の上にも
ブラウザ上には表示されていませんが、
コメントアウトの記載をしています(笑)

「CTRL + U」を押して、
ソースを確認してみて下さい。

以下のようになっています。
html入門 初心者 基本タグ一覧 コメントアウト
 

html基本タグ:半角スペース、全角スペース、空白

↓半角スペース、半角空白のコード

↓全角スペース、全角空白のコード

 

html基本タグ:特殊文字

上で紹介した空白を除く、
よく使われる特殊文字を紹介します。

↓「<」のコード

 

↓「>」のコード

 

↓「”」のコード

 

↓「&」のコード

 

↓「©」のコード

 

html基本タグ:太字、太文字

「太字」のコード

 

html基本タグ:hr、水平の罫線、水平線

↓水平線を表示







 

↓上記のコード

 

CSS:フォント指定、font

フォント装飾に関する「font」タグは、
HTML5.0から非推奨となりました。

そのため、以下のようにCSSで
フォント装飾することをおすすめします。

文字色 文字の色 (CSS)

↓文字色の表示

カラー名:赤色
カラー名:青色
RGB値:赤色
RGB値:青色

↓上記のコード

 

文字背景色、マーカー (CSS)

↓文字背景色を付ける

文字背景色:黄色
文字背景色:黄緑色

↓上記のコード

 

文字サイズ、文字大きさ、フォントサイズ (CSS)

↓文字サイズの指定

文字サイズ xx-large
文字サイズ x-large
文字サイズ large
文字サイズ medium
文字サイズ small
文字サイズ x-small

↓上記のコード

 

CSS:center、センタリング

センタリングに関する「center」タグは、
HTML5.0から非推奨となりました。

そのため、以下のようにCSSで
センタリングすることをおすすめします。

↓文字をセンターに表示

センタリング

↓上記のコード

 

以上、html入門として初心者のための基本タグ
紹介しました。

よく使うタグがある場合は
WordPressプラグイン「AddQuicktag」を
利用すると便利です。

「AddQuicktag」の使用方法は以下を参考にしてください。

関連記事▶WordPressプラグインAddquicktagの使い方!おすすめ設定も!