How do I fix "Error: A charset attribute on a meta element found after the first 512 bytes."

Anon picture Anon · Aug 2, 2013 · Viewed 34.3k times · Source

I am getting this error for my site in validation.

Error: A charset attribute on a meta element found after the first 512 bytes.

and here is code causing this problem:

<!DOCTYPE html> 
<html class="not-ie no-js" lang="en-US" prefix="og: http://ogp.me/ns#"> 
<head>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com.au/wp-content/cache/minify/000000/TY3RDsIgDEV_SFb5pAqVgLDWFTb79y6bWXw6ybk3OR4KdcHwgsZxVFLYckzUL97uoN0q7QyqUN6DFpueOAd78Gdqef4ta47EruifwhEzS0WjZfWH97CJSw1FcjdHqOYSc6rkdqdnaU_LdRHW7k79BQ.css" media="all" />
<script type="text/javascript" src="http://mywebsite.com.au/wp-content/cache/minify/000000/hY7RDsIgDEV_aFCXmCzxb5DVDQSKtDj164W5dx977rltV5F8ATDevPRCtAQ02bG2FHcGwV0Z_KNiecOoJz0eg44uac_DCTxDpBlLcp-ibWWh-KNPNyMpz10dztBWRkyiCuaw14exsSTGirpRiWoCl2yoM3JvH2d68l9mW1wWbpJHycbe-0s1tHDLS6GVvg.js"></script>
<script type="text/javascript" src="http://mywebsite.com.au/wp-content/cache/minify/000000/M9YvzdTPKixNLarUK83UK89MSU8t0cvNzAMA.js"></script>
<script type="text/javascript" src="http://mywebsite.com.au/wp-content/cache/minify/000000/ZY5BDsIwDAQ_RNIWxEt4gUkMuKRxsJPS8HpacahQLnuYnZW270btFAO6TDN9xED0BpcsYH6URe1E8dBvoqAmjn4H46ugVIugFO9msKemukF09cqLTeCef42rLqCFEJqNTiD5krcI5FEagZQzJ2z46EC4rMf3BoonTgEqyjw0g8zFPS5vSrieP9rzLriimacv.js"></script>
<meta charset="UTF-8">

Answer

paxdiablo picture paxdiablo · Aug 2, 2013

Move the meta entry to above all those other entries, such as:

<!DOCTYPE html> 
<html class="not-ie no-js" lang="en-US" prefix="og: http://ogp.me/ns#"> 
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://mywebsite.com.au/wp-content/cache/minify/000000/TY3RDsIgDEV_SFb5pAqVgLDWFTb79y6bWXw6ybk3OR4KdcHwgsZxVFLYckzUL97uoN0q7QyqUN6DFpueOAd78Gdqef4ta47EruifwhEzS0WjZfWH97CJSw1FcjdHqOYSc6rkdqdnaU_LdRHW7k79BQ.css" media="all" />
    <script type="text/javascript" src="http://mywebsite.com.au/wp-content/cache/minify/000000/hY7RDsIgDEV_aFCXmCzxb5DVDQSKtDj164W5dx977rltV5F8ATDevPRCtAQ02bG2FHcGwV0Z_KNiecOoJz0eg44uac_DCTxDpBlLcp-ibWWh-KNPNyMpz10dztBWRkyiCuaw14exsSTGirpRiWoCl2yoM3JvH2d68l9mW1wWbpJHycbe-0s1tHDLS6GVvg.js"></script>
    <script type="text/javascript" src="http://mywebsite.com.au/wp-content/cache/minify/000000/M9YvzdTPKixNLarUK83UK89MSU8t0cvNzAMA.js"></script>
    <script type="text/javascript" src="http://mywebsite.com.au/wp-content/cache/minify/000000/ZY5BDsIwDAQ_RNIWxEt4gUkMuKRxsJPS8HpacahQLnuYnZW270btFAO6TDN9xED0BpcsYH6URe1E8dBvoqAmjn4H46ugVIugFO9msKemukF09cqLTeCef42rLqCFEJqNTiD5krcI5FEagZQzJ2z46EC4rMf3BoonTgEqyjw0g8zFPS5vSrieP9rzLriimacv.js"></script>

Your problem lies with your violations of the W3C HTML5 recommendation:

The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.

Whatever test you're using is somewhat out of date, the limit used to be 512 bytes but was changed (at the latest) December 2012.

Those rather chunky script tags are pushing the character set specification well outside the 512-byte range of your test tool. Even if you use a later test tool that recognises the change to 1024 bytes, it may still be a problem. The advice to put the meta tag up front should fix either case.