HTMLで整形済みテキストを作成する方法を解説
HTMLで整形済み(フォーマット済み)のテキストを表示するには、かつては <xmp> タグを使用する方法がありました。このタグを使うと、タグ内に記述した内容がそのままの形でブラウザに表示され、HTMLタグも無効化されて文字列として扱われます。
注意点
<xmp> タグはすでに非推奨(廃止予定)となっています。 現在のHTML標準では使用できませんので、新しいウェブサイトでの利用は避けてください。
記述例
参考までに、<xmp> タグを使って整形済みテキストを作成していたコードの例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>HTML xmp Tag</title>
</head>
<body>
HTML tags include
<xmp><b> for bold text</b>, <i> for italic text.</i></xmp>
</body>
</html>
現在推奨される代替方法
<xmp> タグの代わりには、<pre> タグと <code> タグを組み合わせて使用するのが一般的です。ソースコード中の「<」や「&」などの特殊文字は、< や & のようにHTMLエンティティへ置き換えて記述します。
<pre><code> <b> for bold text, <i> for italic text. </code></pre>
この方法であれば、標準に準拠しつつ、等幅フォントで空白や改行を保持した整形済みテキストを表示できます。また、<code> タグと組み合わせることで、コードであることを検索エンジンや支援技術にも明示できます。
-
HTMLで参考文献(Bibliography)を作成する方法
参考文献(Bibliography)とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト
-
【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法
HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。 それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。 属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols