HTML/本文

段落[編集]

段落である事を表すにはp要素（Paragraphの略）を使う。多くのウェブサイトでは段落を示すためにbr要素を用いているが、この用法はHTMLの正しい書き方でなく、連続したbr要素は一部のブラウザではまとめて一つの改行として表示されてしまう。

Strictではbody要素直下にブロック要素を置いてその中に本文を書く必要があり、body要素直下に本文テキストを書いてはならない。

記述例[編集]

<p>家に帰ると、楽しみにしていたおやつが食べられていた。仕方が無いのでPCを起動し、このウェブ日記を更新している。</p>
<p>今日は先日買った資料も参考にしつつ、ウィキペディアに項目を一つ投稿しようと思う。さて何時間掛かるだろうか。</p>

とくにP要素について、使い方を、 https://ja.wikiversity.org/wiki/Topic:HTML に書いています。使い方について参加して欲しいです

表示例[編集]

家に帰ると、楽しみにしていたおやつが食べられていた。仕方が無いのでPCを起動し、このウェブ日記を更新している。

今日は先日買った資料も参考にしつつ、ウィキペディアに項目を一つ投稿しようと思う。さて何時間掛かるだろうか。

見出し[編集]

見出しである事を表すにはh1～h6要素（hはHeadingの略）を使う。より下位の見出しほど、hの後に続く数字が大きくなる。一般的なブラウザでは文字サイズや文字の太さが変化するが、この要素を大文字や太字目的で使用してはならない。

記述例[編集]

<h1>日本</h1>
<p>日本国（にほんこく、にっぽんこく）は、アジア（ユーラシア大陸）の東方にある島国である。</p>
<h2>地理</h2>
<p>四つの大きな島、北海道、本州、四国、九州と、千島列島、小笠原諸島、琉球列島など周辺の小島からなる列島（島弧）が領土の中心をなす。</p>
<h3>気候</h3>
<p>大半の地域は温帯に属する。南方の諸島は亜熱帯、北方は亜寒帯的気候を示す。海洋性気候だが、モンスーンの影響を受け、寒暖の差は大きい。</p>

表示例[編集]

日本

日本国（にほんこく、にっぽんこく）は、アジア（ユーラシア大陸）の東方にある島国である。

地理

四つの大きな島、北海道、本州、四国、九州と、千島列島、小笠原諸島、琉球列島など周辺の小島からなる列島（島弧）が領土の中心をなす。

気候

大半の地域は温帯に属する。南方の諸島は亜熱帯、北方は亜寒帯的気候を示す。海洋性気候だが、モンスーンの影響を受け、寒暖の差は大きい。

上記事例の文章はWikipediaにある日本の項目の記述を利用している。

引用と出典[編集]

引用である事を表すには、blockquote要素あるいはq要素（Quotationの略）を使う。blockquote要素はブロックレベルの引用に使用し、q要素はインラインでの引用に使用する。両要素について、出典のURIを表すものとしてcite属性が、そのタイトルを表すものとしてtitle属性が利用できる。また、出典あるいは参照元を示すものとしてcite要素がある。その要素で囲った部分が出典であることを示すために使用する。

一般的なブラウザでは、blockquote要素は左右にインデントがある状態で、q要素は引用符に括られた状態（一部環境未対応）で、cite要素は斜体で表示される。なお、左右に空白を取るためにblockquote要素を使用するケースがあるが、これは不適切であり環境によってはその内容が引用であると認識されかねない。スタイルシートを使って空白を取ることが望ましい。

記述例[編集]

<p>ウィキメディア財団について、<cite>ウィキペディア</cite>では、以下の様に説明している。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/ウィキメディア" title="ウィキメディア - Wikipedia">
<p>ウィキメディア財団 (Wikimedia Foundation Inc.) はウィキペディアを運営し、その母体となる団体である。
米国フロリダ州法による非営利組織であり、ウィキペディアの創立者の一人でもあるジミー・ウェールズによって設立された。
財団名称のウィキメディアは英語版ウィキペディアの参加者シェルドン・ランプトンの命名により、ウィキとマルチメディアから造語された。</p>
<p>同財団の目的は、ウィキを用いたオープンコンテントの知的資源を開発するプロジェクトの促進、およびその資源を無料、広告なしで広く公衆に提供することにある。</p>
</blockquote>
<p>同項目にある若年層向けの教育コンテンツ「ウィキジュニア」の作成には興味を引くところである。</p>

表示例[編集]

ウィキメディア財団について、ウィキペディアでは、以下の様に説明している。

ウィキメディア財団 (Wikimedia Foundation Inc.) はウィキペディアを運営し、その母体となる団体である。米国フロリダ州法による非営利組織であり、ウィキペディアの創立者の一人でもあるジミー・ウェールズによって設立された。財団名称のウィキメディアは英語版ウィキペディアの参加者シェルドン・ランプトンの命名により、ウィキとマルチメディアから造語された。

同財団の目的は、ウィキを用いたオープンコンテントの知的資源を開発するプロジェクトの促進、およびその資源を無料、広告なしで広く公衆に提供することにある。

同項目にある若年層向けの教育コンテンツ「ウィキジュニア」の作成には興味を引くところである。

強調[編集]

強調を表すにはem要素（EMphasisの略）、strong要素を使う。strong要素の方がより強い強調を表す。一般的なブラウザではem要素は斜体字で、strong要素は太字で表示される。一部の音声ブラウザはこの要素を認識し、強調音声でテキストを読み上げる場合がある。

記述例[編集]

<p><em>暑い</em>。いや寧ろ<strong>熱い</strong>。</p>

又は

<p><em>暑い</em>。いや寧ろ<b>熱い</b>。</p>

表示例[編集]

暑い。いや寧ろ熱い。

汎用属性[編集]

lang: その要素内でどの言語が使用されているかを示す。
id: その要素の名前を指定する。これが指定された要素には、CSSで設定されたスタイルを割り当てたりすることが可能である。1つのドキュメント内で1回しか使用することができない。
class: その要素とCSSなどで指定されたクラスを関係づける。id属性と同様、CSSで設定されたスタイルを割り当てることが可能であるが、1つのドキュメント内で何回も使用することができる。
title: 指定された要素に対するタイトルを示し、簡単な説明を記述することが多い。一部のブラウザでは、その要素をマウスオーバーするとその内容をツールチップとして表示する。
style: CSSなどのスタイルシートを記述する。あらかじめ割り当てなどが設定されていないスタイルを直接その要素に対して指定できる。
dir: 文字の方向を指定する。属性値にltr(left to right)を指定すると文字が左から右へ、rtl(right to left)を指定すると文字が右から左へ表示される。

その他テキスト関係の要素[編集]

dfn: その語が定義対象の用語であることを示す。文章中でその語が始めて出てきた場合などに使用する。一般的なブラウザでは、イタリック表示となる。
abbr,acronym: abbrはその語が略語であることを、acronymはその語が頭字語であることを示す。title属性を指定し、その語の省略しない形を書くことが必須とされている。ブラウザによっては、この要素が指定された語は点線表示されるが、Internet Explorerは対応していない。
sup,sub: supは文字を上付きに、subは文字を下付きにする。
pre: 指定されたテキストを等幅で表示する。ソースコードなどを表示するときに使用する。HTMLは有効だが、改行やスペースはそのまま表示される。
kbd: 操作法説明などにおいて、キーボードから入力する文字を示す。一般的なブラウザでは等幅で表示される。
code: その部分がソースコードであることを明示する。一般的なブラウザでは等幅で表示される。
samp: そこにある内容が、プログラムなどにより出力される内容のサンプルであることを示す。一般的なブラウザでは等幅で表示される。
var: 変数や引数を示すときに使用する。一般的な環境ではイタリック表示となる。
ins,del: ins要素はその部分が後から挿入した内容であることを、del要素はその部分が後から削除した内容であることを示す。datetime属性（ISO 8601形式）を用いて挿入・削除日時を記述したり、cite属性を用いて情報の典拠を示したり、title属性を用いて簡単な説明を記述したりすることが出来る。; datetime属性は、年（四桁）-月（二桁）-日（二桁）T時:分:秒+9:00の形式（日本時間の場合）で記述する。例えば2010年1月1日9時ちょうどであれば2010-01-01T09:00:00+9:00という書式になる。; 指定位置に応じてブロック要素としてもインライン要素としても使用することが出来るが、ブロック要素として扱ってもCSSでのスタイル指定はインライン要素と同じ扱いになる。
bdo: 指定されたテキストの表示方向を、dir属性で設定する。

強制改行[編集]

テキストファイルでの改行は表示にはほぼ影響しない（ブラウザによってはスペースが開くことがある）。強制的に改行させたいときには<br>を使う。なお、XHTMLにおいては、<br />（XHTML 1.0ではbrと/の間に半角スペースを入れることが推奨されているが、必須ではない）とするように定められている。HTMLでも<br />を使うことは出来るが、文法上正しい書き方ではないので規格に沿ったHTMLを書きたいときは注意しよう。

記述例[編集]

<p>改行します。
はい。あれ?</p>
<p>こうしないと。<br>
ね!</p>
<p>XHTMLのときは、こっちで。<br />
ね!</p>

表示例[編集]

改行します。はい。あれ?

こうしないと。
ね!

XHTMLのときは、こっちで。
ね!

div, span要素[編集]

div要素はブロックレベル要素、span要素はインライン要素であるが、それ以外の意味はなく単体で指定しても、ブラウザが特別な扱いを行ったり、表示が特別変化したりすることはない（ただしdiv要素はブロックレベル要素であり、前後に改行が入る）。id属性やclass属性を使ってスタイルシートを適用したり、lang属性などを指定したり主に他の要素では代用できない（他の要素を用いると範囲内に不必要な情報を定義してしまう）ことを行う汎用要素として用いられる。

エスケープシーケンス[編集]

HTMLで半角英数の < や > といった制御用の文字そのものを表示したい場合には、

< と表示したいなら < と入力する。

> と表示したいなら > と入力する。

ltやgtの直後の記号はセミコロン(;)である。(コロン(:)ではない。)

HTMLに限らず、プログラミングや類似のコーディングにおいて、このように制御文字そのものを入力するための入力方法のことを「エスケープシーケンス」という。

HTMLのエスケープシーケンスについては、種類が多いので、詳しくはネットなどで検索してもらいたい。

なお、派生的な話題だが、 < とwebページで表示したい場合、 &lt;とHTMLに入力する。