PR

ブログを書く前に知っておきたい divタグと pタグの違い

この記事は約4分で読めます。
記事内に広告が含まれています。
スポンサーリンク

最近HTMLの勉強をしていて気づいたんですが、<div>タグと<p>タグが全然ちがうモノだという事がわかったので紹介します。

「そんなの当たり前じゃん」という方にはまったく理解できないと思います。

「p を使うと行間が1行空いちゃうな、、、あれ?divにすると行間が空かない?じゃあdivにするか」という風に使っている人のために書きました。

スポンサーリンク

<p>とは|Paragraph(段落)

pタグはParagraphの略です

pタグ Paragraph

<p>タグはParagraphの略で段落を表現するためのタグです。

僕がそうだったんですが、行間があいてしまうからという理由で今まであまり使ってませんでした。

反省しています。

行間は使っているテーマによってはCSSで調整していてくれるかもしれませんが。

: 段落要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、テキストの段落を表します。段落は視覚メディアにおいては、ふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、HTML の段落は画像やフォーム欄などの関連するコ...

<div>とは|division(区分)

じゃあ、今までどうやって改行していたの?

ということになるんですが、恥ずかしながら<div>で囲っていました。

<div>が表す意味なんですが、ブロック、一つのカタマリ、範囲、区分を表しているに過ぎないようで、文章の改行に使うのは正しくないようです。

<div>は他に適切なタグがない場合に限り使うタグです。

: コンテンツ区分要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる(例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど)までは、コンテンツや...

ブログを書く前に知っておきたいwordpressのこと

「ブログを書く前に知っておきたいwordpressのこと」というか、知っておけば良かったなぁと思う事がHTMLの事です。

wordpressはHTMLやCSSといったプログラミングの知識がなくても気軽に始めることができます。

僕もそうです、気軽に始めました。

「じゃあ、HTMLとか、CSSとか勉強しなくていいんだ!」となりそうですが。

うん。

そうだけど、そうでもないです。

HTMLは検索エンジンのロボット達のための言葉

HTML(エイチティーエムエル、HyperText Markup Language)の略です。

Languageとあるので言葉ですよね。

誰のための言葉なのかというと、googleなどの検索エンジンのロボット達のための言葉です。

まず、ロボに理解してもらわないと人まで届かないんです。

ブログを書く以上はHTMLとは無関係ではいられない

ロボット達は人間のようにブログの記事を「へー、ふーんこんな事が書いてあるな、面白いなぁ」って感覚や感性で読んでくれてなくて、囲まれたタグによって「この部分はこんな事が書いてる」って機械に理解しています。

ワードプレスの投稿画面

テキストタブをポチッと

wordpressの投稿画面のビジュアルエディター状では分からないんですが、キストタブをポチッとやると、ぶあーーーーータグに囲まれた文章がびっしり!!並んでます。

あれってHTMLですよ。

つまり、勉強しなくてもなんとかなるけど、wordpressを使ってブログを書く以上はHTMLとは無関係ではいられないんです。

まとめ

  • 改行はpタグで囲むのが正しい
  • ルールに従ったタグで囲んでいかないとダメ

pを使うと行間が空いたからdivにするといった使い方は間違いです。

見た目はCSSで調整しましょう。

僕は記事が大事なんだから、HTMLとか、CSSとか勉強しなくていいやと思って、3年くらいブログを書いていたんですけど、今は反省しています。

最近、やっと本格的に勉強を始めました。

HTML はロボット達に文書の構造を理解してもらうために、意味付けするためのもので、見た目を変更するためのものではありません。

えらそうに書いてますが、僕も最近分かったばかりです。

一緒に勉強していていきましょう。

WordPress
スポンサーリンク
スポンサーリンク
FOLLOW
スポンサーリンク
タイトルとURLをコピーしました