CODEWITHSUNDEEP
htmldoctypew3c-validation
Muzammil
Muzammil

Reputation: 508

Why is this Doctype "DIV" not allowed?

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">

Upvotes: 5

Views: 6141

Answers (4)

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

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;
}

Upvotes: 7

Fredrik
Fredrik

Reputation: 2016

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.

Upvotes: 0

g.d.d.c
g.d.d.c

Reputation: 47988

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

Upvotes: 8

Brian Fisher
Brian Fisher

Reputation: 23989

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.

Upvotes: 1

Related Questions