SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マンガで分かるプログラミング用語辞典

「HTML5」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(133)

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

解説

 「HTML5」は、HTML(HyperText Markup Language)の改訂第5版です。2014年10月28日に勧告されました。多くの面で改訂されており、時代の要請に合わせて、さまざまな機能が追加されています。

 HTML5では、古いHTMLを整理して、人間からもコンピューターからも、読みやすく、理解しやすいように構造を記述できるようになっています。また、この変化に伴い、見た目を記述するタグの多くが廃止予定になりました。見た目はCSSを利用して記述します。

文書構造を示すタグの追加
  • <header>
  • <nav>
  • <section>
  • <article>
  • <footer>、など
見た目を表すタグを中心に廃止予定に
  • <center>
  • <font>
  • <strike>
  • <big>、など

 また、HTML5では、Webアプリケーションを作るのに有用な各種機能が導入されています。

  • マルチメディア対応
  • 動画や音声データの利用
  • グラフやゲームに使える2Dや3Dの描画処理
  • さまざまなAPIの追加
  • ドラッグ&ドロップ機能
  • ローカルファイルの読み込み
  • 大きなデータを保持するウェブストレージ
  • 各種通信
  • マイクやカメラ、位置情報などデバイスへのアクセス
  • 別プロセスで処理を行うWeb Workers
  • フォーム機能の強化、など

 HTML5のファイルは、古いHTMLとは違い、「<!DOCTYPE html>」で始まります。

サンプル

 HTML5のサンプルを掲載します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5サンプル</title>
    </head>
    <body>
        <header>
            <h1>HTML5サンプル</h1>
        </header>

        <nav>
            <ul>
                <li><a href="#article1">記事1</a></li>
                <li><a href="#article2">記事2</a></li>
                <li><a href="#article3">記事3</a></li>
            </ul>
        </nav>

        <article id="article1">
            <section>
                <h2>記事1</h2>
                <p>ここは記事1です。</p>
            </section>

            <section>
                <h3>記事1-1</h3>
                <p>ここは記事1-1です。</p>
            </section>

            <section>
                <h3>記事1-2</h3>
                <p>ここは記事1-2です。</p>
            </section>
        </article>

        <article id="article2">
            <section>
                <h2>記事2</h2>
                <p>ここは記事2です。</p>
            </section>
        </article>

        <article id="article3">
            <section>
                <h2>記事3</h2>
                <p>ここは記事3です。</p>
            </section>
        </article>

        <footer>
            (c) 2018 hoge hoge
        </footer>
    </body>
</html>
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10825 2018/06/12 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング