I would like to go to the DIV of a particular page from a different page. Is that possible?
I tried Hello
but it just goes to file.html#home
thanks
C.
I have in my file.html but it keeps getting redirected to file.html#home instead.
file.html will need an element with an id="product" attribute. name is deprecated for <a> tags and shouldn't be used.
<div id="product"></div>
With HTML 5, you need to simply add an id attribute to your <div> with a value of product. This needs to be a unique id attribute within the page (for all elements):
<div id="product">
See the working draft.
In HTML 4.01 you need to use an anchor tag with a name just above your target div, or any other element with an id attribute in the other page:
<a name="product"></a>
<div>...
See the HTML 4.01 spec.
Note: The name attribute has been deprecated in the XHTML 1.0 spec.
So, this would be a better option, as it would work for HTML 4.01, XHTML 1.0 and HTML 5:
<div id="product">
Don't use an anchor. That is outdated. Just give the DIV the id product:
<div id="product">...</div>
Related
I am creating some HTML fragements, the fragements will be wrapped in a DIV tag - ie its parent.
I do not have access to the DIV parent tag.
The fragment could be anything.
I want to be able to distinguish between different fragments. My idea was to insert a html element as metadata as the first element in the fragement.
The parent div can then identify what type it is by searching its first child for the meta information.
ie
<div class="parent">
<metatag fragement="fragementid"/>
<p>...</p>
<p>...</p>
</div>
My question is, is there a HTML tag for this purpose?
Go through: http://www.w3.org/tr/html401/struct/global.html for better understanding on HTML structure.
Still you can add meta information to your tags by using an additional hidden tag.
Example:
http://jsfiddle.net/w49g19bw/
<p data-meta="HN SPECS" class="hidden"></p>
.hidden {
display:none;
}
I was inspecting the way a certain webpage alternated between colors in their divs and found this:
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
<div class="row8 inline clearfix" id="light-orange">...</div>
<div class="row8 inline clearfix" id="light-pink">...</div>
Thinking this was an example of HTML that wouldn’t validate, I ran it through the W3C validator. It did have errors, but none were regarding non-uniqueness of the ids.
Everything I’ve read has stated that ids must be unique within a webpage. What’s the real story here?
You should never have duplicate IDs in a webpage because what gets bound or applied to an element by ID will only get applied to the first ID it finds. Hence you will only be applying CSS or binding an event to one of the elements with a given ID. If you have a repeated ID, it probably means that you should be using a class instead.
HTML 5 specification says that ID must be unique in its home subtree which is basically the document if we read the definition of it.
Found that on google. If you want to alternate colors, use classes. IDs should always be unique.
Well, if you add <!doctype html> (as being told here) to that code of yours, you will get an avalanche of Duplicate ID errors (as being told here). Don't worry ;)
tl;dr: id must be unique.
When validating this page by directly inputting its HTML, the validator reports an (unrelated) error that stops the reporting of all following errors:
Cannot recover after last error. Any further errors will be ignored.
(I’m not sure why this error is not reported when validating by entering the URI.)
For questions like these (Must id be unique?), it’s best to check the relevant specification, i.e., HTML5 in your case: The id attribute
Or you could validate a minimal example, e.g.:
<!DOCTYPE html>
<html>
<head>
<title>#id test</title>
</head>
<body>
<div id="light-orange"></div>
<div id="light-pink"></div>
<div id="light-pink"></div>
</body>
</html>
The W3C validator reports:
1 Error
Duplicate ID light-pink.
I have encountered an example of HTML5 that has an absence of a number in the heading tag unlike the normal <h1> to <h6> tags.
Is this an incorrect use of HTML? I believe that this use of the heading tag is incorrect, I did want to verify though.
<article>
<h>Subheading</h>
This is some content
</article>
There is no <h> element in HTML. There was one proposed for XHTML 2, but that never took off.
He can "create" new tags in HTML and then put as selector in CSS. But this is not a header though.
Ran into a problem on my web page where the footer in the master page wasn't displaying correctly for one particular page. On that page, I had a
<div style="clear:both" /> at the bottom.
After banging my head at it for a while, I saw that all I needed to change to get the footer to show up properly was to change that line to:
<div style="clear:both"></div>
I don't understand why writing it this way should produce a different result. Aren't they semantically equivalent? I checked and double-checked that this was the only change I made. Flipping back and forth between the two would change the behavior of the footer.
So my question is... are those not equivalent? What's the difference between them?
Edit: The odd part is, they both do what I want to the stuff above them in the page. I mean, in the self-closing div tag's case, if I remove it entirely the page definitely reacts, so it must be doing SOMETHING with it and not just ignoring it completely.
<div /> is not a valid markup. A self-closing tag is not permitted.
You need to use the full version <div></div>.
A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.
According to the HTML 4.01 spec, section 7.5.4 ("Grouping elements: the DIV and SPAN elements):
Start tag: required, End tag: required
So a self-closing <div> tag (like the first example you specified: <div />) is not valid.
If I remember right - <div /> is invalid. Use <div></div> if you want it to work everywhere. The closing tag is required, so doing things like <div class="Clear" /> won't work.
All grouping elements will behave the same way. You'll see the same behavior with both DIV and SPAN.
EDIT: Found this link while looking at the link in the answer posted by #Donut - its a matrix that shows which elements have an optional closing tag requirement (among other things.) Looked interesting, so I thought I'd post it here to share with everyone else as well.
It depends on the DOCTYPE that you're using.
For XHTML, which is XML, the two tags are equivalent. You would signal this to the browser by including one of the following DOCTYPEs as the first line in your page:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For HTML 4.01, which is what all (?) browsers assume when there's no DOCTYPE, certain tags must be expressed as open-close. Most of the block-level tags require this, including such non-markup tags as <SCRIPT>. If you look at the WDG HTML documentation, you'll see whether a particular tag requires open-close or can be expressed as an empty tag, via the "syntax" item:
Syntax <DIV>...</DIV>
self terminating tags are valid in XML, but not in this case for HTML
The first option is not valid html; the second is. <div /> really confuses IE, so always go for <div><div/>.
You would not be able to put content in a "<div />".
<div /> is valid depending upon your DOCTYPE It's valid XHTML Transitional & XHTML Strict
DEMO: http://wecodesign.com/demos/stackoverflow-1411182.htm
VALIDATION: http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
If you want to use a single tag and not have a useless empty <div> on the page, try using a <br /> for your clears.
<style type="text/css">
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
line-height: 0 !important;
font-size: 0 !important;
}
</style>
<br class="clear-fix" />
Some may question my usage of !important here; however, this is the reason why it exists! We know that when we clear something, we want it to do a specific task no matter what.
Take for example:
<style type="text/css">
.hidden {display: none;}
#foo {display: block;}
</style>
<p id="foo" class="hidden">You can still see me</p>
In this particular case, you would add !important to your hidden class, because it's pretty clear that it's supposed to hide stuff no matter what
Visual Studio doesn't like on-page anchor tags:
Validation (XHTML 1.0 Transitional):
Attribute 'name' is considered
outdated. A newer construct is
recommended.
I'm using name attributes in this way…
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
...
<body>
...
<p>On this page…</p>
<ul>
<li>Section One</li>
...
</ul>
...
<h2><a name="one">Section One</a></h2>
...
</body>
</html>
Is there really a more-modern way of doing this? Or is Visual Studio full of crap?
You should use the id attribute instead. Works the same way, and you don't need an artifical <a name=...>, but simply
<h2 id="one">Section One</h2>
name attributes are deprecated in XHTML 1.0 - you can use an id attribute in the same way though, see Fragment Identifiers in the HTML Compatibility Guidelines of the XHTML spec.
So you can simply use
<h2><a id="one">Section One</a></h2>
But note that the 1.0 spec recommends playing it safe with something like this:
<h2><a name="one" id="one">Section One</a></h2>
However, your fragment uses XHTML 1.1, where the name attribute has been entirely removed from a and map elements - so you can only use an id.
I believe the modern approach is to use the id attribute, which would be evaluated as an anchor. For example, if you changed
<h2><a name="one">Section One</a></h2>
to
<h2><a id="one">Section One</a></h2>
You would still address it as page.html#one.
You can also link on a section header :
Table of Contents
<P>
Introduction<BR>
Some background<BR>
On a more personal note<BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...
[...]
</P>
Source: http://www.w3.org/TR/REC-html40/struct/links.html
I believe the proper way to do it is <a id="one">
Yes it is outdated. You should replace with the "id" attribute.
Quoting w3schools page:
"The id Attribute Replaces The name Attribute
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead."
http://www.w3schools.com/Xhtml/xhtml_syntax.asp
name= attributes are for labeling elements in a form, and can only be used on <form> elements (input, textarea, select etc). For everything else, ID= is used. Exactly why the W3C folks thought two different ways of naming an element (with different sets of allowable characters) were needed is not readily known.
But here http://www.w3.org/TR/html4/struct/links.html#h-12.2.3 I read this: "Some older user agents don't support anchors created with the id attribute." So?
Until <a name="..."></a> is no longer supported by the (X)HTML standard you are using--and not just deprecated--it may be safest to use both name and id on anchors linking to a part of the same page. From the W3C's XHTML 1 spec:
In XML, URI-references RFC2396 that end with fragment
identifiers of the form "#foo" do not refer to elements with an attribute name="foo"; rather,
they refer to elements with an attribute defined to be of type ID, e.g., the id attribute in HTML
4. Many existing HTML clients don't support the use of ID-type attributes in this way, so identical
values may be supplied for both of these attributes to ensure maximum forward and backward
compatibility (e.g., <a id="foo" name="foo">...</a>).