Does CSS affects HTML semantics?

Question

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?

Answer 1

Ideally, CSS should not affect the semantics of the elements. For example, the CSS Display level 3 specification has the following note:

The display property has no effect on an element’s semantics: these are defined by the document language and are not affected by CSS. Aside from the none value, which also affects the aural/speech output [CSS-SPEECH-1] and interactivity of an element and its descendants, the display property only affects visual layout: its purpose is to allow designers freedom to change the layout behavior of an element without affecting the underlying document semantics.

In practice, however, some CSS techniques currently can affect the semantics that browsers pass to other software (first of all, the screen​readers). For example, some browsers have a bug that setting a table element other display value than table (e.g. display: grid) makes the browser not to pass the table semantics to the screenreaders. The new display: contents value can also cause similar problems (well-explained in this article).

I won't expect the browsers to lose the list semantics because of list-style-type: none in CSS, but you should be aware that such problems potentially exist. So please always test your page for accessibility.

Answer 2

No the CSS will only make the HTML look better but wont change HTML itself. Also if you have something like that

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS:

#navlist { list-style-image: url(images/arrow.gif); }

This will still be basically an list UL LI

Answer 3

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.

Answer 4

No, the search engine robot will read the html code regardless of CSS