【HTML5認定試験Level.1】part2 要素②
前回の記事（part1参照）でドットインストールのｅラーニングを行い
簡単なHTMLが書けるようになりましたので今回から本格的に
HTMLの勉強を開始します。
テキストはpart0でも紹介した以下のテキストを使用しています。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版
- 作者: 大藤幹,鈴木雅貴
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/07/26
- メディア: Kindle版
- この商品を含むブログを見る
本記事では勉強の中身というよりはこういう心構えで勉強した方が良いという
勉強のコツとなる部分をメインとして紹介していきます。
HTMLにおける要素って何？
HTMLの基本的な書式は以下の様になります。
<h1>はじめてのHTML</h1>
<h1>の部分を開始タグ、</h1>の部分は終了タグと呼ばれています。
h1は見出しという意味を持つ要素です。
文書をh1のタグで囲むことにより「はじめてのHTML」という文は
「見出し」の文書であると意味づけされます。
下記の例ではa要素を使用しています。
<a href = "https://www.yahoo.co.jp/" target="_blank">yahooへ移動する</a>
a要素はハイパーリンクのような機能を持っています。
クリックすると属性「href」に設定したURLに移動することができます。
このように文書に対して役割や意味、見た目の表示など様々な意味づけを
するのがHTMLにおける要素です。
要素に対して設定可能な属性もありますので要素と属性を覚えないと
問題を解くのは厳しいように感じました。
要素の覚え方について
テキストをざっとみましたが覚えるべき要素がかなり多いです。（100個以上）
英単語がそのまま要素名になっているケースは覚えやすいですが
（body, head ,section , strong など…）
略語になっているものは暗記しづらいです。
（ ol, ul, tr, th, td など…）
覚えるときは元の英文の意味を意識しながら覚えると良いです。
ol (ordered list ) ：番号付きの箇条書きリスト
ul (unOrdered list ) ：番号なしの箇条書きリスト
tr (tableRow) ：テーブルの横一行のセルを設定する
th (tableHead) ：テーブルのヘッダ行のセルを設定する
td(tableData) ：テーブルのセル一個分のデータを設定する
コンテンツモデルについて
HTML5では新しくコンテンツモデルという概念が生まれました。
全ての要素は何らかのコンテンツモデルにカテゴライズされています。
要素を覚える際にはどのコンテンツモデルに属するかも意識しておきましょう。
メタデータ・コンテンツの要素:
base, link, meta, script, noscript, style, title
フロー・コンテンツ
body要素(<body>～</body>)内で記述されるHTML文書のほとんどの要素
セクショニング・コンテンツ
文書のセクション(節や章などのまとまった区分)を表す要素が属します。
ヘッディング・コンテンツ
セクションの見出しとなる要素が属します。
フレージング・コンテンツ
テキストの要素が属します。
エンベッディッド・コンテンツ
画像や動画などの外部ファイルを文書に埋め込む要素が属します。
インタラクティブ・コンテンツ
ユーザーによる操作に対応する要素が属します。
要素が持つ意味について
HTML5認定試験では要素がどのような意味を持つのか
問いかけてくる問題が出題されます。
例. 広告や補足記事などのように文書のメインコンテンツと関連性が薄く、
切り離せるセクションを構成する要素は次のうちどれか。
・aside要素
・footer要素
・article要素
・section要素
・nav要素
正解はaside要素です。
要素を設定することにより見た目や処理がどのように変わるかだけでなく、
どのような意味合いを持っているのかも覚えておく必要があります。
さいごに
要素と属性だけでもかなり覚えることがあり思ったより勉強が進んでいないです…
WEBエンジニアの方はこれだけの物量を暗記しているのかと本当に尊敬します。
以上です！
