Why should we use tags like p, span, hx tags when we can use CSS instead?

Question

Why should we use tags like p, span, hx tags when we can use CSS instead? Is it important from an SEO point of view?

Answer 1

The short version is that that the various tags and CSS have different purposes.

<h1>Whatever</h1>, for example, carries a certain amount of meaning along with its use: "This is a header, an important–first-level one" and so on. Some parsers also use the hx tags(and others) to create an outline of the document's structure which can be used for anything from data processing to accessibility(eg. screenreaders jumping to the next question on the webmasters homepage by skipping to the next h3).

You can't dismiss the semantic tags based on what you can do with CSS, and vice versa.
You can apply CSS to another tag to make it look the same as the h1, eg: <span style="font-weight:bold;font-size:2em">Whatever</span> but that still doesn't make that span tag an actual header in terms of function and semantics. In this case, that outline I linked to above would be pretty much impossible because those spans aren't headers, but just some text that you arbitrarily made big and bold.

Answer 2

Markup and presentation are different

This is a bit like asking "why should we have walls when we have paint?" :)

HTML tags denote what your content is - this is a headline, this is a list, etc.

CSS denotes what your content should look like - headlines should be blue, lists should be indented this much, the menu should be on the left, etc.

Javsascript tells how your page should behave - animations, etc.

So, without HTML content, CSS and Javascript really have nothing to work on.

These categories are not 100% black and white - for example, CSS can specify "transitions" now, which are animations - but they're the basic idea.

Please see previous discussions on this topic on StackOverflow here and here.

Good markup saves a ton of effort and works better

If you want something to behave like a link, you can use <span class="mylink"> and use a bunch of CSS and JS to make it look and feel right. Or you can just use an <a> element and get all that for free, with no additional code to download, because browsers already know what to do and have the logic implemented in fast, native code. Plus it's a lot more likely to work correctly for screen readers, mobile browsers, search engines, aggregators, and other use cases you didn't think of.

This is also why you should use a <button> for clickable actions, a <label> to label an <input>, and a <main> for the main section of your page.

How good markup impacts SEO

Fundamentally, SEO is about convincing search engines that your content is the best match for a search term. Obviously, nobody at Google is personally reading every web page and ranking it.

Therefore, for search engines to know what your content is, a program has to parse it.

And hey, look! We have this whole language called HTML that's meant to label your content in a way that machines can understand! :)

So yes, clear markup will help search engines to index your pages better.

To use an extreme example, if your page's headline was actually a photograph that you took of a newspaper headline, it might look interesting, and people could read it just fine, but to a search engine, it would just be an image with no meaning. Whereas <h1>Turtle Groomer 5000</h1> clearly tells the search engines that you have a product that facilitates testitudinal hygiene.

Answer 3

Please also think about people with some sort of impairment who (as an example) have to use a braille reader. In such cases the html tags are of far greater importance than the visual css stylings.

Answer 4

Su answered the semantic portion. With regards to SEO, you'll find that the h1 element is given more weight by search engines than other tags. The h2/b/strong tags are given a little more weight than regular text.

Most other tags are pretty much equal, but you should always use the most appropriate tag for the job. Google has recently begun parsing tables when used for tabular data, and other appropriately-used HTML can give signals to which content is more important than others.

Answer 5

For HTML5, check out bold and italic in HTML5.

Summary:

Use <b> when you want the text to have a different style without contextual importance, but use <strong> when you want the text to have extra importance from a content or SEO perspective.

Use <i> to offset the mood of text, but use <em> to make text emphatic.

Answer 6

Also: do not forget the importance of the semantics for users with a disability. Screenreader software depends on these semantics to present blind people the required context they're missing out on because of their disability.

Answer 7

Firstly, <hx> is is a rather important tag, as it defines headings, as others have mentioned. Headings are very useful not just for looks, but because they separate sections in a way that a look-alike cannot. Just take a look at Wikipedia for example. Some programs depend on these kinds of tags to "break" documents apart or even create an automatic table of contents. A search engine would presume that the text within a <h1> tag would be more important since it's a heading -- a title.

Nextly, while stylesheets are great, some devices will ignore stylesheets and focus only on the HTML, which is where a tag like <em> comes in handy. If stylesheets were disabled or there was a problem loading it (eg, internet connection problems), the text still appears formatted. <em> could also tell that there is supposed to be an emphasis on the word, whereas italics alone could be anything from a movie title to just making an image caption differ from the regular text. This can be used by those using disability tools, which otherwise fail to capture emphasis generally.

<span>, on the other hand, is largely an inline version of the <div> tag, and if anything, it can just save you from having to type an extra class in (with that being said, would you really want to use <span class="italic"> instead of <i> for every italic instance you have? It makes code harder to read, less standardized (under the broad assumption that the majority of people would use the latter over the former), and doesn't in any way enhance the document.

<p> also comes in handy for those with disabilities, since it ensures that text can be broken into manageable paragraphs in a way that <br /> cannot.

Sure, we can say that HTML was not meant to be for styling, but there is a delicate line between design and style; and frankly, I'd say consider that to be user preference. Whether you use <i> or <span class="italic">, it's up to you, and won't make a difference for SEO. After all, why limit us to just one way of doing things? (like how we could choose whether or not to use semicolons at the ends of lines in JavaScript -- I always use them, while others never use them, and it makes no difference for functionality at all.)