プロジェクトでのセマンティックHTMLの使用：入門書
開発者として考慮しなければならないことの1つは、Webサイトを利用するためにスクリーンリーダーが必要なユーザーがサイトにアクセスできるようにする方法です。 HTMLは、マークアップでセマンティック要素の使用を提供することにより、その取り組みを支援します。この記事では、Web開発で使用する一般的なセマンティック要素のいくつかについて説明します。
セマンティックHTML
「セマンティックHTML」の意味を説明する場合、「セマンティック」という単語の定義に直接進むことができます。 Merriam-Websterによると、セマンティクスは意味または記号の意味の研究です。したがって、セマンティックHTMLを作成するときは、タグの意味を完全に暗示するHTMLコードを作成します。
セマンティックマークアップを使用して、Webページの構造を標準的な方法で記述できるようにします。これにより、スクリーンリーダーと音声アシスタントがHTML要素をスキャンし、ユーザーが要求した場合に関連情報をユーザーに返すことができます。
セマンティック要素
HTML5仕様が2014年にリリースされたとき、Webページの構造をより適切に示すための追加のセマンティック要素が付属していました。セマンティックタグと見なされるタグの一部を次に示します。
<ヘッダー>
ヘッダーは主に、セクションセマンティックHTML要素として機能するコンテナ要素です。通常、ロゴには が含まれています および それはウェブサイト自体を説明しています。これは通常、サイトのすべてのページで一貫しています。
elementはnavigationelementの略です。それはあなたのサイトの他の部分にユーザーを連れて行くリンクを保持します：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
ナビゲーション要素には、リンク、メニュー、およびサブメニューを含めることができます。ただし、要素に他の を含めることはできません。 要素。上記の例では、 があります ロゴとのプレースホルダーとして機能します アンカー（）要素が含まれています。これらはすべて
<メイン>、<セクション>、 –
<メイン> タグは、最初の 以外のサイトのメインコンテンツを示します 。 を持つことができます 独自の – 要素。
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
見出しタグに関する一般的な経験則では、1つしかありません。 ページに付けられたタイトルと一致するページあたりの要素。また、番号の小さい見出しを使用するまで、番号の大きい見出しを使用することはできません。ただし、番号の大きい見出しから番号の小さい見出しに順不同で移動することはできます。これは基本的に、Webページの構造に従います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
header.main-header {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.logo-container {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
padding: 0px 20px;
}
h1 {
font-size: 1rem;
margin: 0;
padding: 0;
align-self: center;
}
h6 {
text-decoration: line-through;
}
h6.ok {
text-decoration: none;
}
img {
width: 200px;
height: 50px;
}
nav.navigation-links-container {
width: calc(100% - 200px);
display: flex;
justify-content: space-around;
}
nav.navigation-links-container a {
color: black;
text-decoration: none;
}
nav.navigation-links-container a:hover {
color: darkgoldenrod;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="main-header">
<div class="logo-container">
<img src="https://www.placekitten.com/200/50" alt="placeholder-kitty"/>
<h1>Kit Kat Logo</h1>
</div>
<nav class="navigation-links-container">
<a href="about-us.html">About Us</a>
<a href="contact-us.html">Contact Us</a>
<a href="services.html">Services</a>
<a href="login.html">Login/Register</a>
</nav>
</header>
<body>
<main>
<header>
<h2>
I'm an h2 -- Semantic Elements -- Describes purpose of main content
</h2>
</header>
<section>
<header>
<h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content</h3>
</header>
<div>Content and More stuff and things that pertain to h3 </div>
<h4> I'm an h4 -- Even less important heading </h4>
<div>More content that pertains to h4</div>
</section>
<section>
<header>
<h3> We can go back up to h3 even though we used h4</h3>
</header>
<div>More stuff and things that pertain to h3 </div>
<h6>No h6 until h4 and h5</h6>
<h4> This can't be h6, unless h4</h4>
<div>More content that pertains to h4</div>
<h5> and h5 are used first. </h5>
<div>More content that pertains to h5</div>
<h6 class="ok">Now h6 can be used!</h6>
</section>
</main>
<footer>
</footer>
<script src="script.js"></script>
</body>
</html> 見出しタグを順不同で使用することはできますが、そうすることはベストプラクティスではないことに注意してください。適切な階層を持つことで、アクセシビリティが向上します。
結論
セマンティックHTMLの使用には非常に多くの可能性があります。セマンティックHTMLの使用に関するドキュメントは、MDNWebサイトとW3Cサイトにあります。それらの意図を説明する他のタグは、両方のサイトにリストされています。ドキュメントを検索する方法を理解し、HTMLプロセッサがセマンティクスを使用して、必要に応じてユーザーに追加の階層情報を提供することを理解してください。
-
HTMLコンピュータコード要素
Webページにコンピューターコードを表示するために、いくつかの要素がHTMLで提供されています。それらの要素を1つずつ見てみましょう- <!DOCTYPE html> <html> <body> <h2>Shortcut Keys</h2> <p>Use the following shortcut keys −</p> <p><strong>Cut</strong> − <kbd>CTRL</kbd>+<KBD
-
HTMLブロックとインライン要素
ブロック要素 ブロック要素は、前後に改行があるかのように画面に表示されます。それらはまた、利用可能な幅全体を占めます。ブロック要素には、から、、、、<!DOCTYPE html> <html> <body> <h2>Coding Ground</h2> <h3>Compilers for Programming Languages and Web Technologies</h3> <p>Click on the individual links to work on online compile