Help us understand the problem. What is going on with this article?

HTML5の全構成要素・用語(を目指して)

More than 1 year has passed since last update.

2018.5.7更新に手が回っていません

この記事の動機とか目的はC言語の記事と同様です

現在のメジャーなブラウザが対応してる範囲での話になるつもりです。

<!DOCTYPE html>

DOCTYPE宣言と呼ばれるものの1つで、これを置くとウェブページがHTML4.01とかXHTMLとかではなくHTML5であることをブラウザに教える。それ以外の場所には置かない。今時のウェブページはこれを1つ置いて、次に<html ○○>・・・</html>を置いて、他には何も置かない

sample.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf8">
    <title>内容のないページ</title>
  </head>
  <body>
    <h1>内容のないページ</h1>
    <p>内容がないゾ</p>
  </body>
</html>

タグ

<○○>の形式のものをタグ、HTMLタグと呼ぶ

開始タグ

<○○>(○○は英数字で構成)もしくは<○○ △△="××" □□="◇◇" ...>はこう呼ばれる

属性

タグの中の△△="××"はこう呼ばれる

終了タグ

</○○>はこう呼ばれる

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

lang属性をjaにすることによって日本語のページであることを知らせる

<head>・・・</head>

裏方的な設定を書いておくための部分。<html ○○>・・・</html>の内容は<head>・・・</head>と<body>・・・</body>各1つのみ

<meta charset="utf8">

ウェブページの文字コードがUTF8であることをブラウザに教える

<meta name="description" content="○○">

検索エンジンの検索結果でcontent属性に書いた文字列がページの説明文として考慮される

<title>・・・</title>

内容(テキスト)がブラウザのタブのタイトルとして表示

<body>・・・</body>

ブラウザの表示領域に表示される文書そのものの構造・内容を書く

<p>・・・</p>

bodyタグ内に置き1つの段落であることを表す。見た目の上ではただの長方形領域

<link rel="shortcut icon" href="○○.ico">

href(エイチレフ)属性に書いた相対・絶対アドレスで示されるアイコンファイルをファビコンにする。これに限らずlinkタグは全てheadタグ内に置く

<link rel="stylesheet" href="○○.css">

href属性に書いた相対・絶対アドレスのCSSファイルを読み込んでそれに書いてあるスタイルをページに適用する

<style>・・・</style>

head要素内に置く。中にCSSを書くとそのページ専用のスタイルとして適用される

<!-- ・・・ -->

・・・に何を(-->以外)書いてもブラウザの動作上影響がない、つまりコメント

グローバル属性

どの要素にもつけることができる属性

id="・・・"

グローバル属性でタグにIDを与える。同じページに同じIDをもつ要素が複数存在することはできない。CSSやJavaScriptで使う。また例えばindex.html#messageというURLにアクセスするとindex.htmlでmessageというIDをもつタグにあたる位置までスクロールされる

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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