HTML標記的核心概念

使用語義化標籤提升結構清晰度，利用屬性添加額外信息，注意嵌套與縮進以提高可讀性，從一開始就考慮無障礙設計。首先，用

HTML markup is all about structuring content in a way that browsers and other tools can understand. It's not just about slapping tags around text—it's about meaning, accessibility, and setting the stage for styling and interactivity.

Use Semantic Tags for Clear Structure

Gone are the days when everything was a <div> or a <code><span></span> . Semantic HTML helps both developers and machines understand the purpose of each part of a webpage. For example:

• Use <header></header> for introductory content
• Use <nav></nav> for navigation links
• <main></main> wraps the central content
• <article></article> and <section></section> define document parts with specific roles

These tags don't change how the page looks by themselves, but they make a big difference in accessibility and SEO. Screen readers, search engines, and even your future self will thank you for using them properly.

Attributes Add Extra Info to Elements

Tags alone do a lot, but attributes give them extra context. The most common ones like class , id , and href are probably familiar, but there's more to know:

• Always use quotes around attribute values
• Boolean attributes (like disabled ) work without a value: <button disabled>Click me</button>
• Custom data attributes ( data-* ) let you store extra info right in HTML

For example, if you're building a tooltip system, you might use something like <p data-tooltip="This is important">Hover here</p> . JavaScript can then read that value and show it when needed.

Nesting and Indentation Matter More Than You Think

HTML isn't picky about formatting, but humans are. Proper nesting and indentation help avoid confusion and bugs. Consider this:

 <ul>
  <li>First item</li>
  <li>Second item
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ul>

That structure makes sense visually and logically. Messy code can lead to mismatched tags, missing closes, and layout issues that are hard to track down. Don't skip the spacing just because the browser doesn't care.

Keep Accessibility in Mind from the Start

HTML plays a key role in making websites usable for everyone. A few small choices can have a big impact:

• Use real <button></button> elements instead of divs styled as buttons
• Label form inputs properly with <label for="input-id"></label>
• Make sure links describe their destination ( click here is not helpful)

Even simple things like alt text on images ( <img src="/static/imghw/default1.png" data-src="dog.jpg" class="lazy" alt="A golden retriever playing fetch"> ) improve screen reader experiences. Accessibility isn't an afterthought—it should be baked into your markup from the beginning.

基本上就這些。