セマンティック HTML タグの紹介

セマンティック HTML タグの紹介
ここ数年、ウェブサイト開発では DIV+CSS が非常に人気があり、当時は大きな騒動を引き起こしました。しかしその後、純粋な DIV + CSS はフロントエンド開発のプログラマーによって放棄され、「セマンティック タグ付け」という用語が登場しました。
それで、この言葉はどういう意味でしょうか?以下は百度百科事典からの抜粋です。
HTML タグのセマンティクス: HTML タグの意味
まず、セマンティクスとデフォルトスタイルの違いについてお話ししましょう。デフォルトスタイルとは、ブラウザが設定するいくつかの共通タグの表現方法です。タグ(マークアップ)と属性(アトリビュート)の目的と機能を誰もが直感的に理解できるようにすることが主な目的だと思います。明らかに、Hxシリーズは太字でフォントサイズが大きいため、タイトルのように見えます。は、他の文字と区別し、強調するために使用されます。リストとテーブルについては、それが何をするのかは明らかです。
では、この一節をどうしたらよく理解できるのでしょうか?実際、この段落は、必要なタグは何でも使用し、意図的に DIV レイアウトを使用しないことを示しています。たとえば、太字などを追加したい場合は、直接使用でき、レンダリングにクラスを使用する必要はありません。より自然に。たとえば、ページ内でテーブルレイアウトを適切に使用することもできます。テーブルは SEO に良くないと言ったのは誰ですか? Baidu でもテーブルが使用されています。したがって、より便利な方、より明確な構造を持つ方を使用してください。 DIV + CSS レイアウトという用語を削除します。

<<:  nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法

>>:  ウェブデザイン実践者必読のキャリアプラン

推薦する

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

html-webpack-plugin' を使用してメモリ内に HTML ページ プラグインを生成します。

webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...

ウェブマスターが注目すべき、ウェブサイトのユーザビリティを向上させる 9 つのコード最適化のヒント

1. ロゴに代替テキストを追加するこれには 2 つの利点があります。スクリーン リーダーがロゴ画像の...

JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...

MySQL の遅いクエリの例

導入スロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメントを記録で...

Vueは開始時間と終了時間の範囲クエリを実装します

この記事では、Vueで開始時間と終了時間の範囲を照会する方法を参考までに紹介します。具体的な内容は次...

クラウド決済を実装するWeChatミニプログラムについて

目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...

数十億のデータに対するMySQLページングの最適化に関する簡単な説明

目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...

HTML チュートリアル: DOCTYPE の省略形

HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...

Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする

ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...

ROS2のインストールとdocker環境の使い方について

目次Docker を使用する理由は何ですか? DockerのインストールROSイメージを取得するRO...

ノード スキャフォールディングを使用してトークン検証を実装するサーバーを構築する方法

コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...

Mac で docker と kubectl の自動補完コマンドを追加する方法

kubectl の紹介kubectl は、k8s クラスターを操作するためのコマンドライン ツールで...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...