Jump to content

Automated HTML/CSS Validation

Recommended Posts

Hello all.


I was wondering if there are any tools available that can automate the HTML/CSS validation process. I use the tools available from W3C which are great, but was just wondering if there were any tools that could make it even easier?


I've been using a linter for awhile now, which shows errors in code on the fly.


I'm not sure if such a tool exists, but if it did someone here would know about it.


Thanks :)

Share this post

Link to post
Share on other sites

The W3 CSS validator isn't much good.


To run an analysis on your CSS for a wide array of metrics checkout Parker https://github.com/katiefenn/parker


The W3 HTML validator is about the best there is out there although it can be a little out of date when it comes to some of the meta tags and other anomalies. Make sure you are using Aria correctly to make your website accessible to users with various disabilities. HTML Validator won't tell you about this, it's good to test with screenreader technology.

Edited by rbrtsmith

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By drkirkby
      My company (Kirkby Microwave) website was coded in XHTML, and had no errors on the W3C validator. It has been suggested that nobody uses XHTML, and I should switch to HTML 5. So I changed the bit at the top of the webpages to read
      <!DOCTYPE html >
      After making some minor changes, mainly removing the setting of the width inside the <img src> tag, I can get pages to almost validate. Some don't, but that is simply because I have not got around to fixing the errors. But the W3C validator is always complaining
      Warning: This document appears to be written in English. Consider adding lang="en" (or variant) to the html start tag.
      I can't seem to see how to fix this.  Despite reading the links on the W3C validator page, no matter what I try does not work! Feel free to look at the source of my homepage, and let me know how to fix this.
      I only speak English, so just want to leave it as English, and nothing else.
      I did not post the link to my homepage, as I'd be interested if anyone that Googles Kirkby Microwave finds a .com domain. There is a .com, but it should be hidden from Google, but anyone on the BT broadband network may be able to see it, as the IP address range is restricted to those that BT seems to serve me up.
    • By Randallrbaker
      Here is my website. www.vibe432.com  please check every link and every possible page ans let ne know whats wrong. Id  evenlike to have the responsiveness looked at too. Im having someone do the css and html for me so i need to tell them exactly what wrong and why it's wrong. 
    • By 98sfsdf8
      Hi all,
      I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
      - to be able to have images of different heights and widths, not all the same size (as it is now).
      - vertically/horizontally centered.
      Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/
      <div id="contentwrapper">       <div class="centreme">         <img src="https://picsum.photos/200/200?image=1" id="animation" />         <img class="hidden" src="https://picsum.photos/200/200?image=1" />         <img class="hidden" src="https://picsum.photos/200/200?image=2" />         <img class="hidden" src="https://picsum.photos/200/200?image=3" />         <img class="hidden" src="https://picsum.photos/200/200?image=4" />         <img class="hidden" src="https://picsum.photos/200/200?image=5" />         <div id="bottommark"></div>       </div>     </div> CSS:
      body,       html {         height: 7000px;         margin: 0;         background-color: grey;       }       .hidden {         position: absolute;         top: -9999999px       }       #bottommark {         position: absolute;         bottom: 0;       }       #contentwrapper {         width: 100%;         height: 100%;         position: fixed;       }       .centreme {         position: fixed;         width: 200px;         /* the image width */         height: 200px;         /* the image height */         top: 50%;         left: 50%;         margin-top: -100px;         /* half the image height */         margin-left: -100px;         /* half the image width */       } JS:
      $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });  
    • By charlyanderson
      Hello everyone :)
      I am working on a grid type layout and really having troubles and hoping someone might be able to help.
      The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row.
      I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help.
      Attached is a very basic example of what I am trying to achieve.
      Thanks in advance.

    • By Gee_suss
      Hello. I have a curious case of a missing footer. I needed to add a lot of text to a page so the page is very long. When I first started to develop the text the footer was still there but as more text was added the footer suddenly disappeared. I find this very strange and I would like the footer to come back.
      Here is the link. www.mala.co.uk/privacy
      If you have a look at the other pages you will see the footer I mention above. Any ideas?
      Many thanks in advance.

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts