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

些細な日常

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

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

コメント

人気の投稿

吉幾三の怒りに触れる横着な議員連中は日本の崩壊を引き起こす

イメージ

歌手の 吉幾三 が自身のYouTubeチャンネルの 吉幾三チャンネル【公式】 に 私は怒ってます! を掲載して、一体、何だろうと観てみたら飛行機で乗り合わせた国会議員の態度が悪いのを見兼ねて黙っていられなかった。 今の日本の不味い政治状況を良く表している感じがしてさらに酷くな...

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

イメージ

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

ナサニエル・ホーソーンの若いグッドマン・ブラウンの日本語訳

イメージ

十九世紀のアメリカの作家、小説家の ナサニエル・ホーソーン の小説の 若いグッドマン・ブラウン (1835)の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...