HTML5.1の概要

HTML構文とXHTML構文を選択できますが、ここで紹介するのはより普及しているHTML構文での書き方になります。HTML5ではHTML4を基本として新しいタグが採用されていますので、HTML4を学んだことがある方は変更点を押さえておけばいいでしょう。大きな変更点は要素の定義です。要素には7つの定義があり。フローコンテンツ・ヘッディングコンテンツ・セクショニングコンテンツ・フレージングコンテンツ・組み込みコンテンツ・インタラクティブコンテンツ・メタデータコンテンツに分類されます。文脈によって使用するタグを考えて構成する必要があります。これが大きな変更点です。HTML5では文脈に合わせてコンテンツを表現する必要があるということです。

HTML基本タグ一覧
全体htmlホームページの骨格部分となる最初に記述するタグ。html、head、bodyについて。HTMLを構成する基本タグ 「枠組み部分」
メタデータmetaホームページには表示されない内部情報を指定するタグ。meta、title、link、styleについて。metaデータを表すタグの基本
構造hコンテンツの見出しを表すタグ。hタグ
p文章の段落を表すタグ。pタグ
div大きなひと塊りのグループを作るタグ。div
span小さなひと塊りのグループを作るタグ。spanタグ
hr横線でコンテンツを仕切るタグ。hrタグ
リストulとolリストを作るタグ ol/ul違いがある。ol/ul
dl対話的表現方法、日付と項目などに利用するタグ。dl
テキストaページ遷移のためのリンクを設定するタグ。aタグ
brpタグ内で改行したい場合に使用するタグ。br
strong太文字で強調するタグ、検索エンジンに重要なキーワードを伝える役目もある。strong
em斜線による強調をするタグ。em
pre空白をそのまま表示するタグ、歌詞やコードなどに使用する。pre
メディアimgイメージ画像を挿入するタグ。img
フォームformお問い合わせフォームなどに使用し、サーバーにデータを送信するタグ。form
inputformタグと共に使い、入力エリアなどを作るタグ。input
selectとoption選択ボックスなどを作るタグ。select/opiton
textarea文字量のおおい場合に利用する入力エリアを作るタグ。textarea
table表を作るタグ。table
caption表のタイトルを表すタグ。caption
その他記号キーボードにない記号を表示するタグ。文字参照(記号)
time時刻・日付・年を表すタグ、キャンペーンや特定の時代を表示する場合に使用する。time

timeタグの使い方

HTML5で追加されたtimeタグについて使い方用例を説明します。timeタグは時刻・日付・年を表します。 timeの表 カテゴリ フローコンテンツ・…

select option要素の使い方

selectとoptionはセットで使用し、フォームやアンケートなどホームページの部品を作る際に使います。formタグと一緒に使いサーバーへデータを送…

textareaの使い方

textareaを使うことで、問い合わせフォームのコメント欄やホームページ更新履歴などのデザイン部分にも利用することができます。このページでは基本的な…

tableタグ「表」の作り方

HTML5になり、今まで利用していた属性の多くが非推奨となりました。 デザインはスタイルシートに書くようにしてください。 詳しくは下記の説明をご覧くだ…

spanタグの使い方

spanはスタイルシートを指定するための汎用的なタグです。ですので、ホームページのデザインを反映させるために使います。このタグ自体には他のHTML5タ…

strong/b/emタグの使い方

strongタグを指定するとほとんどのブラウザでデフォルトの状態で太文字で表示されます。使用する場所は強調したい単語、センテンスなどです。特に重要なこ…

preタグの使い方

pre要素内を整形済みテキストとして表示します。空白や改行もそのままの状態で表示します。 pre要素 カテゴリ 文字装飾 タグ <pre>…

pタグの使い方

文章の段落を表すタグです。使用時の注意事項もありますので、初心者の方は見ておきましょう。 pタグ カテゴリ 基本構造 タグ <p> 機能 …

metaデータを表すタグの基本

meta要素はブラウザには表示されない内部情報を掲載または指定するものです。 特に検索エンジンやソーシャルメディアに特定の情報を伝えたり、コンテンツの…

ol/ulタグの使い方と違いについて

olとulタグはリストを作る要素です。olは順番を表示し、ulは順不同のリストを作る際に利用します。 HTML5になり追加された属性も掲載しています。…

inputタグの使い方

input要素は属性によって機能が多岐に渡ります。 このページでは初心者向けに基本的な機能を掲載しています。 inputタグ カテゴリ フォーム タグ…

imgタグの使い方

HTML5の仕様変更で、各ブラウザはメディア部分に多くの機能をサポートするようになりました。jpg png gifなどの画像ファイルや svg png…

formタグの使い方

formはサーバーにデータを送信するための仕組みです。GETメソッド・POSTメソッドの違いについて解説します。 form要素の表 カテゴリ フォーム…