
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
ITコラム
2017.01.11
HTML5より前は、要素をブロック要素、インライン要素、その他などと分類して、インライン要素の中にブロック要素は置かない等のルールがありましたが、HTML5ではブロック要素やインライン要素という考え方が無くなり、各要素はおおよそ7つのカテゴリに分類されるようになりました。
今回は、そのカテゴリについてまとめたいと思います。
HTML要素のカテゴリは7つあります。
メタデータ・コンテンツ Metadata content
HTMLの情報や、外部ファイル読み込み、CSSやスクリプトの指定など、文書情報や別文書との関係などを定義するコンテンツです。
このカテゴリに属する要素
<base>
<link>
<meta>
<noscript>
<script>
<style>
<template>
<title>
フロー・コンテンツ Flow content
文書の本体に現れる一般的なコンテンツで、ほとんどの要素がこのコンテンツに含まれます。フローコンテンツ + カテゴリに属さない要素(sectioning rootsの一部を含む) + メタデータ・コンテンツの一部ですべての要素になります。
このカテゴリに属する要素
<a> <abbr> <address>
<area>(map要素内にある場合)
<article> <aside> <audio>
<b> <bdi> <bdo>
<blockquote> <br> <button>
<canvas> <cite> <code>
<data> <datalist> <del>
<details> <dfn> <div>
<dl> <em> <embed>
<fieldset> <figure> <footer>
<form> <h1>-<h6> <header>
<hr> <i> <iframe> <img>
<input> <ins> <kbd> <keygen>
<label> <main> <map> <mark>
<menu> <meter> <nav> <noscript>
<object> <ol> <output> <p>
<picture> <pre> <progress> <q>
<ruby> <s> <samp> <script>
<section> <select> <small> <span>
<strong> <sub> <sup> <table>
<template> <textarea> <time> <u>
<ul> <var> <video> <wbr> テキスト
ヘディング・コンテンツ Heading content
見出し(ヘディング)と、それをまとめるコンテンツです。
このカテゴリに属する要素
<h1> ~ <h6>
セクショニング・コンテンツ Sectioning content
見出しとその内容(セクション)をまとめるコンテンツです。
このカテゴリに属する要素
<article>
<aside>
<nav>
<section>
フレージング・コンテンツ Phrasing content
段落内で使用するような、テキスト(フレーズ)に関わるコンテンツです。
このカテゴリに属する要素
<a> <abbr> <area>(map要素内にある場合)
<audio> <b> <bdi> <bdo>
<br> <button> <canvas> <cite>
<code> <data> <datalist> <del>
<dfn> <em> <embed> <i>
<iframe> <img> <input> <ins>
<kbd> <keygen> <label> <map>
<mark> <meter> <noscript> <object>
<output> <picture> <progress> <q>
<ruby> <s> <samp> <script>
<select> <small> <span> <strong>
<sub> <sup> <template> <textarea>
<time> <u> <var> <video>
<wbr> テキスト
エンベッディド・コンテンツ Embedded content
文書内に埋め込みを行うコンテンツです。画像、音、ビデオ、他のHTMLなどを読み込みます。
このカテゴリに属する要素
<audio>
<canvas>
<embed>
<iframe>
<img>
<object>
<picture>
<video>
インタラクティブ・コンテンツ Interactive content
ユーザーが操作可能なコンテンツです。クリックやキーボード操作で変化するコンテンツのためのものです。
このカテゴリに属する要素
<a> (HTML 5.1ではhref属性がある場合に限る)
<audio> (controls属性がある場合)
<button>
<details>
<embed>
<iframe>
<img> (usemap属性がある場合)
<input> (type=”hidden”の場合は除く)
<keygen>
<label>
<object> (usemap属性がある場合)
<select>
<textarea>
<video> (controls属性がある場合)
また、上の7つとは別に「セクショニング・ルート」という特別な要素があります。
セクショニング・ルート(Sectioning roots)とは、自分の中に独立したセクションを持つことができる要素のことです。自分がセクションのルートになれる要素です。
各カテゴリは、下の図のように関連しています。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.