Forum Moderators: open
Since search engines give high priority to tags like <b> and <h1>, would it be beneficial for the site's performance not to "hide" those tags inside a css but use them directly inside the markup?
The joy of external CSS is that only semantic information needs to end up in your html document. How these tags are rendered visually can still be written into your external CSS rules.
However, do not expect that such tags carry a lot of weight with algorithms today - certainly nothing like years ago when text in an <h1> might be weighted 10x the value of "normal" text. These tags have been abused, and search engines have compensated for that abuse because they look for real relevance.
You are on the right track, however, by putting rendering instructions out of sight. Algortihms will have a much better time of deciding the relavance of your page. It's a good discpline, and also the reason that CSS and strict mark-up are what they are.
<h1>Main Heading Here</h1>
<p>blah blah blah</p>
<h2>Secondary Heading</h2> ... and so on,
then in the external CSS you can style the various tags however you wish.
Wherever you can, try to style tags directly rather than creating classes, because that will let you use just <h2>, for example, instead of <h2 class="whatever">. It's one more way to streamline things.
ALL of the HTML tags and your text content inside them go in the HTML file.
The fact that they have the same outcome is beside the point ;)
The <em> tag for emphasized elements and the <strong> tag for strongly emphasized elements are semantic rather than presentational. Because most people navigate the web through visual browsers, they are accustomed to seeing <em>'s rendered in italics and <strong>'s rendered in bold, but that's just one typographic convention. With CSS an author might choose to use color to indicate degrees of emphasis, or font size. But text is only one web medium. An auditory browser might make <em> and <strong> loud and louder, for example. And a braille browser might ... hmm, how is emphasis indicated in braille text?
Since search engines give high priority to tags like <b> and <h1>...
A search engine is after essentially one thing - measuring a page's relevance to a given query. Now I don't see that these tags have anywhere near the clout they once did - in fact all on page factors are less important. But they still count, and I do see evidence that <b> tags, for instance, are still a part of the on-page factors that algos take into account.
So, the original question is rather astute, but certainly not purist. A <b> is rendering instruction only in a theoretical way. However, if search engines still assume (as I feel they do) that a <b> tag also means something like "these words are more important than others" then the search engines are still taking semantic import from these tags.
If this is so, we would be foolish to place ALL such instructions in externally defined classes and IDs (at least until we are certain that SEs have abandoned this measure.)
CSS can be a very good friend by allowing us to removed ALMOST all such instruction, and retain a few on-page tags that say, very unambiguously, "These are the important words on the page. They are the key topics and themes."
No, it's not purist - but for now it is very practical. And H1, H2 etc are always intended to convey semantic information. So their styling may be defined externally, but the tags themselves atre helpful on page.
I've seen HTML authoring software that turns every style used into a <p> element with a class - even the obvious headings. Or even worse, nothing but <span> tags and line breaks.
I think the original question has an embedded insight within it. And I think that being "strictly semantic" today is surrendering one still-useful tool from the SEO's toolkit. Yes, it's a much diminished tool from the simpler days of text-match search engines, but it's still a tool.
Ouch! Which ones do that? That is just plain wrong.
A document should consist of headings, paragraphs, lists, tables, and forms.
Any document filled with multiple div and span tags is probably not coding the most efficient way.
.
>> If this is so, we would be foolish to place ALL such instructions in externally defined classes and IDs (at least until we are certain that SEs have abandoned this measure). <<
My design test for this, is simply: "Do all the parts of this document visually convey the same semantic meaning if I temporarily delete the CSS file?"
Obviously headings still look like headings, and pass the test (even though the font style, size, and colour has changed again), paragraphs are still spaced out as paragraphs, lists still look like lists, and words shown in bold or italic are still shown that way, and so on.
Usage of div and span, classes, and IDs all fail that test, as they refer only to CSS-applied visual styling.
In fact, if you want to check your document is semantically correct, do just that: delete, or unlink, the CSS file and look at the document with your eyes. Additionally check your usage of headings using the "outline" function at [validator.w3.org...] too.
Which ones do that? That is just plain wrong.
Whatever editor it is, a client I recently took on has serveral team members who use it - I've been throwing fits about it, and no one will give me the editor's name. Maybe it's a "custom" job from their IT Dept, who knows.
At any rate, the code looks identical to some stuff I had to deal with last year from another unrelated client - code like this:
<span class="xlBlue"><span class="margin-5"><span class="serif">Text</span></span></span><br><br>
SEARCH ENGINES
Has anyone seen evidence that algorithms look for <strong> and <em>? I thought they might be doing that, since Dreamweaver et. al. now are set that way by default. But I haven't turned up even any examples that hint in this direction.
3.1 Emphasis [w3.org]
The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)
1.2 Structural Grouping [w3.org]
Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3). Do not use headings to create font effects; use style sheets to change font styles for example.
The reason I posted the above is because I spent 2 hours yesterday reading the pros and cons of using presentational markup vs. structural markup. There are definitely two camps here, the ones who are for, and the ones who are against. Much of it has to do with the misuse of structural elements. When that occurs, the semantics are out the window! ;)
