Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【HTML】HTMLの基本

こちらの記事は以下の書籍を参考に執筆しました

大文字と小文字の区別をしない

HTMLは大文字と小文字の区別をしません。
<title>でも<TITLE>でも同じです。
しかしHTMLを拡張したXHMLでは小文字しか利用できません。
そのため全て小文字で統一することが一般です。

空白文字の扱い

  • 半角スペース
  • タブ
  • 改行(CR,LF)
  • 改ページ(FF)

以上の4つを空白文字といいます。
しかし全角スペースは文字として扱われます。

HTMLでは空白文字は以下のように扱われます。

  • 複数の空白文字が連続して並んでいる場合、それら全体を1つのゼナックスペースとして表示
  • ブロックレベル要素(p要素、h1〜h6要素、body要素等)の開始タブと終了タグの前後の空白文字は無視

要素の属性

属性を付与することで要素に付加的な情報を追加できます。

<meta charset="UTF-8">

charsetを属性名"UFT-8"の部分を属性値といいます。
classidlangなどすべての要素に属性を適用できるもののことをグローバル属性といいます。

属性値は"もしくは'で囲みます。
ただし属性値が英数字(0−9)、ハイフン(-)、ピリオド(.)、アンダースコア(_)、コロン(:)のみを含む場合は、"などの引用符を省略できます。

<img str="" width="460px">
<img str="" width='460px'>
<img str="" width=460p">

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

要素の親子関係

<body>
  <p>webページ</p>
</body>

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

上の例ではbody要素は親要素、p要素は子要素といいます。
html要素の子要素はbody要素であり、html要素の子孫要素はp要素、p要素の祖先要素はhtml要素です。

HTML文書の構成

文書型宣言

HTML文書の冒頭に<!DOCTYPE html>と書きます。大文字と小文字を区別しません。
これを書かないと互換モードになり、CSSに対応していない古いブラウザの動作を擬似的に再現することになります。
必ず書いておきましょう。

html要素

html要素のlang要素を指定することで、ページで使用する言語を指定することができます。
例えば以下の例はこのページで使用する言語が日本語であることを指定しています。

<html lang="ja">
...
</html>

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

lang属性の指定は必須ではないですが、検索園辞任で言語を特定したり、自動翻訳の際に使われるので合ったほうがいいでしょう。

head要素

Webページのメタ情報を記述します。
メタ情報とは

  • タイトル
  • 作成日
  • 注釈

など、データに関する付加情報のことです。

meta要素

headに記述し、一般的なメタ情報を表します。

属性名 説明
charset 文字-コードを指定
content name要素もしくはhttp-equivと一緒に使い、メタデータのプロパティ値を指定
http-equiv HTTPヘッダ用のプロパティ名を指定。content-language,content-type,default-style,refresh等の4つのキーワードのが指定でき、content属性で値を指定する。
name メタデータのプロパティ値を指定。auther,keywords,descriptionなどの値を指定し、content属性で値を指定。

これにより以下のようなメタ情報を指定できます。

Webページ軒ワードが「IT」と「IoT」であることを指定する。
<meta name="keywords" content="IT,IoT">

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

Webページの概要が「qiitaのページです。」であることを指定する。この概要が検索エンジンで検索した時にWebページの説明として表示される。
<meta name="description" content="qiitaのページです。">

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

10秒後にhttp://www.example.comへリダイレクトするようにWebブラウザに指定する。
<meta http-equiv="refresh" content="10; URL=http://www.example.com">

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

検索エンジンに対してURLをインデックスしないように(noindex)、また文書内のリンクを辿らないように(nofollow)指定する。
<meta name="robots" content="noindex,nofollow">

出典:現場で使える最低限の知識がしっかりと身につく HTML/CSSデザインTextBook

以前はSEO対策としてkeywordsの指定が行われていました。
しかし現在は検索エンジンGoogle、Bingがkeywordsをサポートしていないため、SEO対策としては役に立ちません。

よく使う要素

p要素

pは段落を表す要素です。
文章を表すのに持っtも基本的な要素です。

見出し[H1~h6]

文章全体をセクションに分けて書くとわかりやすくなります。セクションとは本でいうと、章や節などのことで文章の中で内容としてまとまった1つの語りのことです。

セクションの始まりは見出しを使用します。
見出しは番号が大きくなるにつれて内側のセクションの見出しを表します。

img要素

画像を挿入する要素です。
挿入できるファイルはJPEG,PNG,GIFファイルです。

alt属性

何らかの原因で画像が表示できない場合に表示される代替えの文字列です。

箇条書き[ul, ol, li]

要素 説明
ul マーカー付き箇条書き
ol 番号がついた箇条書き
li 箇条書きの各項目を記述

ol要素にはstart属性とreversed属性を指定できます。
start属性は指定した番号から箇条書きし始めます。
reversed属性を指定すると番号の並びが大基準になります。

ヘッダ・フッタ[header, footer]

|要素名|説明|
|header|Webページやセクションの概要を理解するのに役立つ内容を入れる(見出し、セクションの目次、検索フォーム、セクションに関するロゴマーク等)|
|footer|作者についての情報、関連ページへのリンク、著作権情報などを入れる。|

文字参照

フッタにコピーライトマーク©を表すには&copy;で表現できます。
このようなHTMLでは直接記述できない文字や記号を表す文字列を文字参照といいます。

数値文字参照文字実体参照の2つがあり、&copy;は文字実体参照です。

Webページの主要部分[main]

Webページの主要部分でHTML文書に1つ入れる頃ができます。

div

要素をグループ化する要素です。
div要素自体に特別な諱なく、純粋にいくつかの要素のコンテナとして使われます。

yktk435
ラズパイ、IoT、chrome拡張機能開発などなど
http://hrplace.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away