H5 セマンティック タグの実際のケース

今回は、H5 セマンティック タグの実践例をお届けします。 H5 セマンティック タグを使用する際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。

ページレイアウトはhtml5要素に基づいています。したがって、始める前に HTML5 要素についてよく理解し、そのセマンティクスがレイアウトに適合するかどうかを確認することが重要です。

HTML5 の構造

HTML5 コードを記述するときは、単に dc6dce4a544fdca2df29d5ac0ea9906b タグを html5 の 2f8332c8dcfd5c7dec030a070bf652c3 タグに置き換えないことが非常に重要です。場合によっては、意味的には

要素が適切な選択となります。たとえば、ラッパーまたはコンテナー div

従来の div 要素を置き換えるために使用できる新しいタグの 1 つは、1aa9e5d373740b65a0cc8f0a02150c53 要素です。 1aa9e5d373740b65a0cc8f0a02150c53 要素には、ページのメイン ナビゲーション メニュー

をラップするために使用される c787b9a589a3ece771e842a6176cf8e9 要素を配置することもできます。アンカーを含む h1 要素はブログのタイトルです。

最初はページのコンテンツを折り返すために 2f8332c8dcfd5c7dec030a070bf652c3 を使用していましたが、いくつかのドキュメントを読んだ後、これは意味的に 100% 正しくないと感じました。引き続き div 要素を選択します。

div 要素内では、各ブログ投稿が独自の Article 要素でラップされます。

一連のブログの下には、ページ分割された 2 つのリンクがあります。通常、ページネーション リンクの重要性は、c787b9a589a3ece771e842a6176cf8e9 (メイン ナビゲーションだけでなく複数の場所で使用できます) 要素

と同等ではありません。ただし、このブログ レイアウトでは、ページネーション リンクがメイン ナビゲーションとして扱われます。

15221ee8cba27fc1d7a26c47a001eb9b 要素が改訂される前は、サイドバーに意味的に固有の要素はありませんでした。ただし、構文の問題を心配することなく、side 要素を安全に使用できるようになりました。

この例では、side 要素に複数のセクション要素が含まれています。サイドバーの下部にシンプルな検索ボックスがあります。これにより、HTML5 フォームのいくつかの新機能にアクセスできるようになります。

そのうちの 1 つはプレースホルダー属性です

レイアウトはフッター要素で終わります。この例では、フッター要素の幅がページ全体に広がるように、フッター要素を div コンテナーの外側に配置する必要があります。

header {
	margin: 0 0 98px 0; 
}
	
	header h1 {
		float: left; font-size: 36px;
		font-weight: normal;
	}
	
	header nav {
		float: right; text-align: right;
		padding: 6px 0 0 0;
	}
		header nav ul {
			list-style: none;
		}
			header nav li {
				float: left; font-size: 18px;
				width: 136px; margin: 0 0 0 20px;
			}
			
			header nav li:nth-child(1):before {
				content: "1. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(2):before {
				content: "2. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(3):before {
				content: "3. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(4):before {
				content: "4. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(5):before {
				content: "5. ";
				color: #a2a2a2;
			}
#sidebar {
width: 292px; float: left;
padding: 4px 0 0 0;
}
#sidebar h3 {
font-size: 18px; font-weight: normal;
margin: 0 0 25px 0;
}
#sidebar ul {
list-style: none;
}
#sidebar section {
margin: 0 0 47px 0;
}
#sidebar #about a.more {
display: block; text-align: right;
}
#sidebar #categories {
width: 136px; float: left; 
margin: 0 20px 0 0;
}
#sidebar #social {
width: 136px; float: left; 
}
#footer-container {
	background: rgba(0,0,0,0.2); 
	overflow: hidden;
}
	footer {
		width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
	}
	footer #credits {
		list-style: none; float: left; 
		}			
		footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}
				
		footer #back-top {
			float: right; font-size: 12px;
		}

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

H5でドラッグアンドドロップエフェクトを作成する方法

H5を使用してカメラを呼び出す方法

H5と互換性のない古いバージョンのブラウザの処理方法についてそしてC3

以上がH5 セマンティック タグの実際のケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。