Analysis of the HTML writing style and reasons of experienced people

1. Navigation: Unordered List vs. Other Label Elements

The reason to use the most commonly used "unordered list" to write navigation is obvious. It represents a list of links, which in itself is enough reason to choose the list tag. But we need to remove the default styling of the list to make it more meaningful.
Another benefit may be beyond your imagination: you create a list and add a link to it, and use CSS to control and define a series of elements in the list.

 <ul><li><a href="#">Collect and share</a></li></ul>

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

We can discuss this issue together, if you have other better ways please let us know. Personally, I prefer to write the path (breadcrumbs) as follows. (I don't use the >> symbol often, however).

 <p id="breadcrumbs"><a href="#">Home</a> » <a href="#">About Us</a> </p>

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

3. Button to 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 does the button element have to have type="submit"? The button is its own element, which is easy to identify in code and easy to define with CSS (not all older browsers support this element tag attribute). And it also allows us to write other tag elements into it, thus expanding our possibilities for plasticity.

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

4. Message: Ordered list (ol) vs. unordered list (ul)

Lists are really great! There are 3 different types (ordered, unordered, and definition lists), and they all have their own uses. You may be confused about when to use ordered lists (ol) and when to use unordered lists (ul), because it makes sense to use them both. The messages are a bit like the neatly arranged chronological examples in a textbook, with a natural upward order. Each comment message 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 to other label elements

What label element is the best choice for embedding the parent structure outside the label/input?

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

Using appropriate tag codes could have been discussed before, but now I have chosen to use div to embed label/input, and the label and its associated components are considered as a whole. The div element has a wide range of semantic properties and can be adapted to any situation.

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

Original Chinese text: My 5 HTML writing preferences
My Top 5 HTML Coding Preferences