経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素

ナビゲーションを記述するために最も一般的に使用される「順序なしリスト」を使用する理由は明らかです。これはリンクのリストを表しており、それ自体がリスト タグを選択する十分な理由です。しかし、リストをより意味のあるものにするためには、リストのデフォルトのスタイルを削除する必要があります。
もう 1 つの利点は、想像を超えるかもしれません。リストを作成してリンクを追加し、CSS を使用してリスト内の一連の要素を制御および定義します。

 <ul><li><a href="#">収集して共有する</a></li></ul>

2. パス（パンくずリスト）: p 段落タグと list リストタグ

この問題について一緒に話し合うことができます。他にもっと良い方法があればお知らせください。個人的には、パス（パンくずリスト）を次のように記述することを好みます。 (ただし、>> 記号はあまり使用しません)。

 <p id="breadcrumbs"><a href="#">ホーム</a> » <a href="#">会社概要</a> </p>

ウェブサイトのパス（パンくずリスト）は、特定のページ内で階層関係を持っています。論理的には、階層関係を示すためにリストをネストする必要があります。しかし、リストに項目が 1 つしかない場合はどうでしょうか。個人的には、Web ページのパス (パンくずリスト) は 1 行で表示されるべきだと考えています。

3. 入力ボタン
input type="submit" を最後に使用したのがいつだったか思い出せませんが、2 つの理由からずっと前に使用しなくなりました。ボタン要素に type="submit" が必要なのはなぜでしょうか。ボタンは独自の要素であり、コード内で識別しやすく、CSS で定義しやすいです (すべての古いブラウザーがこの要素タグ属性をサポートしているわけではありません)。また、他のタグ要素を書き込むこともできるため、可塑性の可能性が広がります。

 <button type="submit">フォームを送信</button>

4. メッセージ: 順序付きリスト (ol) と順序なしリスト (ul)

リストは本当に素晴らしいです! 3 つの異なるタイプ (順序付きリスト、順序なしリスト、定義リスト) があり、それぞれに独自の用途があります。順序付きリスト (ol) と順序なしリスト (ul) は両方とも使用する意味があるため、いつ使用するかについて混乱するかもしれません。メッセージは、教科書に載っている、自然な上向きの順序できちんと並べられた時系列の例に少し似ています。各コメント メッセージは固定時間に対応しているため、コメント構造では順序付きリスト (ol) を使用する必要があります。

 <オル>
	<li>
	<ul>
	<li><img src="path-to-gravatar.gif" alt="著者名" /></li>
	<li><a href="url-to-authors-homepage.html">著者名</a></li>

	<li>投稿日をここに記入</li>
	</ul>
	<div>ここにコメントテキストを入力してください...</div>
	</li>
</ol>

5. label/input: 他のラベル要素へのdiv

ラベル/入力の外側に親構造を埋め込むのに最適なラベル要素は何ですか?

 <label for="contactName">あなたの名前</label>
<input type="text" name="連絡先名" id="連絡先名" />

適切なタグ コードの使用については以前に説明しましたが、今回は div を使用してラベル/入力を埋め込むことを選択しました。ラベルとそれに関連するコンポーネントは全体として考慮されます。 div 要素には幅広いセマンティック プロパティがあり、あらゆる状況に適応できます。

 <div>
	<label for="contactName">あなたの名前</label>
	<input type="text" name="連絡先名" id="連絡先名" />
</div>

中国語原文: HTML ライティングの 5 つの好み
私のHTML コーディングの好みトップ5