HTML5認定試験を目指してみる(その1)


HTML5プロフェッショナル認定試験レベル1の学習を始めていきます。

これまでのHTMLと少し変わって色々標準化されたので、学ぶ価値はありかな。

とりあえず、基礎中の基礎が
Chapter1 HTMLの基礎知識
に書かれてます。

「こんなの簡単簡単ー」って言いながらChapter1を読んで、問題をやってみたら意外と細かい。そんなこと聞かれちゃうのね、って思いながら、まとめてみます。

<!DOCTYPE html>
<html lang="jp">
<head>
<title>文書タイトル</title>
</head>
<body>
ここに本分<br>
二行目
</body>
</html>

これが、基本的なフレームワーク。

最初の<!DOCTYPE html>は、過去の遺産とかは無視して、ちゃんとしたHTML文書だよという宣言です。この宣言は、全部大文字でもいいし、全部小文字でもいいみたいです。というか、HTMLは、大文字と小文字を区別しないと覚えておけば、細かい問題が出ても対応できるはず。

<html lang=”jp”>は、HTML文書の始まりを表していて、</html>までがその範囲になります。一般的にHTMLでは、<xxx></xxx>という要素の組み合わせで囲んで記述していきますが、ものによっては、開始タグ<xxx>や終止タグ</xxx>が省略できる要素もあります。html要素なんかは、開始も終止も書かなくていいですが、省略はしないほうが、分かりやすくていいと思います。

逆に、空要素というのも存在します。例えば、<br>なんかは、それ自体で改行を表していて、終止タグを書いては行けなかったりします。

<br>             <!-- OK  -->
<br />           <!-- OK -->
<br/ >           <!-- NG -->
<br></br>    <!-- NG -->

こんな感じで、空要素は書きます。ここで、<!– OK –>と書きましたが、<!–  –>は、コメントを表しています。コメントは、

・連続したハイフン(--)は使えない
・>または->で始まるコメントは使えない
・-で終わるコメントは使えない

というルールがあります。

ところで、<html>のhtmlや<br>のbrを要素と言いましたが、上の例で<html lang=”jp”>と書いてあります。このlang=”jp”のlangを属性、”jp”を属性値と呼びます。

属性には、任意の要素に使えるグローバル属性が12種類、WAI-ARIA関連で任意の要素に使える属性が2種類あります。

class, id, lang, title, style, dir, tabindex, accesskey, hidden, translate, spellcheck,contenteditable の12種類と
role, aria-*属性の2種類

詳細は、今後使いながら覚えればいいかなと思います。

とりあえず、今回の例を挙げておきます。
これをテキスト文書に入力して、index.htmlとかの名前で保存してブラウザで開くとそっけないページが開きます。

<!DOCTYPE html>
<html lang="jp">
<head>
<title>HTML5その1</title>
</head>
<body>
<p class="this is a class" id="test">
HTML5その1です。<br />
そっけない文書ですね。<br>
デザインは、後半にCSS3というのがあるので、そこで勉強します
</p>
</body>
</html>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. I do agree with all of the ideas you’ve presented to your post.
    They are really convincing and will certainly work.
    Nonetheless, the posts are very brief for starters.
    May just you please extend them a little from next time?
    Thanks for the post.