HTML was designed to add both layout and meaning to web pages. Thus, while a piece of text could be defined to have an arbitrary visual style by embedding commands, and these might mimic the layout of a document, so as to be comprehensible visually, other commands actually indicate some abstract properties of  the text which are more generally meaningful - level of importance, for example.

The situation is very akin to the decision whether to use styles, or not, in word processing.

You can construct a document by manipulating the appearance of the text with font, size weight, etc., commands, and you will end up with a document which looks fine, and gives a visual impression of the differences of importance between parts of the text. But such a document can become a nightmare to edit later, because the distinctions in the document have no absolute meaning.

If you work with styles, then, for example, you use heading1 for main headings, and heading 2 for the next level of importance, and so on, down to body text. Similarly, you indicate that a list should appear with bullets or numbers.

This has the effect of separating the content - the actual text, for example - from the presentation - how the content appears.

The key advantages of doing this are:

• The document is structured by the different meanings attached to particular parts of the text
• You can then work with the structure, and the system will cope with issues like numbering and renumbering paragraphs, or making all heading of a particular level look the same
• Because the content and the meta-content are separated, you can change the appearance or significance of any given part of the document without changing the content itself.
• The same content can then be represented in another representational system, for example sound, or just according to different rules of design, without the need to change the content.