検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 の構造とセマンティクス (2): Structure_html5 チュートリアルのスキル


たとえ整形式の HTML ページであっても、構造が不足しているために処理が難しい場合があります。セクションがどのように分割されているかを確認するには、見出しのレベルを分析する必要があります。サイドバー、フッター、ヘッダー、ナビゲーション バー、メイン コンテンツ領域、および個々の記事はすべて、共通の div 要素で表されます。 HTML 5 では、特にこれらの一般的な構造を識別するために、いくつかの新しい要素が追加されています。
· セクション: これは本の章またはセクションであり、実際には HTML 4 で独自のタイトルを持つものであれば何でも
· ヘッダー: head 要素とは別にページに表示されるヘッダー。同じ
· footer: フッター; 電子メールに署名を表示できます
· nav: 他のページへのリンクのセット
· Article: ブログ、雑誌、記事まとめなどの記事。
上部にヘッダー、下部にフッター、いくつかの記事、ナビゲーション領域、サイドバーがある典型的なブログのホームページについて考えてみましょう。典型的なブログ ページのコード 1 を参照してください。


Mokka mit Schlag







"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
サセックス郡に春が来る (そして去っていく)



昨日、私はブルックリンバードクラブに参加して、ニュージャージー州西部への
毎年恒例の旅行、特に比較的最近発見されたホットスポットであるハイパー
腐植土
から始まりました。午前7時30分に現場に到着したときは、気持ちの良い冬の朝でした。
午前10時頃には春になり、


には初夏になりました。



"/blog/birding/2007/04/23/but-does-it-count-for-your-life -list/"> でも、それはあなたの人生リストに含まれますか?


これで href="http: //www.wired.com/science/discoveries/news/ 2007/04/cone_sf">インターネット経由の野鳥観察
。私はまだテストできていません (20 ユーザー
どうやら限界のようです) しかし、これは確かにクールです。
個人的には、これが実際にフィールドに出ている
に少しでも置き換えられるとは想像できません。
一方、私は常に
双眼鏡を安定して持つことができなくなったり、公園に行くことができなくなった先輩野鳥観察者たちに会うのはとても
悲しいことです。
少なくとも 1 人は、これが何らかの興味を持っているのではないかと想像できます。年老いた野鳥観察者は、
あまり外に出られなくなって以来、テレビで大活躍しましたが、これは間違いなく
それを上回ります。











インデントが正しくても、これらのネストされた div は依然として非常に混乱しているように感じられます。 HTML 5 では、これらの要素をセマンティック要素に置き換えることができます。HTML5 で書かれた典型的なブログ ページについては、コード 2 を参照してください。


Mokka mit Schlag



Mokka mit Schlag





"/blog/birding/2007/04 /23/spring-comes-and-goes-in-sussex-county/">
サセックス郡に春が来る (そして去っていく)


昨日、私はブルックリン バード クラブに参加しましたニュージャージー州西部への
毎年恒例の旅行、特に比較的最近発見されたホットスポットであるハイパー
腐植土への旅行
は、私たちが現場
に7時半に到着したときから始まりました。午前10時
頃から春に進み、




"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
でも、それはあなたの人生リストに含まれますか?


href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">インターネット経由で野鳥観察ができるようです。私
はまだテストできていませんが (どうやら 20 ユーザー
制限があるようです)、これは確かに素晴らしいです。
個人的には、これが実際にリリースされる
に代わるとは想像できません。
その一方で、双眼鏡をしっかり持つことができなくなったり、公園に行くことができなくなった先輩野鳥観察者たちに会うのは
いつもとても悲しいことです。
少なくとも一人の年配の野鳥観察者がテレビで大活躍したのに、
もうあまり外出できなくなってしまったのは間違いなく
です。






著作権 2007 Elliotte Rusty Harold




これで div は必要なくなりました。 class 属性を自分で設定する必要はなくなり、各部分の意味は標準の要素名から推測できます。これは、オーディオ ブラウザ、モバイル ブラウザ、その他の非標準ブラウザにとって特に重要です。
(続く)
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
マスタリングマイクロダタ:HTML5のステップバイステップガイドマスタリングマイクロダタ:HTML5のステップバイステップガイドMay 14, 2025 am 12:07 AM

MicrodatainHTML5enhancesSEOanduserexperiencebyprovidingstructureddatatosearchengines.1)Useitemscope,itemtype,anditempropattributestomarkupcontentlikeproductsorevents.2)TestmicrodatawithtoolslikeGoogle'sStructuredDataTestingTool.3)ConsiderusingJSON-LD

HTML5フォームの新しいものは何ですか?新しい入力タイプの調査HTML5フォームの新しいものは何ですか?新しい入力タイプの調査May 13, 2025 pm 03:45 PM

HTML5INTRODUCESNEWINPUTTYPESTENHANCEUSEREXPERIENCE、SIMPRIYIFYDEVELOPMENT、およびIMPROVEACCESSIBILITY.1)自動的にEmailformat.2)FOTIMIZENUMIMERICYPAD.3)およびSimplifyDateAndtimeInputs、reducingEdeDateDateRutedolutution。

H5の理解:意味と重要性H5の理解:意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5:アクセシビリティとWeb標準のコンプライアンスH5:アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1)アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2)ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3)アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか?HTMLのH5タグは何ですか?May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1)H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2)CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3)H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード:Web構造に関する初心者向けガイドH5コード:Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造:読みやすさのためのコンテンツの整理H5コード構造:読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1)コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2)FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3)レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン:比較H5対古いHTMLバージョン:比較May 06, 2025 am 12:09 AM

HTML5(H5)以降のバージョンのHTMLの主な違いには、次のものが含まれます。1)H5はセマンティックタグを導入し、2)マルチメディアコンテンツをサポートし、3)オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境