ブログ記事の書き方を適当にレクチャーする：HTMLタグを有効に使おう！
投稿日：2016年01月02日
最終更新日：
HTMLタグを使いこなせ！
- 見出しは基本のhタグ！
- 段落はpタグで割っていく！
- 可能なら画像にはalt属性を付与して代替テキストを記す！
見出しは基本のhタグ！
ブログ記事にかぎらず、HTMLを書いていく時には、見出し部分にはhタグを使います。hはHeadingの略です。上の見出しはh2タグを使っています(気になる人は見出し部分を全部選択してから右クリック→「選択した部分のソースを表示」(Firefoxの場合)で確認できます。)
見出しにもレベルが存在し、h1~h6まであります。基本的には、
- h1…最高ランクの見出し。サイトタイトルや(HTML5の場合は)記事タイトルなどに使用される事が多い。HTML5の場合は1ページに複数配置可能。
- h2…2番目にランクが高い見出し。当サイトでは記事内の大見出し・大セクションの始まりに使用。
- h3…3番目にランクが高い見出し。当サイトでは記事内の子セクションで使用する。基本的にはh2で開始したセクションの入れ子。
- h4…4番目にランクが高い見出し。当サイトではh3で作成したセクションの中にさらにセクションを入れ子にする場合に使用されるが、使用機会は少ない。
- h5…5番目にランクが高い見出し。当サイトでは登場する機会は殆ど無い。
- h6…6番目にランクが高い(最低ランクの)見出し。当サイトでは登場する機会は殆ど無い。
ページタイトル
このページは、…(中略)
記事の概要
この記事は、…(中略)
記事の見出しその1
コレはコレコレこういう…(中略)
小見出し
ゴニョゴニョゴニョゴニョ…(中略)
記事の見出しその2
ところで、コレについてはこうなって…(中略)
[/PHP] 我ながら酷い解説ですが、見出しレベルや文章の区切りを意識して見出しタグを使いましょう。段落はpタグで割っていく！
hタグで見出しを作って記事の内容を割っていったら、次は段落の作成です。ここで記事をさらに割って、読みやすさを追求します。ここでpタグの出番になります。pはParagraphの略です。段落で区切っていきます。 [PHP]
文章は段落で区切りましょう。
段落分けにはpタグを使います。
[/PHP] こんな感じのソースコードを書けば、段落ごとにブロックができます。こちらも見やすさを考慮して区切っていきましょう。改行に使うタグにはBRタグがありますが、こちらを乱用すると、環境によっては見にくいページができるので、長いテキストは幅いっぱいに記述して勝手に改行するのに任せたほうがいい場合も多いです。可能なら画像にはalt属性を付与して代替テキストを記す！
画像を貼り付けるタグ(imgタグ)にある属性の一つがalt属性です。画像が表示できないなどの場合のために記述する代替テキストです。
[PHP]
[/PHP]
こんな感じで使います。img要素に対しては本来必須の要素ということにはなっています(公式では)。でもまあ、記述しなくても画像が正常に表示される環境では特に支障はありません。画像を正常に表示できない環境でのアクセシビリティを考慮するならつけておきましょう。各種解説画像にalt属性を付けてない私が言えることではありませんが。
