どのプログラミング言語でも共通ですが、HTMLも「 習うより慣れろ 」で、実際に書いて試してみるのが上達への近道です。ここでは、文章や文字を見やすく表示するためのHTML要素（h1～h6、br、p、div、span）を紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
最終更新日：2026年7月8日
HTMLでは、<h1></h1> ～ <h6></h6> のタグを使って見出しを書きます。
このタグの「 h 」は「 heading 」（ 見出し ）の略です。
このタグで文字を囲み、見出しとして指定します。
下のように、<h1> から <h6> まで指定してみましょう。
このファイルを保存して、ブラウザで表示を確認すると…
<h1> から <h6> で囲んだ文字は、それぞれ見出しとして表示されました。
一般的なブラウザの初期設定では、文字は太字になり、<h1> が1番大きく、そこから <h6> まで段階的に小さくなっています。
ただし、これは主にブラウザの初期スタイルによるもので、見た目はCSSで変更できます。
何も指定していない文字は、通常の本文として表示されます。
<h1> から <h6> の見出し要素を使えば、文字の太さや大きさが変わることがわかりました。
ただこの「h」は本来、「文字サイズを指定するタグ」ではなく、 文書の「 構造 」や、文の「 重要度」を表すものです。
大きく表示されるから重要なのではなく、「文書の構造上」見出しとして重要なため、結果として大きく表示されているのです。
例えばスクリーンリーダーなどでは、<h1> から <h6> は「 見出し 」として認識され、見出しのみをジャンプして拾い読みしたりできます。
このように、文書の構造を伝える事が、見出し要素の本来の役割です。
■ SEOとは
SEOとは、「 Search Engine Optimization 」の略で、「 検索エンジン最適化 」という意味です。
Googleなどの検索エンジン（ 検索サイト ）で、特定のキーワードで検索した場合に、検索結果として上位に表示されるための工夫を、SEOと呼んでいます。
■ 見出しとSEO
検索エンジンは、ページの内容を理解するために、本文だけでなく見出し要素も手がかりの一つとして利用します。
そのため、見出しには、その部分の内容をわかりやすく表す言葉を書いておきます。無理にキーワードを入れるのではなく、あくまでページの内容に合った自然な見出しにすることが重要です。
また、HTML文書内では、上から下へ内容に応じて<h1> から<h6> を配置していくと、構造がわかりやすくなります。特に近年はAIの普及により、 ページの内容をAIが解釈する機会が増えているので、見出しで文書の構造を明確にすることで、 AIにとっても理解しやすく、検索されやすいページ作りにつながります。見出し要素は、文字の大きさだけでとらえず、文書構造の把握やSEOに役立つことを、覚えておきましょう。
ちなみに、タイトル要素（ <title></title> ）も、ページ内容を伝える重要な要素の一つです。
先ほど、見出し要素の表示確認をした時には、<h1> から <h6> で囲まれた文字はそれぞれ改行されて表示されました。
これは、見出し要素自体に、「自動改行を行う」という機能があるからです。
上のHTML文書から見出しタグを消してブラウザの表示を確認してみましょう。
このように、HTML文書内で改行して書かれた文字でも、ブラウザ上では改行せず、1行で表示されてしまいます。
HTML文書をブラウザ上で改行して表示させたい場合は、「改行タグ（改行要素」）というものを使って、改行を指示する必要があります。
改行タグ（改行要素）は <br>と書きます。
次のように改行タグを書いてブラウザ上で表示を確認してみましょう。
改行タグ（ <br> ）を入れたところで改行して表示されました。
このように、HTML文書をブラウザ上で改行して表示したい場合は、この <br> を書きます。
改行タグ（ <br> ）は、改行以外の目的で使わないようにしましょう。
例えば、段落や空白行を作る・表を作るなどの用途で使うと、後々不具合が生じる原因になります。
段落やブロックにまとめたり表を作ったりする要素は、個別に用意されているので（ <p>、<div>、<table> など ）、そちらを使うようにします。
<br> は、住所や署名・会話文や詩など、改行自体がコンテンツ上意味を持つ場合にだけ使うことが推奨されています。
段落要素は、段落タグ（ <p> ）を使って作ります。
タグ要素の「 p 」は、「 paragraph（段落） 」の略です。
このタグで囲まれた文字が、段落となります。
段落らしく少し長い文章を書いて、段落にしたいところを <p> </p> で囲んでみます。
これを保存してブラウザで表示してみましょう。
上のように、段落タグ（ <p> ）で囲んだ部分が段落になっています。
■ 段落の幅
さきほど段落を作ったhtml文書を、ブラウザのウィンドウの幅を変えて見てみると、ウィンドウの幅に合わせて段落の幅も変わってしまいます。
文字が左端から右端までいっぱいに書かれていると、なんだか窮屈な感じですね。
そこで、段落の幅を調整する方法を考えてみましょう。
これは、HTMLの要素ではなく、スタイルシートというものを使って実現します。
■ スタイルシートとは
スタイルシートとは、Webページのデザインやレイアウトなどの「見た目」を指定するものです。 文書の構造や内容自体はHTMLで記述しますが、それとは別に「スタイルシート」として文字の大きさ・色・配置などの見た目（スタイル）を定義し、必要に応じて適用することができます。
HTMLが「文章構造」を、スタイルシートが「見た目（デザイン）」を、それぞれ担当する事で、両者を切り離して管理できます。これにより、多くのメリットがあります。例えば、レイアウトだけを変更する時のメンテナンスが容易になったり、定義したスタイルシートを複数の文書で共有し全体のデザインに一貫性を持たせたり、などです。
HTMLで一般的に使われるスタイルシートは CSS（ Cascading Style Sheets ）です。
CSSは、複数の場所で設定した定義を組み合わせて利用できるという特徴を持っています。
■ 段落にCSSを指定
CSSの指定は、次のように行います。
<head> </head> の中に、<style> </style> を書いて、その中に「CSS言語」でスタイル情報を書きこみます。
ブラウザで表示を確認してみましょう。
段落（ p要素 ）は、幅500ピクセル（ px ）で表示されます。
また、ついでに文字の色も指定したので（「#00F」は青のカラーコードです）、文字が青になっています。
<style>
p {
color: #00F;
max-width: 500px;
}
</style>
まず、<style> </style> タグで囲むことで、「その部分はスタイルシート」だと指定できます。
今回は p要素に対するスタイルを指定したいので、その中にp{ }と書き、{ }内に内容を記述します。
ここで指定したCSSの内容は2つ、「 color 」と「 max-width 」です。
「 color 」は文字の色を意味します。ここでは、カラーコード「 #00F 」の青を指定しています。
「 max-width 」は最大幅を意味します。ここでは、500ピクセルを指定しています。
※ここでは、簡単にCSSを説明するためHTML文書内の <head> </head> の中にCSSを書く方法を紹介しましたが、 一般的には、 HTML文書内ではなく「独立したCSSファイル」の中にCSSを記載し、HTML文書内でそのファイルを読み込む、という方法がよく使われています。
文章を1つのかたまりとして扱いたい場合、<div> 要素を使うことができます。
「 div 」は「 division（ 分割、区別 ） 」の略です。
<div>は、かたまりを作るための汎用的なタグで、前後で自動的に改行が行われます。
これまでに出てきた <h1> ～ <h6> や <p> も、通常は前後で改行して表示される（かたまりを作る）要素です。
<div> 要素は、<h1> ～ <h6> や <p>のような特別な意味を持たず、単純に特定の範囲をまとめる時に使います。
例えば、デザイン上、任意のかたまり部分に色をつけたい場合などです。
特定の役割を持つかたまりの場合は、<h1> ～ <h6> や <p>のような、「意味を持つ」要素を優先して使うことが望ましいです。他にも、意味を持つかたまりを作る要素としては、<header>（ヘッダー）、<main>（本文）、<nav>（ナビゲーション） など、様々なものがあります。
文中の特定の文字だけ色を変えたいなどの場合に、文の中の一部の範囲を指定できるのが、<span> 要素です。
「 span 」は「範囲」という意味です。
<span> も、それ自体特別な意味は持たず、単純に文の一部を指定するための汎用的なタグで、<div>とは違い、通常前後で改行はされません。
他に、前後に改行が入らず文の一部として扱われる要素には、<a>（リンク）、<abbr>（略語）、<input>（入力欄）など多くのものがあり、これらはそれぞれが特定の意味を持っています。
こちらも、まずは「意味を持つ」要素の使用を検討し、それらに当てはまらない場合に<span> 要素を使うとよいでしょう。
<div> 要素と <span> 要素を使って、CSSを指定してみましょう。
さきほどのファイルに、下のように <div> 要素と <span> 要素を書き加えます。
<div> を <body> のすぐ後に、</div> を </body> の直前に入れているということは、<div> 要素が、<body> 要素の中身全部を指定しているということです。
また、<span> 要素は文の中の一部だけを囲んでいます。
次に、CSSの指定をします。
下のように、 <div> 要素と <span> 要素に対するCSSの指定を書いてみます。
ついでに、 <h1> 要素にも色やフォントサイズの指定をしてみます。
ブラウザで表示を確認してみましょう。
これまで左寄せだった文章全体が、中央寄せになりました。
これは、<div> 要素に指定した「 margin-right:auto; 」「 margin-left:auto; 」によります。要素の左右のマージンを auto にすると、幅が決まっている場合は中央寄せになります。
また、<span> 要素に指定した「 color:#009900; 」は、文字色を「 #009900 」にするという意味で、「 #009900 」は緑のカラーコードです。
同じように、<h1> 要素には、文字の色を「 #660000（赤茶色）」にして、サイズを30ピクセルにするよう指定しています。
【A】<h1> から <h6> は文字の大きさではなく、見出しのレベルで使い分けます。
見た目はCSSで調整し、HTMLでは文書の構造に合わせて選ぶのが基本です。
【A】以前はそう説明されることが多かったようですが、2026年現在は「必ず1つだけ」とまではいえません。
ただ初心者のうちはページの主題を表す <h1> を1つ置く形にしておくと、構造がわかりやすくなります。
【A】<br> は単純な改行が必要な場面で使いますが、文章のまとまりを分けたい場合は <p> を使います。
段落を br だけで作るのは避けたほうが安全です。
【A】<div> はかたまり全体を囲みたい時、<span> は文章の一部だけを囲みたい時に使います。
どちらも汎用要素なので、先に意味のあるHTML要素が使えないか考えてから使うのがおすすめです。
【A】表示はできますが、あまりおすすめしません。
<div> は意味を持たない要素なので、<header>、<main>、<section>、<nav> など、内容に合った要素を使える場面ではそちらを優先したほうが、構造が伝わりやすくなります。
【A】小さなサンプルや学習用ならHTML内の <style> でも大丈夫です。
実際のWeb制作の現場では、管理のしやすさや再利用性のために、CSSを別ファイルに分けることが多いです。
文章や文字を見やすく表示していくためのHTML要素について、いかがでしたでしょうか。
「HTMLから始めていつかプログラマーになりたいけど、独力では限界があるな」と感じている方には、「プログラマカレッジ」もおすすめです。
プログラマカレッジは、本気でプログラマーを目指す方のための就職支援付き、受講料無料のプログラミングスクールです。今回ご紹介したHTMLを含む豊富なカリキュラムで、IT初心者からプログラマーとして就職するまで、プロが完全にサポートします。
本気でプログラマーとして就職・転職したいという方は、ぜひ一度のぞいてみて下さいね。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」
INTERNOUS,inc. All rights reserved.
