div not allowed as child element of button

Question

I've read several topics on this and still don't understand a valid alternative.Visually it appears just like I want it, but I'm getting validation errors and I don't know how to change it. Here's a simple version of what I'm using:

<button type="submit" onclick="window.location.href='events.html'">
    <div id="box1" class="eventContainer">
    <h3>CLICK ON ME!</h3>
    <p>Description</p>
    <img>
    </div>
</button>

It looks what you're trying to solve has been answered here : http://stackoverflow.com/questions/15885444/why-cant-a-button-element-contain-a-div — MrDeveloper, Jun 24 '15 at 07:55
@tp77 Can you provide the **css** of **eventContainer** class. Also the use of **id="box1"**? — Alberto I.N.J., Jun 24 '15 at 08:15
Why not use a link instead of a button? Then you can use block elements as children and it will be more accessible as it will work without js — Pete, Jun 24 '15 at 08:31

OBender · Answer 1 · 2015-06-24T08:05:55.563

6

The issue is that a button can contain only Inline Elements, and div is a Block Element. alternative is to use span

<button type="submit" onclick="window.location.href='events.html'">
    <span id="box1" class="eventContainer">
       <h3>CLICK ON ME!</h3>
       <p>Description</p>
       <img>
    </span>
</button>

Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The element is a block-level element.

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>

Inline Elements An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline element inside a paragraph.
Examples of inline elements:

<span>
<a>
<img>

The < div > Element

The element is a block-level element that is often used as a container for other HTML elements.

The element has no required attributes, but style and class are common.

When used together with CSS, the element can be used to style blocks of content:

Example

<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

More info can be found here

edited Jun 24 '15 at 08:05

answered Jun 24 '15 at 07:58

OBender

2,492
2
20
33

3

**h3** and **p** tag is not allowed inside **span** tag. **h3** and **p** tag are **block elements** and **span** tag is a **inline element**. **Block elements** are not allowed inside **inline elements**. – Alberto I.N.J. Jun 24 '15 at 08:05
Hi OBender, thanks for your response. I'm trying to create a large box that is actually a button on the page. I actually have 3 boxes in a row. Each a button. When i change to span, I get the error that now h3 or p etc. cannot be children of the span. :( I'm at a loss on how to do this. – tp77 Jun 24 '15 at 08:08
@AlbertoI.N.J. interesting fact. could you provide a source? – mc9 Jun 25 '18 at 10:54
1

@SungWonCho Here's the [link](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Conceptual_differences). Under **Content model**. – Alberto I.N.J. Jun 27 '18 at 02:28
One Error was replaced by another: > Error: Element h3 not allowed as child of element span in this context. – alexander.khmelnitskiy Sep 19 '22 at 07:44

score 0 · Answer 2 · answered Jun 24 '15 at 08:09

0

I'm not sure, what validation errors you see. I created a minimal example from your code and it is valid. (Checked with https://validator.w3.org/check)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Button</title>
</head>
<body>
<form method="post" action="http://example.com/form/">
<button type="submit" onclick="window.location.href='events.html'">
    <div id="box1" class="eventContainer">
    <h3>CLICK ON ME!</h3>
    <p>Description</p>
    <img src="http://example.com/button.png" alt="my button">
    </div>
</button> 
</form>
</body>
</html>

answered Jun 24 '15 at 08:09

Sascha

986
10
30

**Block elements** are not allowed inside **inline elements**. In this case, the **button** and **img** tags are **inline elements** while **div**, **h3** and **p** tags are **block elements**. So, it's still invalid. – Alberto I.N.J. Jun 24 '15 at 08:13
1

Try validating it against html5 and you will see the error – Pete Jun 24 '15 at 08:28

div not allowed as child element of button

2 Answers2

The < div > Element

Linked

Related