Choosing an element for how it looks is the original sin

Almost every structural problem on the web traces back to one decision made for the wrong reason.

There is a moment, familiar to everybody who has built a page, where you need some text to be a bit bigger. There is an element that happens to render bigger, so you reach for it. The text becomes bigger. The problem appears solved. What has actually happened is that you have declared a new major section of the document where none exists, and you have done it in a way that is invisible to you and unmistakable to everybody else. The same move happens with indentation borrowed from quotations, alignment borrowed from tables, and spacing borrowed from paragraphs that are not paragraphs.

The reason this is so common is that the default appearance of elements is genuinely informative. Headings do look important. Quotations do sit apart. Lists do get markers. The defaults are a reasonable visual expression of the meaning, which makes them easy to mistake for the point of the element rather than a side effect of it. The cure is to separate the two questions and always ask them in the same order. First: what is this piece of content? Second, and entirely separately: how should it look? The second question has its own answers, and they never require you to lie about the first.

If you are unsure whether you have made this mistake, there is a simple test you can run on any page you have written. Strip away every visual decision in your head and read only the labels. Does the resulting description make sense as an outline of the content? Would somebody who could only hear that description understand what is on the page and how it is organised? If yes, your elements are honest. If the description reads as a jumble of important things that are not important and plain text that is secretly a control, you have chosen by appearance, and it will cost you.