I'm wondering because I want to store something other than pre-defined keywords that are typically assigned to rel... and I just wanted to know if this is valid XHTML Strict or not.
From what I can say, in the DTD (can be downloaded from here) :
The <link> tag is defined as :
<!ELEMENT link EMPTY>
<!ATTLIST link
%attrs;
charset %Charset; #IMPLIED
href %URI; #IMPLIED
hreflang %LanguageCode; #IMPLIED
type %ContentType; #IMPLIED
rel %LinkTypes; #IMPLIED
rev %LinkTypes; #IMPLIED
media %MediaDesc; #IMPLIED
>
So, the rel is defined as %LinkTypes;.
Same for the <a> tag :
<!ELEMENT a %a.content;>
<!ATTLIST a
%attrs;
%focus;
charset %Charset; #IMPLIED
type %ContentType; #IMPLIED
name NMTOKEN #IMPLIED
href %URI; #IMPLIED
hreflang %LanguageCode; #IMPLIED
rel %LinkTypes; #IMPLIED
rev %LinkTypes; #IMPLIED
shape %Shape; "rect"
coords %Coords; #IMPLIED
>
And the entity LinkTypes is defined as :
<!ENTITY % LinkTypes "CDATA">
<!-- space-separated list of link types -->
So, trying to make things short :
The rel attribute is supported, but only for <a> and <link> tags
The rel attribute can contain CDATA -- i.e. it's not restricted to a specific list of words.
Related
Can someone explain to me the difference between using passHref and using an anchor tag when setting up links between pages in Next.js?
E.g. what is the difference between:
<Link href={`/posts/${post.id}`} passHref>
<h2>
{post.id} {post.title}
</h2>
</Link>
and
<Link href={`/posts/${post.id}`}>
<a>
{post.id} {post.title}
</a>
</Link>
I tried reading about it in the documentation but could not seem to find the answer.
From the docs:
passHref - Forces Link to send the href property to its child. Defaults to false
When using <Link> wrapping a custom component and not an anchor tag, the <Link> tag must have the passHref attribute. Without this, the tag will not have the href attribute, which hurts your site's accessibility and might affect SEO.
Source
Using <a name="foobar">Hello</a> in the text mode editor and switching to visual mode and back to text editor results in 'Hello'. Using latest wordpress 4.8.2. Anchor tag itself works but not sure why the contents are moved out of the a tag. Any idea?
This is the default behaviour of TinyMCE - the default WP editor, and also used in many other applications.
The format you are using is valid according to the HTML 4.01 spec:
<a name="foobar">Hello</a>
However when you use TinyMCE to insert anchors into content, it uses the following format:
<a name="foobar"></a>
...and it appears that it enforces this structure, even if you manually add an anchor manually with text between the tag.
However, you can use any tag (not just <a>) to define the anchor point, if you need to have text in your anchor. The following example from the HTML 4.01 spec shows an id on a h2 tag being used as the anchor:
Section Two
//...later in the document
<h2 id="section2">Section Two</h2>
So if you want to keep the structure you have, you can change your anchor to
Go to foobar
[...]
<p id="foobar">Hello</a>
Note on HTML5 the name attribute of the <a> tag has been deprecated in HTML 5 - use id instead
Hope that helps :)
The following code segment for an FAQ, which uses XHTML 1.0, will not validate successfully in the W3C validator.
I’m inserting the Q&A into a definition list in order to maintain the question & answer relationship semantically. The problem is, the questions can be multiple paragraphs. And the <dt> tag, at least in XHTML 1.0, only allows for inline elements. So I can’t put a <p> tag in there without throwing an error in the W3C validator.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<dl>
<dt>
<p>This is a very long question.</p>
<p>It has multiple paragraphs.</p>
</dt>
<dd>
<p>This is the answer</p>
</dd>
</dl>
</body>
</html>
Is there a semantically better way of coding this using XHMTL 1.0 Transitional?
For reference, the latest similar thread I can find on the topic is this is What is the best way to semanticly structure a FAQ?. The thread was useful, however it does not cover multiple paragraphs in the question.
Using the dl element doesn’t seem to be appropriate.
XHTML 1.0 uses the element definitions from HTML 4.01, where the dl element is defined to be a "definition list". A list of Q&As is probably not a definition list (unless, maybe, the term to be defined is just phrased as question, e.g., "What is the definition of foo?").
HTML5 re-defines the dl element: it’s no longer a definition list, but an "association list", or "description list". It might be appropriate to use it for Q&As, and the dt element can now also contain most of the flow content elements (which includes p). So this might be suitable if you want to use (X)HTML5. (The example for dt even shows a FAQ.)
Possible alternatives, depending on the actual content and context:
Just use p and rely on textual semantics, i.e., the "?" makes clear that it’s a question. You could also prefix them with "Question:" and "Answer:" (e.g., in b).
Use a heading (h1-h6) for each Q&A. As they neither may contain p elements, you might have to use something like "Question 1" as heading content, and rely on the text again.
Which tags are can be self closing and which ones must have a closing tag in XHTML 1.0 Strict?
Example:
<br/>
<input />
Are there certain tags that must have a closing tag, can be self closing, or eigther way works in XHTML 1.0 Strict?
Every element, that’s content model is EMPTY in the XHTML 1.0 Strict DTD (i.e. <!ELEMENT element-name EMPTY>), is an empty element and “must either have an end tag or the start tag must end with />.” Namely it’s base, meta, link, hr, br, param, img, area, and input. Every other element must have an end tag.
You are asking about "EMPTY Elements" including <hr /> <input /> <img /> <meta /> <link /> which can all be closed in a single tag. Non-empty elements which should contain text or sub-elements could technically be closed this way if they have no child or text but you are not supposed to do it. For example <p></p> should not be <p /> but that could pass strict validation.
http://www.w3.org/TR/xhtml1/#guidelines
Take for instance this XHTML snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A webpage</title>
</head>
<body>
<p>
<form action="something.php" method="get">
<input type="submit" value="Hello"/>
</form>
</p>
</body>
</html>
The tree should be valid, however this won't parse correctly in a browser.
Look at the error messages that you get when you try that with http://validator.w3.org
Apart from a warning that you haven't specified a character encoding (and that it's therefore assuming UTF-8), the main error is that a <p> isn't allowed to contain non-inline content. You can either remove the <p> and </p> completely, or, move them inside the <form>.
As for 'why', it's because that's how it's defined in the schema which defines what is and what is not valid XHTML. If you look at this section of the XHTML definition you'll see that <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content.
In other words, a form can contain paragraphs, but a paragraph cannot contain forms.
According to this, because:
Line 8, Column 44: document type does
not allow element "form" here; missing
one of "object", "ins", "del", "map"
start-tag ✉
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").
Line 9, Column 40: document type does
not allow element "input" here;
missing one of "p", "h1", "h2", "h3",
"h4", "h5", "h6", "div", "pre",
"address", "fieldset", "ins", "del"
start-tag
input type="submit" value="Hello" 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").
Try using the W3C Markup Validator, which will tell your what is invalid with most (X)HTML and CSS documents.
You can't put form inside paragraph. Write like this:
<body>
<form action="something.php" method="get">
<p>
<input type="submit" value="Hello"/>
</p>
</form>
</body>
I ran a test with your HTML code through validator.w3.org and the result is that you need to swap the P and FORM tags for it to pass as valid W3C HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A webpage</title>
</head>
<body>
<form action="something.php" method="get">
<p>
<input type="submit" value="Hello"/>
</p>
</form>
</body>
</html>