When writing legal and neat HTML, you need to pay attention to clear structure, correct semantics and standardized format. 1. Use the correct document type declaration to ensure that the browser parses according to the HTML5 standard; 2. Keep the tag closed and reasonably nested to avoid forgetting closed or wrong nesting elements; 3. Use semantic tags such as <header>, <footer>, etc. to improve accessibility and SEO; 4. The attribute value is always wrapped in quotes, and single or double quotes are used uniformly. Boolean attributes only need to exist, and the class name should be meaningful and avoid redundant attributes.

Write HTML code well, not just pile up tags. Clear structured, semantic and standardized HTML is not only easier to maintain, but also more SEO and access-friendly. The following points are practical suggestions for writing legal and neat HTML.

Use the correct document type declaration

The HTML document should be added with at the beginning, which tells the browser that this is an HTML5 document. Without this declaration, the browser may render the page in weird mode, resulting in inconsistent layout and style performance.

<li> Always put in the first line <li> Insensitive case, but usually written in full capital <li> No additional attributes or version numbers are required

With it, the browser knows what standards to parse your page to avoid unexpected problems.

Keep tags closed and nested properly

HTML tags should be closed correctly, especially elements such as <div> , <code><p></p> , and <li> that cannot omit end tags. At the same time, pay attention to the nesting order, and the later-opened tags should be closed first.

 <!-- Correct nesting-->
<div>
  <p>A passage of text</p>
</div>

<!-- Error nesting-->
<div>
  <p>A passage of text</div>
</p>

Common errors include:

<li> Forgot to close the tag<li> Incorrectly nesting inline elements with block-level elements (such as <a> containing <div> )<li> Improper use of self-closing labels (such as <div /> )

Using an editor like VS Code can automatically complete the tags and reduce these problems.

Use semantic tags rationally

HTML5 provides many semantic tags, such as <header> , <footer> , <article> , <section> , etc. Not only do they make the structure clearer, they also help screen readers better understand page content.

For example:

 <article>
  <h2>Article Title</h2>
  <p>Article text content. </p>
</article>

Alternatives (not recommended):

 <div class="article">
  <h2>Article Title</h2>
  <p>Article text content. </p>
</div>

While the visual effects of the two may be the same, semantic tags have more advantages in accessibility and SEO.

Attribute writing specifications

The attribute value is always wrapped in quotes, whether it is a single or double quote, it is only unified. Do not omit quotes or mix them.

 <!-- Recommended->
<img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="What are best practices for writing valid and well-formed HTML code?">

<!-- Not recommended->
<img src=image.jpg alt=descriptive text>

in addition:

<li> Boolean properties (such as disabled and checked ) only need to exist, no assignment is required. <li> Class names use meaningful naming, such as nav-bar instead of nb <li> Avoid using unnecessary properties, such as language="javascript" is no longer necessary in <script></script>

Basically that's it. HTML looks simple, but the details are done in place, which can lay a good foundation for subsequent development.