Analysis of experienced HTML writing styles and reasons_HTML/Xhtml_Web page production

1. Navigation: Unordered list versus other tag elements

The reason for using the most commonly used "unordered list" to write navigation is Obviously, it represents a list of links, which in itself is reason enough to select the list label. But the default style of the list needs to be removed to make it more meaningful.
Another benefit may be beyond your imagination: you create a list and add a link to it, and you can use CSS to control and define a string of elements in the list.

• 收集分享

2. Path (breadcrumbs): p paragraph tag to list list tag

We can discuss this issue together. If you have other better ways, please let us know. Personally, I prefer to write paths (breadcrumbs) using code like the following. (I don't use the >> symbol often, however).

<p id="breadcrumbs"><a href="#">首页</a> » <a href="#">关于我们</a> </p>

The website path (breadcrumbs) has a hierarchical relationship in a certain page. Logically speaking, the list should be nested to show the hierarchical relationship. But if there is only one item in your list, how do you think about this? What kind of situation? I personally feel that the web page path (breadcrumbs) should be displayed in one line.

3. Button versus Input
I can’t remember the last time I used input type="submit", but I stopped using it a long time ago for two reasons. : Why do you have to enter type="submit" for the button element? The botton is its own element. The botton is easy to identify in the code and easy to define using CSS (not all older browsers support this element tag attribute). And it also allows us to write other tag elements inside it, thus expanding our possibilities for its plasticity.

<button type="submit">Submit Form</button>

4. Leave a message: ordered list (ol) versus unordered list (ul)

list is really great! There are 3 different types (ordered, unordered and defined list) and each has its own purpose. Maybe you are confused about when to use ordered list (ol) and when to use unordered list (ul), because they make sense when used. The messages are a bit like the examples in the textbook that are arranged neatly in chronological order, sorting naturally upward. Each comment corresponds to a fixed time, so the comment structure should use an ordered list (ol).

<ol>
	<li>
	<ul>
	<li><img src="path-to-gravatar.gif" alt="Author's name"></li>
	<li><a href="url-to-authors-homepage.html">Author's name</a></li>

	<li>posted on date-goes-here</li>
	</ul>
	<div>Comment text goes here...</div>
	</li>
</ol>

5. Label/input: div For other label elements

, set the parent structure outside label/input. What label element is the best? What's a good choice?

<label for="contactName">Your Name</label>
<input type="text" name="contactName" id="contactName">

Using appropriate label codes can be discussed in the past, but now I still choose to use div to embed label/input. The label and the associated label are considered as a whole. The div element has a wide range of semantic properties, and it can adapt to any situation.

<div>
	<label for="contactName">Your Name</label>
	<input type="text" name="contactName" id="contactName">
</div>

Chinese original text: My 5 html writing preferences
English original text: My Top 5 HTML Coding Preferences