マークアップ言語 - タイトル

マークアップ言語 - タイトル
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックしてください。
前:第1章 リスト<br />原典
標準化されたデザインソリューション - マークアップ言語とスタイルマニュアル
Web 標準ソリューション マークアップとスタイル ハンドブック

パート 1: マークアップを習得する
第2章タイトル
概要:
すべての Web ページにタイトルが必要なだけでなく、正しくマークアップされていれば、Web ページのデザインと使いやすさが大幅に向上します。
見た目の点では、Web ページのタイトルは通常、本文よりも大きなフォント サイズで表示され、色やフォントが異なる場合があります。タイトルの目的は、W3C で説明されているように、「次のセクションで説明するトピックを簡単に説明する」こと、つまり Web ページ内のさまざまな段落の概要を示すことです。
提示したい情報を最も効果的に活用するページ タイトルを作成するにはどうすればよいでしょうか。このセクションでは、タイトル作成の一般的なアプローチをいくつか紹介し、最も役立つアプローチを見つけてから、CSS のヒントとコツを使用して最適なアプローチを改善します。
ドキュメントのタイトルを作成する最適な方法は何ですか?
この質問に答える前に、タイトルをドキュメントの上部に配置すると仮定しましょう。同様の効果を実現する 3 つの方法を見てみましょう。
方法 A: それは意味がありますか?
<span class="heading">とてもクールなページタイトル</span>
<span> タグは状況によっては便利なタグですが、ページ タイトルにはあま​​り意味がありません。この方法を使用する唯一の利点は、見出しクラスに CSS スタイルを指定して、テキストをタイトルのように見せることができることです。
.見出し{
フォントサイズ: 24px;
フォントの太さ: 太字;
色: 青;
}

これで、heading クラスでマークされたすべての見出しが大きくなり、太字になり、青くなります。すばらしいですね。しかし、CSS をサポートしていないブラウザーを使用してこのページにアクセスするとどうなるでしょうか。
たとえば、古いブラウザではサポートされていない外部スタイルシート ファイルに CSS スタイルを配置するとどうなるでしょうか。また、スクリーン リーダーが障害を持つユーザー向けにページを読み上げるとどうなるでしょうか。これらの手段でページにアクセスするユーザーは、見出しと本文の違いを見ることも聞くこともできません。
注釈メソッド class="heading" はタグ コンテンツの意味を少し説明しますが、<span> はほとんどのブラウザーのデフォルトの表示スタイルを変更するだけの汎用コンテナーです。
検索エンジンがこのページをクロールする際、<span> タグは存在しないかのようにスキップされ、そこに含まれるキーワードの重み付けは増加されません。検索エンジンとページ タイトルの関係の詳細については、このセクションの後半で説明します。
最後に、<span> タグはインライン要素であるため、通常はメソッド A のコンテンツを <p> や <div> などの別のブロック レベル コンテナーに配置して、1 行だけを占めるようにする必要があります。これにより、不要なコードが大量に生成されます。必要なコンテナーを追加しても、CSS をサポートしていないブラウザーではテキストが元の形式で表示されるため、ユーザーはタイトルと本文の違いを確認できません。
前のページ1 2 3 4 5 次のページ 続きを読む

<<:  TypeScript 列挙の基本と例

>>:  CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

推薦する

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

Vue パッケージサイズの最適化の実装 (1.72M から 94K)

1. 背景最近、独立した開発者がUIデザインを行うのを支援するために、uideaというWebサイト...

Dockerにelasticsearchとkibanaをインストールする方法

Elasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを知らないと軽蔑...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

MySQL 1130例外、リモートログインできない解決策

目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...

星のフラッシュ効果を実現するjs

この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...

JS の compose 関数と pipe 関数の使い方の詳細な説明

目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...

vue-element-admin プロジェクトのインポートとエクスポートの実装

vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...

Windows に Docker と docker-compose スイートをインストールするための詳細なチュートリアル

目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...

ユーザー名が使用可能かどうかを確認するVueメソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...

初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単

私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

Mysql GTID Mha 設定方法

Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...