How to separate Text and HTML with CSS


Tags: html,css,text,pseudo-element

Problem :

In order to improve the maintainability of a website, is it a good idea to separate all the text from the HTML and put it all in a unique CSS stylesheet? I mean, something like this:

HTML file

<body>
    <h1 class="home-title"></h1>
    <p class="description"></p>

    <!-- and much more elements... -->
</body>

CSS file with all the text

.home-title:after {
    content: "Welcome to my website!";
}

.description:after {
    content: "This is a demo ok?";
}

...


Solution :

NO! For SEO (search engine optimisation) you should make your site as easy to read by a web-spider as possible, and filling all of your elements using CSS would be terminal!

CSS is strictly for layout
HTML is strictly for content

Your site should be as easy to read as a textbook - imagine a page in a textbook saying go find the content that should be here in a different textbook, and how annoying that would be. That is in effect what you are doing.

Keep HTML and CSS separate!

Think of it like this:

If and only if you can't do it in HTML, use CSS
If and only if you can't do it in CSS, use JavaScript


    CSS Howto..

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How can i include label-info from twitter boostrap in my own class definition?

    How can I add an image to a
  • tag dynamically
  • How do I make a horizontal sitemap using UL?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How to deal with image references in CSS in a Rails 3.1 app

    how to flip and rotate an image using css in chrome

    How to use nav-pill with nav-justified from bootstrap3x without responsive features

    How to design select box using css

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    rails redirect_to notice - how to apply css

    How do I determine if truncation is being applied in my style through JS?

    twitter bootstrap - how to skip a line?

    how to recreate tex's over- underbracket using css

    How to trigger a css animated button by hovering over an image on the same page

    How to make css jQuery thumbnail slides loop

    Content property in CSS - how to put content into several paragraphs

    How to make interactive logo design without flash?

    How to make text appear at the top left corner?

    How to make 3-Column layout with fluid center (fully utilize space), and variable-length on sidebars

    CSS - want to remove a blank space but have no idea how to get rid of it?

    How to set height of a div element to same as another div

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How to fit two divs side by side horizontally?

    How to fit textarea exactly inside a div - CSS

    How to position two divs on either side of the screen, HTML, CSS

    How to use bootstrap css tables to display data from MySQL tables?

    How to make div scalable by using percentage in CSS

    How to make one side of a div pointy with CSS?