Search code examples
csshtmlsemantics

Does CSS affects HTML semantics?


Does CSS affects HTML semantics?

For example, Hiding the bullets of ordered list (<ol><li>) and using an image instead. Will it be treated like unordered list after applying the CSS?


Solution

  • No, CSS does not affect HTML semantics. There may have been some historic semantic differences between a <ul> and an <ol> besides just what the default numbering is for each type of list item (some claim a <ul> is supposed to represent an unordered set while a <ol> is supposed to represent an ordered list), but in practice the only real difference between the two is the default numbering you get without any custom style formatting.

    The order of the items is still relevant for both tags as it represents the order that the browser will display the items in. The browser is not free to show <ul> items in a random order.

    If you've customized the numbering yourself, then there is no actual display difference between the two. If a search engine is looking through your page, it is going to see the actual HTML tags you put in the page and it's not going to change it's behavior if you use a bullet instead of a number via a CSS setting.


    Some will argue there is a semantic difference between the two tags (set vs. list) and the HTML5 specification refers to a semantic difference, but I am hard pressed to know of any situation where this semantic difference is actually relevant or used. In any case to the point of your question, whatever semantic difference there is would not change just because CSS styling changed the list to display custom images instead of numbers or vice versa.

    The HTML5 specification has this to say:

    The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

    and this:

    The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

    There is nothing in the specification that says that if you changing the visible formatting of the numbering with CSS, then the HTML semantics would change.