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.
Related
Is there a way to change the "Exam 1" to another word like "Homework 1" by passing arguments?
If not, is there a default template I can modify?
My last resort is to modify the built html files but it's not very convenient.
The exams2html() function takes an argument template which defaults to "plain.html". This template is shipped with the exams package and contains:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exam ##ID##</title>
<style type="text/css">
body{font-family: Arial, Helvetica, Sans;}
</style>
<meta charset="utf-8" />
</head>
<body>
<h2>Exam ##ID##</h2>
##\exinput{exercises}##
</body>
</html>
The ##ID## is replaced by the ID (from 1 to n) and the ##\exinput{exercises}## is replaced by an ordered list <ol> containing the questions and optionally also the solutions. You can modify this template in any way you need and call it, say, homework.html. Then you can call:
exams2html(..., template = "/path/to/homework.html",
question = "<h4>Exercise</h4>", solution = FALSE)
which sets the template and also modifies the way the question is displayed while suppressing the solution.
Remark: The placeholders ##ID## and ##\exinput{exercises}## are a bit awkward (analogous to the placeholders in LaTeX templates for exams2pdf()) and not very flexible. It has been on my wishlist to make this more flexible, e.g., using {{mustache}} templating via the whisker package, but so far I didn't get round to tackle that.
I have a web page like the following one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<header>
<span>Logo</span>
<nav>Navigation</nav>
</header>
<main>
<h1>Page heading</h1>
<div>
Page content
</div>
</main>
<footer>
Content information
</footer>
</body>
</html>
The page structure is similar to one example in the current HTML5 draft: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element and I think it is semantically correct.
Now I would like to style this document using CSS. I would like to be the header at the top and footer at the bottom, which is, of course, easily doable. Inside the header I would like to put the logo to the right and the navigation in the center, which is also okay (e.g by using the flexible box layout model, which is in one or the other way supported by modern browsers, or by using floats).
My problems begin when I want to put the main's content heading (the h1 element) visually in the left of the header. I could do with position: absolute but such a layout is not very flexible and would break as soon as the header's or the heading's sizes change. The proposed CSS grid layout http://www.w3.org/TR/css3-grid-layout/ may be able to do exactly what I want but it is, as far as I know, only supported (somehow) in IE 10.
One simple and working solution would be to simply restructure my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div>
<h1 id="heading">Page heading</h1>
<header>
<span>Logo</span>
<nav>Navigation</nav>
</header>
</div>
<main aria-labelledby="heading">
<div>
Page content
</div>
</main>
<footer>
Content information
</footer>
</body>
</html>
This solution, while easily layoutable, however, has its full semantics only expressed via aria-* attributes and seems to go against the spirit of the HTML5 semantics (especially the main element).
While my example page may be simple, you can easily imagine a more complicated one where the visual position of many more elements are not in the same order as the flow order of the HTML5 markup (and nested so that the flexible box layout order property won't suffice). How would you solve the problem? Rewrite the HTML5 markup with non-semantic elements (e.g. divs) so that it corresponds more to the visual layout and then exchange the non-semantic elements by semantic ones (e.g. footer or main) wherever possible with the new structure?
I am running into the same conundrum as you, and I appreciate the frustration. I will attempt a negative answer, because I feel both of these positive ones (which say you can achieve both your ends) are missing the point.
Firstly, the way I see it, your principle difficulty is that CSS cannot move an element to a new container. The two answers fall into two categories:
Some are ultra-specific hacks (subjectively speaking) involving floats, negative margins, and/or absolute positioning which can move an item presentationally out of its container. These can be effective, but only in very specific cases. As your needs grow, it becomes difficult to maintain and it requires putting a rather large thinking cap on to address each new need or edge case that you had missed earlier. The answer by #jennifit attempts to move you in this direction. It is, I believe, the normal route taken by those trying hard to follow the spirit of semantic HTML5, which is admirable. But it can be a quagmire that makes you begin to ask exactly who you're maintaining your semantic purity for? Is it for the search engines, the screen readers, or ease of maintenance? I'll get back to this after the next classification.
Some are pragmatic rationalizations that claim to be equivalent semantically but are, in truth, a different semantic meaning. These are really semantic hacking in my opinion. #volker-e 's answer is an instance of this. He's right, this is an alternative markup that could work -- but, it doesn't equal the same semantic meaning. The h2 belongs in main as an h1 -- it makes no sense to move it within the page's header. In fact, you're saying that your heading is unrelated to your main content. This, in some ways, is worse than using that div you wanted to use, because you're making a false semantic relationship by grouping the page-header and site-header into the same semantically-significant header. A semantically meaningless container, such as div, for both header and main, is actually less perverse in my opinion.
So, getting back to what I said about who you're maintaining semantic purity for, this is the real philosophical question at play. There is often an obvious, effective, and maintainable solution without rationalized mis-uses of existing semantic elements or css 'tricks'. In your case, of having an item which is semantically a child but presentionally not a child, the answer is the one you've already put forth as a question:
Rewrite the HTML5 markup with non-semantic elements (e.g. divs) so
that it corresponds more to the visual layout and then exchange the
non-semantic elements by[sic] semantic ones (e.g. footer or main) wherever
possible with the new structure.
This is the right thing to do whether you're semantic-purity was intended for
accessibility: in this case you can achieve that in a non-hierarchical way with ARIA roles.
search engines: search engines still understand the old way to do things, so you're not going to get into SEO trouble if you follow older approaches to semantics.
maintenance: this is the reason most people are lured in by -- but the problem is, what's the point of maintainable HTML but unmaintainable CSS, or the other way around? you have no choice but to see your maintenance as a combination of both CSS and HTML, and you have to find the middle ground where they are both deranged equally when you run into a difficult presentational problem.
The only other possible answer, if you feel that HTML semantics are all that matter, is to accept the limitations that hierarchical HTML semantics places on your layout. The problem is, there is no way in CSS to re-create the layout hierarchy. Until that happens, you'll have to accept that HTML is both a presentational and a semantic language, and, therefore, semantics will always be a matter of "better" and "worse". Truly beautiful or rich or perfect semantics will be unachievable in many, if not most, layouts.
My approach would be the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a class="aural" href="#content">Jump to content</a>
<header role="banner">
<h1 class="site-logo">Logo</h1>
<nav role="navigation" aria-labelledby="nav-heading">
<h6 id="nav-heading">Navigation</h6>
<ul>…</ul>
</nav>
<h2 id="heading">Page heading</h2>
</header>
<main id="content" role="main" aria-labelledby="heading">
Page content
</main>
<footer role="contentinfo">
Content information
</footer>
</body>
</html>
and then go for a CSS ruleset like:
header h1,
header h2,
header nav {
float: right;
}
Diff:
You have appropriate accessible headings for page's content
You save otherwise seemingly useless div in header & main
You've got a nice HTML5 structure outline, which helps SEO.
I've included (was not part of the question) the navigational landmark roles as of WAI-ARIA 1.0 draft specification
I've included a skip link, which is still recommended best practice
Minor change: I know, charset value case is insensitive, but as you also write DOCTYPE uppercase, UTF-8 is the more correct value, see http://en.wikipedia.org/wiki/UTF-8#Official_name_and_variants
The first structure may still work if there is position:relative in < main > and using position:absolute on h1 with a z-index and a -ve margin. That way, the heading will always float on top in the same position in relation to the main content. While it may not be the best solution, I think it will not break the layout (?)
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
I have a style defined for tables. I then have a .tablestyle th { height:26px } ...
I now have a need to have a particular (one not all) th in the table auto determine its height.
<table class="tablestyle">
<tr><th>Normal Stuff</th></tr>
<tr><th>Long Stuff</th></tr>
</table>
The long stuff th needs a height of x, where x > 26px, but unknown... I've tried placing a style attribute on the th tag saying height:auto, but it doesn't seem to honor the auto assignment. If I put height: 200px in the style attribute, it works fine, going to 200px. The problem is that I really need the height to be determined based on content of the th...
I realize that I can make more specific styles and I'm fine. I'd like if possible, to simply decorate only the affected tag instead of creating a separate style.
Additional information:
This is for a tabular data input form, and we have the same need for td tags as well.
try to add !important at the end of your css attribute
height: 500px !important;
min-height: 26px;
Will work for everything but IE. For IE, I typically use some jQuery:
if ($('stuff').height() < 26) { $('stuff').height(26); }
I think, I don't have my code in front of me.
I realise that your experience is different to my own, but typically a table-cell (whether <th> or <td>) will adopt whatever height is required to display the content, regardless of the style-rules relating to height or overflow.
Are you using a doctype? I generally use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> in my pages, and the demo page (over at this page) seems to back this up.
The page there uses the following the markup:
<?xml version="1.0" encoding="utf-8"?>
<!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></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css" media="all">
table {width: 80%;
margin: 1em auto;
}
tr,th,td
{height: 40px;
}
th, td {border: 1px solid #f90;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>Names</th><th>Description</th><th>Actor</th></tr>
</thead>
<tbody>
<tr><td>Number One</td><td>The assumed leader of the Village</td><td>Perhaps Patrick McGoohan</td></tr>
<tr><td>Number Two</td><td>There are two Number Twos with repeat appearances: Leo McKern appeared in three episodes, and Colin Gordon in two. With the exception of "Fall Out", this was the result of the actors performing their roles in two consecutive episodes filmed back to back. Colin Gordon was filmed in "The General" followed immediately with "A. B. and C." McKern was featured in the series' second transmitted episode, "The Chimes of Big Ben," and then featured in the next production episode to be filmed "Once Upon a Time." Three actors who portray Number Twos also appear in other episodes, possibly as different characters — Georgina Cookson ("A. B. and C." as party guest and "Many Happy Returns" as Mrs Butterworth/No. 2), Kenneth Griffith ("The Girl Who Was Death" as Schnipps/No. 2 and "Fall Out" as The Judge) and Patrick Cargill ("Many Happy Returns" as Thorpe, and "Hammer Into Anvil" as No. 2) — although this is ambiguous, particularly in the case of Kenneth Griffith's character.</td><td>Patrick McGoohan</td></tr>
</tbody>
</table>
</body>
</html>
Conceivably, you could wrap the cell contents in a <span> and use that to enforce a particular height/width; but it does serve to complicate your markup somewhat.
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>