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

些細な日常

サイトの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構文は文章の組み合わせのアウトラインが目に見えて受け取れるところが特徴的な表現方法だ。

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

コメント

最近の投稿

日付: 

目眩の薬から黒い虫が歩いているなどの幻覚を起こす場合がある

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...