本テストは、Web開発エンジニア採用や社内研修向けにHTML5の基本操作・構造、フォーム、セマンティック要素、SEO関連知識を確認するために作成されました。全20問、4択形式で、基礎知識の理解度を測ります。
このテストは、Web開発に携わるエンジニアがHTML5の基本構造、フォーム操作、セマンティック要素、およびSEOに関する知識と実務的なスキルを確認するために作成された知識確認テストです。HTML5は、従来のHTMLに比べ多くの新要素や属性が導入され、より意味的かつ効率的なマークアップを実現しています。本テストは、エンジニアとしての基本力を養い、実際のWebサイト制作や運用において正しいHTML5の運用ができるかを評価することを目的としています。
テスト内容は以下の通りです：
【HTML文書の基本構造】
・DOCTYPE宣言の役割とHTML5への適用
・、
、タグの役割の理解
【ヘッダー部およびメタ情報】
・
による文字エンコーディング設定
・
、<link>、<script>タグの基本的な使用方法<br />
<br />
【フォーム関連要素】<br />
・新たに追加された<input>要素のtype属性（email、date、range、number等）の活用<br />
・required、pattern、placeholder属性の役割と使い方<br />
・<datalist>、<fieldset>、<legend>、<label>の適切な利用方法<br />
<br />
【セマンティック要素の活用】<br />
・<article>、<section>、<aside>、<nav>、<header>、<footer>などの構造的な使い方<br />
・<figure>と<figcaption>による画像や図表の意味付け<br />
・<time>、<mark>、<progress>、<meter>など新要素の利用シーン<br />
<br />
【HTMLとSEOの連携】<br />
・meta descriptionやmeta robotsの役割、見出しタグ（h1～h6）の適切な利用<br />
・rel="canonical"、nofollow、noopener、noreferrer属性の意義と使い分け</p>
</div>
<div class="list-box">
<dl>
<dt><span>対象職種</span></dt>
<dd>エンジニア</dd>
</dl>
<dl>
<dt><span>問題形式</span></dt>
<dd>選択式</dd>
</dl>
<dl>
<dt><span>問題数</span></dt>
<dd>全20問</dd>
</dl>
<dl>
<dt><span>制限時間</span></dt>
<dd>30分</dd>
</dl>
<dl>
<dt><span>タグ</span></dt>
<dd><a href="https://rakutesu.com/test-list/it-internet-services/">#IT・インターネットサービス</a></dd>
</dl>
</div>
</div>
<!-- Test Sample -->
<div class="test-sample-cont">
<div class="wrapper">
<div class="header">
<h2 class="wb-tag">テスト問題プレビュー</h2>
</div>
<div class="basic-info__cont">
<h3 class="heading--question"><p>HTML5の基本知識に関しての問題です。</p><p>正しいものを選んでください。</p></h3>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">1.</span>
<span class="text">
<!DOCTYPE html> はHTML5文書においてどのような役割を果たしますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[0]" value="">
<span class="test__radio__text">HTML文書の型宣言として、ブラウザにHTML5を使用していることを伝える</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[0]" value="">
<span class="test__radio__text">HTML要素の閉じタグを省略するための指示</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[0]" value="">
<span class="test__radio__text">スタイルシートをリンクするための宣言</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[0]" value="">
<span class="test__radio__text">JavaScriptの実行環境を指定するための宣言</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">2.</span>
<span class="text">
<html>、<head>、<body> タグはそれぞれどのような役割を持っていますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[1]" value="">
<span class="test__radio__text">すべての要素をグループ化するための汎用タグ</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[1]" value="">
<span class="test__radio__text"><html>は文書全体を、<head>はメタ情報を、<body>は内容を定義する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[1]" value="">
<span class="test__radio__text">HTML5専用の新しいレイアウト要素</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[1]" value="">
<span class="test__radio__text">JavaScriptで操作するための特別なセクション</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">3.</span>
<span class="text">
<meta charset='UTF-8'> タグの目的は何ですか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[2]" value="">
<span class="test__radio__text">ページのスタイルシートを定義する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[2]" value="">
<span class="test__radio__text">ページのタイトルを設定する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[2]" value="">
<span class="test__radio__text">文字エンコーディングをUTF-8に設定する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[2]" value="">
<span class="test__radio__text">JavaScriptのバージョンを指定する</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">4.</span>
<span class="text">
<title> タグはHTML文書においてどのような役割を果たしますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[3]" value="">
<span class="test__radio__text">スタイルを適用するための設定</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[3]" value="">
<span class="test__radio__text">画像の代替テキストを定義する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[3]" value="">
<span class="test__radio__text">外部リソースへのリンクを提供する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[3]" value="">
<span class="test__radio__text">ブラウザタブや検索結果に表示される文書のタイトルを定義する</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">5.</span>
<span class="text">
<link> タグの主な用途は何ですか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[4]" value="">
<span class="test__radio__text">外部のスタイルシートやリソースと文書を関連付ける</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[4]" value="">
<span class="test__radio__text">ページ内にJavaScriptを埋め込む</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[4]" value="">
<span class="test__radio__text">画像を表示するためのタグ</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[4]" value="">
<span class="test__radio__text">フォームの入力フィールドを作成する</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">6.</span>
<span class="text">
<script> タグはHTML文書においてどのような役割を果たしますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[5]" value="">
<span class="test__radio__text">文書の構造を定義する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[5]" value="">
<span class="test__radio__text">外部スタイルシートを読み込む</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[5]" value="">
<span class="test__radio__text">JavaScriptコードを埋め込みまたは外部から読み込む</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[5]" value="">
<span class="test__radio__text">メタ情報を設定する</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">7.</span>
<span class="text">
<input>要素のtype属性 'email' はどのような目的で使用されますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[6]" value="">
<span class="test__radio__text">パスワード入力用の暗号化されたフィールド</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[6]" value="">
<span class="test__radio__text">電子メールアドレスの入力形式を検証する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[6]" value="">
<span class="test__radio__text">日付入力専用のカレンダーを表示する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[6]" value="">
<span class="test__radio__text">数値入力のみを許可する</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">8.</span>
<span class="text">
<input>要素のtype属性 'date' の機能は何ですか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[7]" value="">
<span class="test__radio__text">日付入力のためのUIを提供する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[7]" value="">
<span class="test__radio__text">時間入力のための専用フィールドを表示する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[7]" value="">
<span class="test__radio__text">テキスト入力を数値に変換する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[7]" value="">
<span class="test__radio__text">電子メールアドレスの検証を行う</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">9.</span>
<span class="text">
HTML5のフォーム要素において、required, pattern, placeholder 属性はそれぞれ何を制御しますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[8]" value="">
<span class="test__radio__text">requiredは入力補完、patternは文字列の自動変換、placeholderは値の初期化</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[8]" value="">
<span class="test__radio__text">requiredは値のフォーマット、patternは値の必須性、placeholderはエラーメッセージ表示</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[8]" value="">
<span class="test__radio__text">requiredはCSSスタイルの適用、patternは正規表現の定義、placeholderは入力ヒントの無効化</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[8]" value="">
<span class="test__radio__text">requiredは必須入力、patternは入力値のパターン検証、placeholderは入力ヒントの表示</span>
</label>
</span>
</div>
</div>
<div class="test__item">
<h3 class="test__title--question">
<span class="num">10.</span>
<span class="text">
<datalist> 要素はHTML5においてどのような用途で利用されますか？ </span>
</h3>
<div class="test--detail">
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[9]" value="">
<span class="test__radio__text">フォームのグループ化とラベリング</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[9]" value="">
<span class="test__radio__text">データベースとの接続を行う</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[9]" value="">
<span class="test__radio__text">入力候補のリストを提供し、ユーザーの入力を補助する</span>
</label>
</span>
<span class="test__custom-radio">
<label class="test__custom-radio">
<input type="radio" name="choice[9]" value="">
<span class="test__radio__text">画像のキャプションを表示する</span>
</label>
</span>
</div>
</div>
</div>
</div>
<!-- /Test Sample -->
</div>
</article>
</section>
<!-- CTA -->
<div class="cta-cont">
<div class="wrapper">
<div class="cta-row">
<div class="left-box">
<h3>無料登録をすると、<br>この問題を無料でご利用いただけます！</h3>
<div class="form-block">
<form action="https://rakutesu.com/form" method="get">
<input type="email" name="email" placeholder="メールアドレス入力">
<input type="submit" value="無料で始める">
</form>
</div>
<p>
<a href="https://www.siteengine.co.jp/privacy/" target="_blank">プライバシーポリシー</a>・<a href="https://rakutesu.com/terms/" target="_blank">利用規約</a>にご同意の上送信してください
</p>
</div>
<div class="right-box">
<figure>
<img src="https://rakutesu.com/wp-content/themes/businesspress/images/common/cta.png" alt="ラクテス無料登録">
</figure>
</div>
</div>
</div>
</div>
<!-- /CTA -->
<section id="test-maker">
<article class="wrapper">
<h3 class="subtitle-blue">問題作成者紹介</h3>
<div class="test-maker-row">
<div class="test-maker-text">
<p><b>ラクテス編集部</b></p>
<p>ラクテスはクラウド上で簡単にテスト作成・実施ができるサービスです。</p>
</div>
<figure class="test-maker-image">
<img src="https://rakutesu.com/profile/1681095166_logo_blue (1).png" alt="">
</figure>
</div>
</article>
</section>
<!-- Related -->
<section id="test-list" class="related exam-same-category mb-5">
<article class="container">
<h2>
<img src="https://rakutesu.com/wp-content/themes/businesspress/images/test-list/icon-it.svg" alt="ソフトウエア・インターネット・通信">
<span class="test-list__title">IT・インターネットサービスに関連するテスト</span>
</h2>
<div class="test-list-row row">
<div style="display: grid">
<div class="slick-list-1 exam-same-category-slider ">
<!-- Item -->
<div class="test-list-item" id="slick-slider">
<a href="https://rakutesu.com/test-list/it/913/">
<div class="inner">
<h3 class="question-title">エンジニア採用担当者必見！Nuxt.js基礎知識チェックテスト</h3>
<div class="question-desc">
<p style="word-break: break-word;">本テストは、Nuxt.jsを用いたフロントエンド開発に必要な基本知識を確認するために作成されたチェックテストです。採用候補者および社内研修対象者を対象としており、実務に即した内容で構成されています。</p>
</div>
<ul class="info">
<li class="time">30分</li>
</ul>
<div class="btn">
<p>テスト詳細</p>
</div>
</div>
</a>
</div>
<!-- /Item -->
<!-- Item -->
<div class="test-list-item" id="slick-slider">
<a href="https://rakutesu.com/test-list/it/909/">
<div class="inner">
<h3 class="question-title">エンジニア採用担当者必見！jQuery基礎知識チェックテスト</h3>
<div class="question-desc">
<p style="word-break: break-word;">本テストは、エンジニア採用および社内研修対象者向けに作成されたjQueryの基礎知識を確認する問題集です。20問の選択式問題により、基本構文、セレクタ、DOM操作、Ajax、プラグイン利用など、幅広い知識を評価します。</p>
</div>
<ul class="info">
<li class="time">30分</li>
</ul>
<div class="btn">
<p>テスト詳細</p>
</div>
</div>
</a>
</div>
<!-- /Item -->
<!-- Item -->
<div class="test-list-item" id="slick-slider">
<a href="https://rakutesu.com/test-list/it/758/">
<div class="inner">
<h3 class="question-title">オンラインゲーム運営の基礎知識チェックテスト</h3>
<div class="question-desc">
<p style="word-break: break-word;">このテストは、オンラインゲームの運営に関する知識を確認するための20問の選択問題です。<br />
オンラインゲーム業界の初心者から中級者向けに、日本オンラインゲーム協会（JOGA）が定めるガイドラインの内容を中心に、オンラインゲーム運営の基本的な概念と規制を幅広く網羅しています。<br />
オンラインゲーム業界で働く方や、これから携わろうとする方に向けて、オンラインゲーム運営の基礎的な内容について理解しているかをチェックできます。</p>
</div>
<ul class="info">
<li class="time">30分</li>
</ul>
<div class="btn">
<p>テスト詳細</p>
</div>
</div>
</a>
</div>
<!-- /Item -->
<!-- Item -->
<div class="test-list-item" id="slick-slider">
<a href="https://rakutesu.com/test-list/it/703/">
<div class="inner">
<h3 class="question-title">SQLiteの基礎知識チェックテスト</h3>
<div class="question-desc">
<p style="word-break: break-word;">このテストはSQLiteの基礎知識を備えているかを測るためのテストです。SQLiteの基礎概念や開発手法について、IT業界で働く上で基礎的かつ重要となる内容を設問としています。転職希望者のスクリーニング等にご活用いただけます。<br />
<br />
問題数：20問<br />
制限時間：30分</p>
</div>
<ul class="info">
<li class="time">30分</li>
</ul>
<div class="btn">
<p>テスト詳細</p>
</div>
</div>
</a>
</div>
<!-- /Item -->
</div>
</div>
</div>
</article>
</section>
<!-- /Related -->
</main>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>-->
<!-- Free Signup Form -->
<div class="free-signup-form__new">
<div class="home-hero-form">
<p class="free-signup-form__new-title">今すぐ<span class="free-signup-form__new-title_color-change">無料</span>でお試し</p>
<div class="form-block">
<form action="https://rakutesu.com/form" method="get">
<input type="email" name="email" placeholder="メールアドレス入力">
<input type="submit" value="無料で始める">
</form>
<p class="free-signup-form__new-privacy">
<a href="https://www.siteengine.co.jp/privacy/" target="_blank">プライバシーポリシー</a>
・<a href="https://rakutesu.com/terms/" target="_blank">利用規約</a>にご同意の上送信してください
</p>
</div>
</div>
</div>
</div><!-- #content -->
<!-- Footer -->
<footer id="site-footer">
<div class="wrapper">
<!-- 一般的なフッターコンテンツ -->
<div class="ft-row">
<div class="ft-info">
<div class="site-logo">
<a href="/">
<img src="https://rakutesu.com/wp-content/themes/businesspress/images/common/logo.svg" alt="入社試験問題の作成と実施をクラウドで簡単に | ラクテス">
</a>
</div>
<p>〒158-0094<br>東京都世田谷区玉川三丁目20番2号 <br class="pc-none">マノア玉川第3ビル501</p>
<div class="footer-privacy_new">
<img src="https://rakutesu.com/wp-content/themes/businesspress/images/common/ISMS_v2.png" alt="ISMS">
</div>
</div>
<div class="ft-subnav">
<ul>
<li>
<a href=" https://rakutesu.com/about/">私たちについて</a>
</li>
<li>
<a href="https://rakutesu.com/test-list/">テスト一覧</a>
</li>
<li>
<a href="https://rakutesu.com/#ask">テスト制作依頼はこちら</a>
</li>
<li>
<a href="https://rakutesu.com/#price">料金プラン</a>
</li>
<li>
<a href="https://rakutesu.com/column/">ブログ</a>
</li>
</ul>
<ul class="footer-link_privacy">
<li>
<a href="https://rakutesu.com/privacy/">プライバシーポリシー</a>
</li>
<li>
<a href="https://rakutesu.com/security/">情報セキュリティ基本方針</a>
</li>
<li>
<a href="https://rakutesu.com/agency/">代理店・販売パートナー募集</a>
</li>
<li>
<a href="https://rakutesu.com/system-partner/">システム連携パートナー募集</a>
</li>
<li>
<a href="https://rakutesu.com/request-sample/">サンプルテストのリクエスト募集中</a>
</li>
</ul>
</div>
</div>
<div class="copy">Copyright © <script>document.write(new Date().getFullYear());</script> SiteEngine Inc. All Rights Reserved.</div>
</div>
</footer>
<!-- Scroll to Top -->
<div class="page-top">page top</div>
</div><!-- #page -->
<script type='text/javascript' id='leadin-script-loader-js-js-extra'>
/* <![CDATA[ */
var leadin_wordpress = {"userRole":"visitor","pageType":"page","leadinPluginVersion":"11.1.11"};
/* ]]> */
</script>
<script type='text/javascript' src='https://js.hs-scripts.com/7102364.js?integration=WordPress&ver=11.1.11' async defer id='hs-script-loader'></script>
<script type='text/javascript' id='toc-front-js-extra'>
/* <![CDATA[ */
var tocplus = {"visibility_show":"\u8868\u793a","visibility_hide":"\u975e\u8868\u793a","width":"100%"};
/* ]]> */
</script>
<script type='text/javascript' src='https://rakutesu.com/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2309' id='toc-front-js'></script>
<script type='text/javascript' src='https://rakutesu.com/wp-content/themes/businesspress/js/jquery.fitvids.js?ver=1.1' id='fitvids-js'></script>
<script type='text/javascript' src='https://rakutesu.com/wp-content/themes/businesspress/js/functions.js?ver=20180907' id='businesspress-functions-js'></script>
<script type='text/javascript' id='businesspress-navigation-js-extra'>
/* <![CDATA[ */
var businesspressScreenReaderText = {"expand":"\u5b50\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u304f","collapse":"\u5b50\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b"};
/* ]]> */
</script>
<script type='text/javascript' src='https://rakutesu.com/wp-content/themes/businesspress/js/navigation.js?ver=1.0.0' id='businesspress-navigation-js'></script>
<script type='text/javascript' src='https://rakutesu.com/wp-content/themes/businesspress/js/skip-link-focus-fix.js?ver=20160525' id='businesspress-skip-link-focus-fix-js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=default&ver=1.3.13' id='mathjax-js'></script>
</body>
</html>
