
HTMLにはたくさんのタグがあります。
最初から全部覚える必要はありません。
まずは、よく使うものから少しずつ覚えていけば大丈夫です。
| タグ | 読み方・意味 | よく使う場面 |
|---|---|---|
| <h1> | 大見出し | ページ全体の大きな見出し |
| <h2> | 見出し | 記事の章タイトル |
| <h3> | 小見出し | 章の中の小さな見出し |
| <p> | 段落 | 普通の本文 |
| <br> | 改行 | 同じ段落内で改行したいとき |
| <strong> | 強い強調 | 重要な言葉を太字にしたいとき |
| <b> | 太字 | 見た目だけ太字にしたいとき |
| <em> | 強調 | 少し強調したいとき |
| <a> | リンク | 他のページへ移動するリンク |
| <img> | 画像 | 画像を表示したいとき |
| <ul> | 箇条書きリスト | 順番のないリスト |
| <ol> | 番号付きリスト | 1、2、3のような順番付きリスト |
| <li> | リスト項目 | リストの1つ1つの項目 |
| <table> | 表 | 表を作るとき |
| <tr> | 表の行 | 表の1行 |
| <th> | 表の見出しセル | 表の見出し部分 |
| <td> | 表のデータセル | 表の中身 |
| <blockquote> | 引用 | 他の文章を引用するとき |
| <code> | コード | プログラムやコマンドを表示するとき |
| <pre> | 整形済みテキスト | 改行や空白をそのまま表示したいとき |
| <hr> | 区切り線 | 話題を区切りたいとき |
| <div> | 汎用ブロック | まとまりを作るとき |
| <span> | 汎用インライン | 文章の一部だけ指定したいとき |
最初に覚えるなら、次の5つがおすすめです。
| タグ | 意味 |
|---|---|
| <h2> | 見出し |
| <p> | 段落 |
| <a> | リンク |
| <img> | 画像 |
| <ul> / <li> | 箇条書き |
この5つが分かるだけでも、HTMLの読みやすさはかなり変わります。
多くのHTMLタグには、始まりと終わりがあります。
たとえば段落なら、こうです。
<p>これは本文です。</p>
<p> が始まり。
</p>が終わりです。
見出しなら、こうです。
<h2>これは見出しです</h2>
ただし、すべてのタグに終わりがあるわけではありません。
たとえば、画像の <img> や改行の <br> は、
単独で使われることが多いタグです。
<br>(= 改行)
<img src="image.png" alt="画像の説明">
・src=”画像のPath(ファルダやweb内の場所)”
・alt=”画像が表示されないときの代替えテキスト”
WordPressのブロックエディターを使っていても、
内部ではHTMLタグが使われています。
・段落ブロックなら、
<p>これは本文です。</p>
・見出しブロックなら、
<h2>これは見出しです</h2>
・画像ブロックなら、
<img src="image.png" alt="画像の説明">
というようなHTMLが関係しています。
HTMLタグを少し知っておくと、
WordPressの記事がなぜそのように表示されるのか、
理解しやすくなります。
もし、わかりづらい場合、以前のページで
できるだけ、わかりやすく書いているので、
ご参照頂けたら幸いです。
・ホームページを表示するには?
・HTMLって、どうやって使うの?
・WordPressって、どういうもの?
次回は、HTMLのタグの使用方法を記述してみたいと思います。
キャリカク岡山:F.K.
CONTACT


