ガジェット通信 GetNews

見たことのないものを見に行こう

HTMLで見出しタグと段落タグを使う方法【初心者向け】

DATE:
  • ガジェット通信 GetNewsを≫

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

HTMLの見出しと段落

HTMLはもともとスイスの物理学研究所の研究員だったティム・バーナーズ=リーという人物が、数千人規模の研究者たちと研究や仕事のやりとりをするためにつくられました。初期のHTMLは学術文書を共有するシステムとして開発されたため、論文の書き方に沿うように、タイトル・本文・引用と文書の構造が明確に定義されています。

今回は見出しと段落を分けることにより、ちょっとしたウェブページを作ってみましょう。

 

見出し(hタグ)

見出しはHeadlineの頭文字hを意味するhタグを使います。

body の部分にh1タグをつかって「はじめてのHTML」と記述してみましょう。

はじめてのHTML

はじめてのHTML

大きな文字で見出しが表示されました。

 

hタグには見出しが6段階あり、一番重要な大見出しがh1、中見出しがh2、小見出しがh3と数字が大きくなるにつれ、深い階層にある見出しとなります。

html見出しと段落

論文を書くときに、章・節・項と文書の構造があるように、HTMLでも見出しはh1→h2→h3…と数の小さなものから順番につけるのがルールです。h2の見出しで書かれた文章のなかにh1の見出しを入れることは、深い階層の文章の中に浅い階層の文章を入れることとなり、文の構造を崩してしまうことになるので気をつけましょう。

 

 

段落(pタグ)

文章はParagraphの頭文字pをとったpタグで表します。文の段落を区切る機能を持ち、pタグの中に文章を記述することで一つの段落がつくられます。

pタグを使って下の文章を段落分けしてみましょう。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。現在は、WHATWG により仕様が作られ、それを元に W3C により勧告が行われるという流れになっている。W3C は、XML ベースの規格である XHTML の勧告も行っている。

 

まず文章全体をpタグで囲んでみました。
見出しと段落2

文章がそのまま一つのかたまりになっています。このままでは少し見づらいですね。

 

pタグを使って文を3つに分けてみましょう。

pタグの使い方

段落をつくったことにより文章全体がすっきりして見やすくなりました。

pタグの機能は文章を段落に分けることです。pタグを使うと段落と段落の間に一行空白が開きます。改行をしたい場合には別のタグ(
)を使うので注意しましょう。

 

段落分けした文章に、先ほどの見出しをつけてみましょう。

見出しと段落の使い方
かなりシンプルですが、ぐっとWebページらしくなりましたね!

 

質の高い文章と適切な見出しをつけることにより、Web上での文書の価値を高めることができます。HTMLはWebブラウザが解読・表示するものなので、コンピューターが文書構造を正しく理解できるようにページを記述することが肝心です。

 

今回はHTMLで見出しタグと段落タグを使う方法をご紹介しました。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。