Login/Register
Why is this Doctype "DIV" not allowed?
Asked Answered
Solved htmldoctypew3c-validation
A

4

5

I have created this piece of code. 

<a href="#">
  <!-- BEGIN #btnBox .btnBox --> 
  <div id="btnBox2" class="btnBox">
    <div class="btnleft"></div> <!-- BEGIN & END .btnleft -->
      <!-- BEGIN .btncenter --> 
      <div class="btncenter">
        <div id="btnText2" class="btnText">Want more? - check out my recent work</div>
      </div>
      <!-- END .btncenter -->            
      <div class="btnright"></div> <!-- BEGIN & END .btnright -->
  </div>
  <!-- END #btnBox .btnBox -->   
</a>

And when I validate the code under W3 HTML validation, it's giving me an error:

Line 163, Column 41: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag

I am using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Accouplement answered 3/6, 2011 at 19:22 Comment(0)
U
7

A division <div> is a block level element while an anchor <a> is an inline element. From the w3c web site:

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Chances are you're using divisions because you need block-level behavior, like width and height.

Without changing your DOCTYPE, you can use the CSS property display to make <span> elements behave like <div> elements:

HTML

<a href="#" class="forMuzammil">
<!-- BEGIN #btnBox .btnBox --> 
<span id="btnBox2" class="btnBox">
    <span class="btnleft"></span> <!-- BEGIN & END .btnleft -->
    <!-- BEGIN .btncenter --> 
    <span class="btncenter">
        <span id="btnText2" class="btnText">Want more? - check out my recent work</span>
    <!-- END .btncenter -->    
    </span>
    <span class="btnright"></span> <!-- BEGIN & END .btnright -->
<!-- END #btnBox .btnBox -->     
</span>
</a>

CSS

a.forMuzammil {
    display:block;
}
a.forMuzammil span {
    display:block;
}
Ubiety answered 3/6, 2011 at 19:33 Comment(2)
Line 214, Column 33: document type does not allow element "DIV" here; assuming missing "LI" start-tag <div class="clrless"></div> <!-- BEGIN & END .clear --> how can i solve this too... – Accouplement
Again, if you replace that div with a span, it should fix the problem, but I am afraid that another one will pop up. As others said, you are better off with html5. Try changing your document to <!DOCTYPE html>. If you don´t want to change your doctype, then I feel you will have lots of work ahead... – Grained
T
8

Divs are block level elements - they should not be included within Anchor tags.

Tillie answered 3/6, 2011 at 19:25 Comment(4)
... because anchor elements are inline level elements. – Ubiety
i want to set complete container a link... how can i make it possible? – Accouplement
You ... don't. Or rather, you don't by enclosing it in a link. If you want a container to be clickable you should look into event handling. Are you working with jQuery by chance? $('div.btnBox').click(function () { ... }); – Tillie
Or just switch to html5 doctype :) and you can have a page that validates without using javascript for having clickable containers (block elements). – Somewhat
U
7

A division <div> is a block level element while an anchor <a> is an inline element. From the w3c web site:

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Chances are you're using divisions because you need block-level behavior, like width and height.

Without changing your DOCTYPE, you can use the CSS property display to make <span> elements behave like <div> elements:

HTML

<a href="#" class="forMuzammil">
<!-- BEGIN #btnBox .btnBox --> 
<span id="btnBox2" class="btnBox">
    <span class="btnleft"></span> <!-- BEGIN & END .btnleft -->
    <!-- BEGIN .btncenter --> 
    <span class="btncenter">
        <span id="btnText2" class="btnText">Want more? - check out my recent work</span>
    <!-- END .btncenter -->    
    </span>
    <span class="btnright"></span> <!-- BEGIN & END .btnright -->
<!-- END #btnBox .btnBox -->     
</span>
</a>

CSS

a.forMuzammil {
    display:block;
}
a.forMuzammil span {
    display:block;
}
Ubiety answered 3/6, 2011 at 19:33 Comment(2)
Line 214, Column 33: document type does not allow element "DIV" here; assuming missing "LI" start-tag <div class="clrless"></div> <!-- BEGIN & END .clear --> how can i solve this too... – Accouplement
Again, if you replace that div with a span, it should fix the problem, but I am afraid that another one will pop up. As others said, you are better off with html5. Try changing your document to <!DOCTYPE html>. If you don´t want to change your doctype, then I feel you will have lots of work ahead... – Grained
N
1

You can't have a div tag inside an a tag. Also in the code sample you provided you don't close the a tag.

Notary answered 3/6, 2011 at 19:24 Comment(0)
S
0

You can't use block elements like DIV's inside an a-tag if you are using a HTML4 doctype.

Try this doctype instead:

<!DOCTYPE html>

and make sure that you add the missing end tag for the anchor tag; </a>

<!DOCTYPE html> is the doctype for HTML5. And according to the standard for HTML5 div tags are now allowed inside of an a tag

Hope this helps.

Somewhat answered 3/6, 2011 at 19:26 Comment(2)
thank you. but is the perferable to use html5.. because i completly code the html with html4 strict standards. – Accouplement
Html5 is the way to go! You can still code like you do when using html4 strict, but you get all the advantages of the new features of html5 (like the one we are talking about here, block elements inside of an a tag) if you go and use the html5 doctype instead. – Somewhat

© 2022 - 2024 — McMap. All rights reserved.