マークアップされたHTML文章

実際にマークアップされたHTML文章はどのようなものか確認してみたいと思います。
FC2blogでは記事内の文章をHTMLタグを用いてマークアップできるのでそれを用いてみます。
今回はHTMLを用いない文章、HTMLのタグを表示した文章、HTMLでマークアップした文章を並べました。

HTMLでのマークアップ
ここでのマークアップとはコンピューターが文章の構造を理解できるように記述することです。
見出しや段落を構造化してコンピューターに理解させることで自由に文章を表現できたりするだけではなく、表示が崩れたりブラウザごとに表示が変わったりすることを防ぐことにもなります。また検索エンジンにも文章を理解してもらいやすくなります。
以下ではHTMLで主に用いる

見出し
段落
箇条書
リンク

これらのマークアップについて確認していきます。



見出し
HTMLでは文章の見出しをマークアップすることができます。
見出しに用いるタグは重要な見出しの順に<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類が用意されています。
タグの使い方は見出しの部分を開始タグ<h1>と終了タグ</h1>で囲みます。

段落
主なテキストの部分の段落をマークアップするタグは<p>タグです。
段落ごとに開始タグ<p>と終了タグ</p>で囲めば一つの段落となります。
また次の段落ごとに一行のスペースが空いて表示されます。

箇条書き
事柄を並べて表示したいときは箇条書きを用いますがHTMLでは<ul>と<li>を用います。
箇条書きをしたい部分全体を<ul>と</ul>で囲み、それぞれの事柄を<li>と</li>で囲みます。
例：
<ul>
<li>牛肉</li>
<li>ジャガイモ</li>
<li>たまねぎ</li>
<li>にんじん</li>
<li>出汁</li>
</ul>

リンク
それぞれのHTML文章をつなげたり、HTML上に画像や音楽、映像を載せたりするのにはリンクタグ<a>を用います。
開始タグ<a>と終了タグ</a>で囲んだ部分をクリックなどすればリンク先にアクセスできるようになりますが、リンク先のアドレスの指定は開始タグ内で指定します。ここで開始タグ内に属性hrefを加えることでアドレスを指定することができます。
使い方としては
<a href="http://dokokanoaddress">ここからどこかのアドレスに繋がります</a>
このようになります。



今回の記事はFC2blogの本文編集の改行（単純にスペースキーを押して改行）も合わせたものになっているので記事をコピペしてHTMLファイルとしてブラウザに表示してもこの記事そのものとしては表示されないので注意してください。
また見出しの大きさや改行の間隔はCSS（Cascading Style Sheets、スタイルシートとも）で調整することもできます。





<p>実際にマークアップされたHTML文章はどのようなものか確認してみたいと思います。</p>
<p>FC2blogでは記事内の文章をHTMLタグを用いてマークアップできるのでそれを用いてみます。</p>
<p>今回はHTMLを用いない文章、HTMLのタグを表示した文章、HTMLでマークアップした文章を並べました。</p>

<h1>HTMLでのマークアップ</h1>
<p>ここでのマークアップとはコンピューターが文章の構造を理解できるように記述することです。</p>
<p>見出しや段落を構造化してコンピューターに理解させることで自由に文章を表現できたりするだけではなく、表示が崩れたりブラウザごとに表示が変わったりすることを防ぐことにもなります。また検索エンジンにも文章を理解してもらいやすくなります。</p>
<p>以下ではHTMLで主に用いる</p>

<ul>
<li>見出し</li>
<li>段落</li>
<li>箇条書</li>
<li>リンク</li>
</ul>

<p>これらのマークアップについて確認していきます。</p>



<h2>見出し</h2>
<p>HTMLでは文章の見出しをマークアップすることができます。</p>
<p>見出しに用いるタグは重要な見出しの順に<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類が用意されています。</p>
<p>タグの使い方は見出しの部分を開始タグ<h1>と終了タグ<h2>で囲みます。</p>

<h2>段落</h2>
<p>主なテキストの部分の段落をマークアップするタグは<p>タグです。</p>
<p>段落ごとに開始タグ<p>と終了タグ</p>で囲めば一つの段落となります。</p>
<p>また次の段落ごとに一行のスペースが空いて表示されます。</p>

<h2>箇条書き</h2>
<p>事柄を並べて表示したいときは箇条書きを用いますがHTMLでは<ul>と<li>を用います。</p>
<p>箇条書きをしたい部分全体を<ul>と</ul>で囲み、それぞれの事柄を<li>と</li>で囲みます。</p>
<p>例：</p>
<ul>
<li>牛肉</li>
<li>ジャガイモ</li>
<li>たまねぎ</li>
<li>にんじん</li>
<li>出汁</li>
</ul>

<h2>リンク</h2>
<p>それぞれのHTML文章をつなげたり、HTML上に画像や音楽、映像を載せたりするのにはリンクタグ<a>を用います。</p>
<p>開始タグ<a>と終了タグ</a>で囲んだ部分をクリックなどすればリンク先にアクセスできるようになりますが、リンク先のアドレスの指定は開始タグ内で指定します。ここで開始タグ内に属性hrefを加えることでアドレスを指定することができます。</p>
<p>使い方としては</p>
<p><a href="http://dokokanoaddress">ここからどこかのアドレスに繋がります</a></p>
<p>このようになります。</p>



<p>今回の記事はFC2blogの本文編集の改行（単純にスペースキーを押して改行）も合わせたものになっているので記事をコピペしてHTMLファイルとしてブラウザに表示してもこの記事そのものとしては表示されないので注意してください。</p>
<p>また見出しの大きさや改行の間隔はCSS（Cascading Style Sheets、スタイルシートとも）で調整することもできます。</p>

実際にマークアップされたHTML文章はどのようなものか確認してみたいと思います。

FC2blogでは記事内の文章をHTMLタグを用いてマークアップできるのでそれを用いてみます。

今回はHTMLを用いない文章、HTMLのタグを表示した文章、HTMLでマークアップした文章を並べました。

HTMLでのマークアップ

ここでのマークアップとはコンピューターが文章の構造を理解できるように記述することです。

見出しや段落を構造化してコンピューターに理解させることで自由に文章を表現できたりするだけではなく、表示が崩れたりブラウザごとに表示が変わったりすることを防ぐことにもなります。また検索エンジンにも文章を理解してもらいやすくなります。

以下ではHTMLで主に用いる

• 見出し


• 段落


• 箇条書


• リンク

これらのマークアップについて確認していきます。

見出し

HTMLでは文章の見出しをマークアップすることができます。

見出しに用いるタグは重要な見出しの順に<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類が用意されています。

タグの使い方は見出しの部分を開始タグ<h1>と終了タグ</h1>で囲みます。

段落

主なテキストの部分の段落をマークアップするタグは<p>タグです。

段落ごとに開始タグ<p>と終了タグ</p>で囲めば一つの段落となります。

また次の段落ごとに一行のスペースが空いて表示されます。

箇条書き

事柄を並べて表示したいときは箇条書きを用いますがHTMLでは<ul>と<li>を用います。

箇条書きをしたい部分全体を<ul>と</ul>で囲み、それぞれの事柄を<li>と</li>で囲みます。

例：

• 牛肉


• ジャガイモ


• たまねぎ


• にんじん


• 出汁

リンク

それぞれのHTML文章をつなげたり、HTML上に画像や音楽、映像を載せたりするのにはリンクタグ<a>を用います。

開始タグ<a>と終了タグ</a>で囲んだ部分をクリックなどすればリンク先にアクセスできるようになりますが、リンク先のアドレスの指定は開始タグ内で指定します。ここで開始タグ内に属性hrefを加えることでアドレスを指定することができます。

使い方としては

ここからどこかのアドレスに繋がります

このようになります。

今回の記事はFC2blogの本文編集の改行（単純にスペースキーを押して改行）も合わせたものになっているので記事をコピペしてHTMLファイルとしてブラウザに表示してもこの記事そのものとしては表示されないので注意してください。

また見出しの大きさや改行の間隔はCSS（Cascading Style Sheets、スタイルシートとも）で調整することもできます。