スキップしてメイン コンテンツに移動

サイトのhtml構文に基づく文章の組み立て/見出しと段落と改行と重要性と強調の使い分けについて

html構文の主要な五つの要素を使ってサイト作成での文章の組み立てを考えてみたい。


見出しは最大のh1要素から最小のh6要素までの大きさがあり、文字サイズも変化する。全て太文字になる。上下に空行が入る。


段落はp要素で、上下に空行が入る。


改行はbr要素で、終了タグはないので、一つだけで使う。上下に間隔のある要素タグ(p要素など)に続けると空行を増やす。


重要性はstrong要素で、太文字で表示される。


強調はem要素で、斜体で表示される。




例文として主旨を取り上げておこう。


html構文の文章の組み立てについて


サイトで訪問者へ文章を速やかに伝えるためにはどのように表示されるかのhtml構文のマークアップを整えなくてはならない。


どのようにhtml構文を使うべきか


html構文の文章の組み立ての雛形とすると見出しを付けて段落を幾つか置きながら必要ならば改行や重要性や強調も追加することが挙げられる。


見出しと段落を一組と捉えながら記事全体を配置して行く。見出しへの段落を増やしても良いし、見出しだけや見出しと段落の一組を増やしても良い。


記事全体で見出しと段落の一組、または見出しだけのところに別の一組、または別の見出しだけを続けるならば大きさによって文章内容も相応しく表示される。


見出しでは大きなものから小さなものへの文脈の流れが確保されている。この内包関係によってサイトの文章構成も円滑に図れるようになるのではないか。記事全体から見ればタイトルに最も大きな見出しを付けておくことによって小さな見出しを含めた個々の段落を取り纏めて表現し易くなって来るだろう。


大きな見出しに小さな見出しが続けば後者は前者の文章内容を強く示すことができるし、見出しの大きさが同じならば文章内容も同じままの度合いで示され、小さな見出しに大きな見出しが続けば後者は前者の文章内容を弱く示すことができる。


詩的に例えるならば


柴犬の見出しに子犬の見出しを小さく続けて段落に可愛いと置けば柴犬の子犬が可愛い気持ちを強く表している。
柴犬の見出しにブルドッグの見出しを同じように続ければ双方は同じような気持ち表している。
子犬の見出しにブルドッグの見出しを大きく続れば子犬の気持ちを弱く表している。


個々の文脈から捉えれば柴犬の子犬は可愛いといっているか、柴犬とブルドッグがいるといっているか、ブルドッグがいるといっているかだからそれぞれに流れが変わって来るんだ。


そして見出しの強い組み合わせは又別の見出しとの弱い組み合わせを介して記事全体に統一感を広く持たせることもできる。


噛み砕いていえば柴犬よりも柴犬とブルドッグの見出しが並んでいたり、柴犬についても可愛いどころか楽しげとさえも見出しが並んでいたりすればサイトのイメージがさらに多く受け取られるのと等しいわけだ。


記事全体が見出しの大小様々な組み合わせによって表示されることは文章構成において気持ちを明らかに伝えるためには望ましくて好ましいと思われる。


検索ロボットもhtml構文のマークアップが整えられていればサイト内容を上手く理解することができるからキーワードの検索結果に適切に掲載されてサイトへのアクセスは増えないともかぎらない。


html構文のマークアップ


極簡単に文章を表示したいだけならば改行だけで事足りるかも知れない。


しかし見出しや重要性や強調は文字のスタイルを変えるし、cssでもデザインは好きに付けられるだろうけど、手軽にサイトの視認性も上がって来る(デザインの視覚効果を狙うならばcssを使うと文章の組み立てを損う心配もない)。


文章の組み立てをhtml構文から再確認することに繋がるのも嬉しいところだ。




html構文のマークアップ(文章は要素名に置き換えて)も載せておこう。


<h2>見出し</h2>
<p>段落</p>

<h3>見出し</h3>
<p>段落<strong>重要性</strong>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落<strong>重要性</strong>段落</p>

<h3>見出し</h3>
<p>段落<br>段落<br>段落</p>
<p>段落</p>
<p><em>強調</em></p>
<p>段落<strong>重要性</strong>段落</p>
<p>段落<em>強調</em>段落</p>

<h2>見出し</h2>
<p>段落</p>
<p>段落</p>
<p>段落</p>



些細な日常ではブログのヘッダーのブログ名とそして記事のタイトルにも見出のh1要素が付いているので、本文中の例文としての主旨をh2要素で開始することにした。


html構文で見出しタグの番号はh1から順番通りに使うと文章構成が分かり易くて良いと思う。


実際に悩まされるのが一つの見出しを掘り下げるように小さな見出しを続けてから元の大きな見出しを付けないで文脈を続けるにはどうするか。


例文だと「それぞれに流れが変わって来るんだ」と「そして見出しの強い組み合わせは」のところで、付随的な認識を遂げながら話題そのものが後続の小さな見出しの「詩的に例えるならば」とは離れて最初の大きな見出しの「どのようにhtml構文を使うべきか」の流れへと逆戻りしているんだ。


微妙なので、そのままで表現していて良いけど、しかし記事の展開として一つの見出しに追加された小さな見出しの末尾から元の大きな見出しにイメージが転回されても違和感がないような文章構成が必要だと感じる。


物事を追求しながら見出しのイメージを越えるようなところまで行ってしまうと文章構成の収まりが悪くなるのではないか。


なので「文章の組み立てをhtml構文から再確認することができるのも嬉しいところだ」といってしまう。


見出しと段落の大小様々な組み合わせでやって行くと大きな見出しとしても小さな見出しとしても筋が通っているかどうか、イメージが速やかに流れているかどうかを知るのには役立つんだ。


いつも分かっているとはいえ、html構文は文章の組み合わせのアウトラインが目に見えて受け取れるところが特徴的な表現方法だ。


面白いからサイト作成に気持ちが嵌まるのもやはり不思議ではなかった。

コメント

些細な日常の人気の投稿

Imgurで画像URLと埋め込みコードを取得する方法

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策