LogoMark.png

HTML

Hyper Text Markup Language

HTMLHTML/TagsHTML/SampleHTML/Tips

はじめに

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)とは、ウェブ文書を記述するためのマークアップ言語で、文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
 HTMLファイルは、ごく普通のテキストファイル(文字が並んだだけのもの)なので、テキストエディタ(メモ帳のようなもの)で書いて、保存するだけで完成します。

MENU


HTMLの基本構造

ひとつのHTMLファイル、すなわちひとつのWebページは、
おおよそ以下のような構造のソースコードで記述されています。

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset = "UTF-8">
        <title>Sample Page</title>
    </head>

    <body>
        <h1>見出し</h1>
        <p>
                本文
        </p>   
    </body>

</html>


<!DOCTYPE html>

ドキュメントタイプ宣言。標準準拠モード(Standard Mode)のHTML5文書であることを意味します。

<html> ~ </html>

HTML文書の最上位階層(ルート)要素です。ページ全体は<html>に始まって、</html>で終ります。開始タグには上の例のように主要言語を lang 属性で記述します。この情報は音声ツールや翻訳ツール等に利用されます。
 この中に head と body の2つが入りますが、head も body も、かならず一つずつ。また、その隙間に何かを書いてはいけません。

<head> ~ </head>

ページに関する付加情報(メタデータ)を記述する部分です。ページのエンコード、キーワード等を示す meta、ページタイトルを示す title などが入ります。この部分は、デフォルトのスタイルシートで display: none; となっているため、画面上には表示されません。

<body> ~ </body>

ページのコンテンツです。ブラウザに表示されるすべての要素がこの中に記述されます。



タグと属性

開始タグと終了タグ

HTMLの記述では、文章(文字列)要素を「開始タグ」と「終了タグ」で囲むかたちで構造上の地位を与えます。

<要素名>文章</要素名>

参考:HTML5で閉じタグを書かないもの一覧

br,img,hr,meta,input,embed,area,base,col,keygen,link,param,source


属性情報

タグには、属性情報(複数可)を与えることができます。

<要素名 属性名 =値 属性名 =値 ・・>文章</要素名>




グローバル属性

属性はタグによって使えるものが異なりますが、すべての要素に共通に使うことができるグローバル属性というものがあります。以下、主なものです。

id ="名前"

ページ上で唯一の要素にを指す固有名で、CSSのセレクタになります。
id名は、以下のようにしてページ内リンクに使うことができます。

<div id="pageTop"> </div>
       :
<a href="#pageTop">ページの先頭へ</a>


class ="名前"

ページ上で複数の要素に適用できる分類名で、CSSのセレクタになります。半角スペースで区切ることで、複数のclass指定ができるます。

style ="スタイル記述"

CSSを直接書き込む場合に使用 例:<p style="color:red;">文章</p>

title ="表題"

表題や説明フレーズが入ります

lang ="言語コード"

日本語のページであれば、言語コードは ja  例:<html lang="ja">



HTMLタグ

ページを独立させました > HTML/Tags

PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-02-01 (土) 23:10:06