When I put this in JsFiddle, the closing tag of the form and the two closing tags of the divs in the form are both red in my fiddle which seems to indicate that something is wrong. When I put it in w3.orgs validator, it gave errors on those. The errors were
<!DOCTYPE html>
<body>
<link type="text/css" style="stylesheet" src="first.css">
<h1>Great Master</h1>
<div id="hello">
<div>We like destroying satan beards</div>
<div>We want home</div>
</div>
<aside id="list">
<div><strong>Super Fun</strong></div>
<ul>
<li>I love fun</li>
<li>This is Great</li>
</ul>
</aside>
<form>
<div>
<input type="text" name="happy">
<aside id="happy"> Put a number in here to check if it is happy.</aside>
</div>
<div>
<input type="text" name="perfect">
<aside id="perfect"> Die </aside>
</div>
<input type="submit">
</form>
</body>
The Errors from W3.org were
Error Line 3, Column 6: Element head is missing a required instance of child element title.
<body>
Content model for element head:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element.
Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element.
Error Line 12, Column 17: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<div><strong>Super Fun</strong></div>
Contexts in which element div may be used:
Where flow content is expected.
Content model for element ul:
Zero or more li and script-supporting elements.
Error Line 20, Column 6: Stray start tag form.
<form>
Edit
ok, I've made some changes to my HTML. but I am still getting the erros about the stray start tag form.
It tells your right there in the output from W3: No div in li.
And your second form is not within body.
Also you're missing head with included title tags for a complete HTML page.
Well for starters you cant have the div elements within the lists.
Related
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! đź‘Ť
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
I did not realize is it bad or not, according to the W3C rules about HTML semantic writing - how we should write the button element with descended elements?
In way, like this one:
<button>
<div>
<span>'hi'</span>
</div>
</button>
or only this:
<button>'hi'</button>
I tested your code in W3C Validator & the error shown is
Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
Basically the specification does not allow that.
It might work for you but it's not the best practice.
As you can see here button must be no interactive content descendant.
You also can verify your html in here
Nested tags within a <button> is not valid and returns the following when tested:
Element div not allowed as child of element button in this context.
Non-nested tags is the correct way to go.
See for your self if you like. I used the follow HTML to test:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button test HTML</title>
</head>
<body>
<button>
<div>
<span>'not valid'</span>
</div>
</button>
<button>Valid</button>
</body>
</html>
The button element may contain elements that are phrasing content without also being interactive content. In other words: elements that get used on the intra-paragraph level (sometimes called inline elements), and that don’t allow user interaction.
For example, this means it may contain span elements, but not div elements. So this is valid:
<button>
<span>'hi'</span>
</button>
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.
I noticed in my element inspector (both chrome and firebug) that the html was parsed different from how i had intended it to be parsed.
Some elements ended up outside of their parent element, often this comes from broken html (unclosed tags etc.).
I threw the code in the W3C validator and narrowed the html down to just a few lines.
My HTML looks like:
<html lang="en">
<head>
<title>title because we must</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
<div>test</div>
</p>
</body>
</html>
The error i get is
Line 10, Column 6: No p element in scope but a p end tag seen.
Since the HTML5 validator is still experimental i figured i should try the XHTML 1.1 validator as well. It then mentions that I might be trying to put a block element within a inline element. This shouldn't be the case since both "p" and "div" are block elements by default.
Can anyone explain this behavior?
A p element cannot contain a div element
The end tag of the p element is optional
Therefore:
<p>
<div>test</div>
</p>
Means:
<p></p>
<div>test</div>
</p>
So you have an end tag for an element that is no longer open.
Since the HTML5 validator is still experimental i figured i should try the XHTML 1.1 validator aswell. It then mentions that I might be trying to put a block element within a inline element.
Yes, in the extended explanation of the error it mentions that you might be trying to put a block element within a inline element.
The error message itself reads:
document type does not allow element "div" here
which is quite clear.
You cannot place a div element inside a paragraph <p> tag.
This is invalid:
<p>
<div>test</div>
</p>
The correct way would be to wrap the div around the p.
we can not put <div> inside <p> ,as it is inline element and doing so is not recommended as per w3c standards,still if you do so browser will show that div out side p tag like this
<p></p>
<div>div contents<div>
<p></p>
for reference see following
http://www.w3.org/TR/html4/sgml/dtd.html
http://www.w3.org/TR/html4/sgml/dtd.html
<!ELEMENT P - O (%inline;)* -- paragraph -->
I'm just wondering what are you thinking about DIV-tag inside FORM-tag?
I need something like this:
<form>
<input type="text"/>
<div> some </div>
<div> another </div>
<input type="text" />
</form>
Is it general practice to use DIV inside FORM or I need something different?
It is totally fine .
The form will submit only its input type controls ( *also Textarea , Select , etc...).
You have nothing to worry about a div within a form.
It is completely acceptable to use a DIV inside a <form> tag.
If you look at the default CSS 2.1 stylesheet, div and p are both in the display: block category. Then looking at the HTML 4.01 specification for the form element, they include not only <p> tags, but <table> tags, so of course <div> would meet the same criteria. There is also a <legend> tag inside the form in the documentation.
For instance, the following passes HTML4 validation in strict mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>
You can use a <div> within a form - there is no problem there .... BUT if you are going to use the <div> as the label for the input dont ... label is a far better option :
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
It is wrong to have <input> as a direct child of a <form>
And by the way <input /> may fail on some doctype
Check it with http://validator.w3.org/check
document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
<input type="text" />
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Your question doesn't address what you want to put in the DIV tags, which is probably why you've received some incomplete/wrong answers. The truth is that you can, as Royi said, put DIV tags inside of your forms. You don't want to do this for labels, for instance, but if you have a form with a bunch of checkboxes that you want to lay out into three columns, then by all means, use DIV tags (or SPAN, HEADER, etc.) to accomplish the look and feel you're trying to achieve.
Definition and Usage
The tag defines a division or a section in an HTML document.
The tag is used to group block-elements to format them with
styles.
http://www.w3schools.com/tags/tag_div.asp
Also DIV - MDN
The HTML element (or HTML Document Division Element) is the
generic container for flow content, which does not inherently
represent anything. It can be used to group elements for styling
purposes (using the class or id attributes), or because they share
attribute values, such as lang. It should be used only when no other
semantic element (such as or ) is appropriate.
You can use div inside form, if you are talking about using div instead of table, then google about Tableless web design
As the others have said, it's all good, you can do it just fine. For me personally, I try to keep a form of hierarchical structure with my elements with a div being the outer most parent element. I try to use only table p ul and span inside forms. Just makes it easier for me to keep track of parent/children relationships inside my webpages.
I noticed that whenever I would start the form tag inside a div the subsequent div siblings would not be part of the form when I inspect (chrome inspect) henceforth my form would never submit.
<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
I figured that if I put the form tag outside the DIVs it worked. The form tag should be placed at the start of the parent DIV. Like shown below.
<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
Absolutely not! It will render, but it will not validate. Use a label.
It is not correct. It is not accessible. You see it on some websites because some developers are just lazy. When I am hiring developers, this is one of the first things I check for in candidates work. Forms are nasty, but take the time and learn to do them properly
No, its not
<div> tags are always abused to create a web layout. Its symbolic purpose is to divide a section/portion in the page so that separate style can be added or applied to it. [w3schools Doc] [W3C]
It highly depends on what your some and another has.
HTML5, has more logical meaning tags, instead of having plain layout tags. The section, header, nav, aside everything have their own semantic meaning to it. And are used against <div>