I'm in the process of marking up an historical manuscript which has been translated from German into English. On the web page I will be providing both languages side by side. Is there an accepted way to markup such a scenario?
I was thinking of splitting the translation blocks using the section tag and providing each with a lang attribute. However semantically this fails at communicating that one section roughly equates to the other.
Any thoughts on this would be greatly appreciated.
Without an example of the data it's hard to say; but is there a reason that you couldn't section them together, and provide the languages within sibling blockquotes; these then carry the context correctly, and can be styled to appear side by side.
<section>
<blockquote lang="en">English</blockquote>
<blockquote lang="de">Deutsch</blockquote>
</section>
I think that table could be used here to relate the original text to its translation:
<table lang="en">
<tr>
<th>Original/English</th>
<th>Translation/German</th>
</tr>
<tr>
<td><blockquote>…</blockquote></td>
<td lang="de"><blockquote>…</blockquote></td>
</tr>
</table>
(assuming that both versions are actually quoted from a different source)
It would be possible to divide the original and the translation into sections or pages or paragraphs (or whatever), if useful, each represented by a separate row (tr).
See also my answer to a similar question.
Note that by using blockquote the headings of the manuscript (and the translation) are not part of the document outline.
Related
Is there any way to markup Item properties placed inside a child Item (and therefore out of it's scope)?
I'm using microdata and schema.org to mark up some web page with. and I have a code like this:
<body itemscope itemtype="http://schema.org/WebPage">
<header itemscope itemtype="http://schema.org/WPHeader">
<a href="index.html">
<img id="logo" src="xxx" alt="xxx" itemprop="primaryImageOfPage">
</a>
</header>
<!--the rest of the page-->
</body>
I have the logo inside the WPHeader Item and I want it to be the primaryImageOfPage for the WebPage Item. I know i can use Itemref to include properties which are out of the item's scope, but like this you don't take this property out of the child item's scope. That's really a problem if both items can have the same property, such as name or description.
This is only an example to explain the problem I have. By the moment I solve it using itemref...but there has to be a better way to do that.
I know there's no need to markup everything, I just want to know which is the best way to avoid having this problem.
Microdata is RDFa rip-off constrained to be relevant to search cross-cutting concern for semantic fragments. It thus assumes the advanced scoping abilities of CURIEs is discardable. For wholeness that good quality domain-specific content pages exhibit, RDFa alongwith vocab covering domain-specific aspects accordingly is the ultimate way as yet. While search providers dominated HTML5 spec to make microdata part of standard, as the Web keeps growing more semantic, the differences between both are ending up as mere matter of "what's in a name?"
What are people's opinions on semantic HTML for confirmation, error and warnings messages?
Currently I have something simple like:
<div class="message message-warning">
<h3>Message Title</h3>
<p>Message text</p>
</div>
Whereby the message-warning class gets replaced by message-confirmation or message-error if the message is a different type.
Is there a more semantic way of marking this up?
May I suggest <figure>?
Excerpt from HTML5 Doctor (and they, from W3C):
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
Lets answer the questions first:
Is such a dialog a single unit? Yes
Is such a dialog self-contained? Yes
Can such a dialog be moved away from the document without affect the document meaning? Yes
Yes, it fits a <figure> perfectly.
And, the <figcaption> is especially good for title bars / headings.
So, I'd go with <figure> without even trying to look further:
<figure id="dialog-box" class="warning">
<figcaption>Message Title</figcaption>
<p>Message text</p>
</figure>
Use the <dialog> element, and call .show() instead of .showModal(), or give it the open attribute if rendering server-side.
As long as it’s not shown modally, it won’t block interactions with other page content.
Old answer (before <dialog> was a thing):
Alerts are one of the semantics that ARIA added to HTML, because there's no straightforward way of doing in "pure" HTML. Hence:
<aside role="alert">
<h2>Message Title<h2>
<p>Message Text</p>
</aside>
I personally like to use <aside> as the element to slap the role on — it's technically not part of the page content, as described by Jeff Lindblom's answer.
Having a "semantic" CSS selector for this is easy enough:
[role="alert"] {
font-size: 2em; /* or what have you */
}
The <figure> idea is interesting, but I don't think it fits here. What it's missing is the actual content to justify use of the tag. According to the spec, <figure> represents a "unit of content" - meaning an image, diagram, code block, etc. that may optionally have a caption for this content (<figcaption>). It would be a stretch to say that the message outside the <figcaption> represents an appropriate unit of content.
We should also be cautious of using <h#> tags in this instance, as the message is secondary content, and should probably not be part of the document outline.
One could argue, under the revised spec, that an <aside> would be appropriate. It's now considered "tangential content" when used outside an <article>.
<strong> would be appropriate for the "title" of the message, since it's a semantically more important part of the message, but not a document header. So the code might look so:
<aside class="warning-or-whatever">
<strong>Message Title</strong>
<p>Message Text</p>
</aside>
One could also argue, since there's nothing specifically created for such a feature, that a good old-fashioned, semantically meaningless <div> might be the best element. I guess it comes down to how "tangential" you feel your messages are.
Thanks,
Jeff
No. There is no element in HTML that denotes a confirmation, error, or warning message.
Technically, the samp element has been defined as “sample output from programs, scripts, etc.” in HTML 4.01 and in HTML 3.2, though originally in HTML 2.0 as “sequence of literal characters, typically rendered in a mono-spaced font” and being somewhat redefined in HTML5 as “(sample) output from a program or computing system”. So its meaning is rather vague, and it’s not used much, so there is no real point in using it. But it might be argued that it is acceptable to use samp markup for any message from a program. It is a text-level element, so you would need to use it separately inside h3 and inside (any) p, more or less breaking the structure.
It might also be said that the messages are quotations from an external source, so they could be wrapped inside blockquote.
The use of h3 vs. some other markup isn’t really a semantic question, but structural: is this a heading for some content at the 3rd level of nesting?
I think the strong element is an appropriate element for such messages.
You could use several strong elements to indicate the importance of the message:
<strong>Login successfully.</strong> <!-- confirmation -->
<strong><strong>Wrong login data.</strong></strong> <!-- warning/error -->
If it’s stand-alone message for which a heading is warranted, use a section element instead of a div. In case of serious errors that apply to the whole page, it should be the first element on the page.
Various variants are possible:
<section class="message message-error">
<h1><strong><strong>Error:</strong> Wrong login data.</strong></h1>
<p>The username and/or password is wrong. Try …</p>
</section>
<section class="message message-error">
<h1>Error</h1>
<p><strong><strong>Wrong login data.</strong></strong></p>
<p>The username and/or password is wrong. Try …</p>
</section>
<section class="message message-error">
<strong><strong>Wrong login data.</strong></strong>
</section>
<section class="message message-error">
<p><strong><strong>Wrong login data.</strong></strong> Try …</p>
</section>
Which one to use depends on the kind of message, if the exact error is know, if additional help text is provided, and if several message could come up at the same time.
Note that you probably don't want to use a heading for messages that apply to a single input element (e.g. when the user didn't fill out a required field or entered wrong content etc.), as these error messages should be in the corresponding label or directly next to the input element.
For accessibility, you should have a look at WAI-ARIA. Maybe aria-live="assertive" might be an appropriate way to mark error messages.
If you want to go semantic, you can use a semantic-web approach by making an ontology for messages and warnings and use RDFa to embed it in your HTML.
At the moment, HTML5 standards create titles/headings automatically from the first heading it finds in the article/section/nav etc. The problem I have is seeing why <caption> shouldn't be treated the same way as headings (for the purpose of the outline).
Take the below code for example. It's what you have to resort to in order to have a titled section in the document outline:
<table>
<caption>Results from zombie duck experiment</caption>
<h2 style="display: none;">Results from zombie duck experiment</h2>
<tr>
<td>FAILURE</td>
<td>FAILURE</td>
</tr>
</table>
(Which produces this outline: http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Froncya.com%2Ftransfer%2FHTML5CaptionDocumentOutline2.htm)
I understand why that works; HTMLDoctor go so far as to say that it is the recommended way of doing things:
For accessibility reasons, we recommend each sectioning element have a heading, even <aside> and <nav>. If you don’t want these headings to be visible, you can always hide them with CSS. --http://html5doctor.com/outlines/
Sure, but why not this?:
<table>
<caption>Results from zombie duck experiment</caption>
<tr>
<td>FAILURE</td>
<td>FAILURE</td>
</tr>
</table>
(Which produces this failed outline: http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Froncya.com%2Ftransfer%2FHTML5CaptionDocumentOutline1.htm)
I'm assuming that the W3C made a conscious decision and the only ideas I have are that:
Tables, while they do have an ending tag, aren't really used as 'wrappers' like div, span, article, section, nav and similar. So in that sense, they don't define a 'surrounded section'
Headings are headings and captions are not headings (...which doesn't answer much)
Typical captions don't make for suitable titles (I disagree with this)
As for number 3, I think that a typical caption would still be useful as a title in a document outline. Regardless of wether they're on top of the table or below. Heck, I can't even see why it would be worse than nothing. Take these possible captions for example- I reckon they would all be appropriate document outline section titles:
Results from zombie duck experiment
Figure 3b
Windows 8 Region Pricing
Which brand contains what?
Cheat codes
Colours
Abraham Lincoln's attire at different periods of history
It would sure make sense to me.
In HTML5, it's intended that the caption contains not just a brief title, but descriptive prose explaining the table. The spec provides one example of use of caption:
<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>
This would not make for a good title for the document outline.
I would suggest that you put the <h?> inside the caption if you want it to appear in the document outline. In the example above, this would be suitable:
<caption>
<h2>Table 1.</h2>
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>
or in your example:
<table>
<caption><h2>Results from zombie duck experiment</h2></caption>
<tr>
<td>FAILURE</td>
<td>FAILURE</td>
</tr>
</table>
Let's say I have the following layout on some pages:
Title: Some Title
Author: Some Author
Author Date of Birth: Date of birth
Notes:
Left side text is right-aligned and bold.
Used on several different pages.
The right side can contain input controls at some point.
What would be the most appropriate method to apply in this situation? I can think of a few options (assume CSS applied in external style sheet):
Table
Simple, easy, but I'm not sure this would be considered a good use of tables.
<table>
<tr>
<td>Title</td>
<td>Some Title</td>
</tr>
</table>
Div + Classes
I feel like this is a case of divitis and classitis rolled into one.
<div class="information">
<div class="title">Title</div><div class="value">Some Title</div>
</div>
Container Div
This feels more like the right path but I'm not sure.
<div class="information">
<strong>Title</strong> <span>Some Title</span>
</div>
Suggestions?
I think a good semantic choice here is the dl (description list) element.
http://developers.whatwg.org/grouping-content.html#the-dl-element
<dl>
<dt>Title</dt>
<dd>Some Title</dd>
<dt>Author</dt>
<dd>Some Author</dd>
<dt>Author Date of Birth</dt>
<dd>Date of birth</dd>
</dl>
Use a table, this is one of the few instances where using a table actually isn
't all that wrong. You're not using it for layout but text markup.
Then apply a class to every first column and in css make that class have text-align: right; which applies to that column.
I think you're right in you saying you want to use a table, but don't want to use. In this case i don't think a table is correct either. I personally only use tables if i need to organize data nicely. Because you have so much, a bunch of floated divs everywhere is more of a hassle then just using a table.
Because this is only two columns I would say use use two divs with floats or use two spans, instead of strong use a span and then style it with css.
This is clearly a good example of when to use tables.
It's tabular data.
Use ths for the first columns cells to be able to style it.
I even think ths are bold by default. Not sure about all browsers though so wouldn't hurt to style them bold to be sure :).
A table is a means of arranging data in rows and columns.
And this is what you are doing.
Definition list would be semantically correct.
<dl>
<dt>Title:</dt>
<dd>Some Title<dd>
<dt>Author:</dt>
<dd>Some Author</dd>
<dt>Author Date of Birth:</dt>
<dd>Date of birth</dd>
</dl>
See W3C for more details - http://www.w3schools.com/tags/tag_dl.asp
I need ur suggestion in the following scenario.
Lets say I have an UI something like
Col1 Col2
A D
B E
C F
Now to get this right now in my HTML I am using ..like
<div class="col1">
<div>A</div>
<div>B</div>
..........
</div>
<div class="col2">
<div>D</div>
<div>E</div>
..........
</div>
But here I am using too much div..is it OK as per standard XHTML or should I use <li>?
Can somebody suggest with proper explanation, or maybe something else?
Note: No use of Table
Thanks.
It looks to me like you are trying to display tabular data which the table element works great for and is the intended use.
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
If you really don't want to use table, I'd use the div element like you did in your example. But in the end you will realize that what you are trying to accomplish is simulating an element that already exists - table.
You should keep in mind that when you are using div as a table it won't look well when you disable CSS or viewing it with an older mobile browser (that don't support floats well).
You could maybe use a definition list, although that is more suited for key / value pair data, though that could be the case in your situation, I can't tell.
If not, like Manticore says, just use tables: http://giveupandusetables.com/
I would second Manticore's statement. Tables should also be used for tabular data (data displayed with rows and columns). Everybody gets up on their high horse about using divs for layout instead of tables, but that doesn't mean that tables should be abandoned. What you are doing is NOT layout; it is structuring a particular segment of content, and thus you should use a table tag. Plus, some advantages:
You can use around the s that contain tags to create a table header. If the user prints the table and it extends beyond one page, the content in the will be printed at the top of every new page. The same is also true of the tag. One slight difference with the though: Content inside should be in the format of Content of cell 1 - don't use the tag inside of s except for those in the .
Divs are practically impossible to layout in a table format. They are useful for page design layout, but not necessarily for tabular data. Plus, if you're creating an interactive page in which the user will be adding more data, you will find yourself having a very difficult time figuring out what the placements of the divs are.
The 'semantic standard' would definitely be to use tables. As others have said, this is your basic tabular data. That's what they're for, end of story.
However, if you can't use tables, then I would say the next most semantically meaningful structure would be a list, because it allows you to define relationships between the elements, like so:
<ul>
<li>Col1
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul></li>
<li>Col2
<ul>
<li>D</li>
<li>E</li>
<li>F</li>
</ul></li>
</ul>
Then, worst of all would be divs. 'Worst' because they have no semantic meaning. Tag-soup, basically.