Jesse Skinner explains why developers should use appropriate semantic tags when marking up a page, rather than just putting everything inside a <div>.
Here’s a quick reference list of what I commonly use:
- <div> – For large page sections, and when there isn’t a specific semantic tag
- <h1> … <h6>: For section header titles
- <p> – For text paragraphs, and when there isn’t a specific semantic tag
- <ul>, <ol>, <dl> – For lists (including navigation menus)
- <table> – For spreadsheet data
- <span> – For inline formatting
- <label> – For form fields*
- <address> – For contact information, including phone numbers
* The thing I love about <label> is that it will make the text of the label, and not just the input field itself, clickable. It should be used on every form.