I'm building a template for listings in which 90% of the text is the same, and just the item title and description is different. I don't want to have to mess with or edit the text that is the same in each one but at some point it references in the title which is different.
Is there anyway in just HTML5 or CSS3 that I could pull the title used previously to dynamically fill the content out? Almost as if it was a variable?
Eg...
Title Here (to be used again)
Unique description here
Content Thats Always The Same
You are looking at Title Here etc etc etc.
No Javascript or other languages please - at if can't be done in a hacky way with CSS3 or HTML5 at worst the most basic javascript available, but mostly javascript is blocked on the site i'm coding for.
If we're to do it with very simple Javascript here is example code from project...
<div class="content-inner block4 s-text" style="margin-top:-25px">
<h3>Title of Item.</h3>
<p style="text-align: justify;">This is all about the item etc etc etc</p>
<div id="WhatsIncludedBlock">
<div class="content-inner block4 s-text">
<h3>What's Included?</h3>
<p class="para">
<ul><a style="text-decoration: none; cursor: default;"><img style="padding-right: 7px; vertical-align:-1%;" src="http://images.com/bullet2.png" width="10px" height="10px" float="left" alt="bullet point" class="hover"></a>Brand new "Title of Item" direct from supplier.</ul>
Where "Title of Item" in the second block should be automatically pulled in from the H3 tag (which is unique, not all H3 tags will be the same obviously, we'd need to add whatever variable tags required here to make it copy later on)
As others have said, not possible with HTML5 or CSS3 unfortunately, so I ended up using limited javascript which should pass.
<script language="javascript">
var title1
title1 = 'Title of Item';
</script>
Called with
<p><script>document.write (title1);</script></p>
Where needed.
In modern browsers you can. But there will be drawback: it would be impossible to seclect or copy substituted text. See browser support of css variable on caniuse. Currently it is supported in FF 31+, Chrome 49+, Safari 9.1+/9.3+. No any support in IE, Edge 13- and Opera 12.
Anyway, I see no reasons to refuse using some templating engine like doT.
h3::after {
content: var(--title);
}
<section style="--title: 'First title'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
<section style="--title: 'The second one'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
<section style="--title: 'And the last'">
<!-- This following content is equal for all sections -->
<h3></h3>
<p>Anything here</p>
</section>
Related
This Question was conceived when studying the answer to StackOverflow question #37370944.
In my database, I have html markup, for which I'd like to give my html-agnostic web-app users to have a tool to edit it in a browser. This is referential materials, mostly notes and source citations. For this purpose I use an html form generated by the server side, and a JavaScript widget, i.e. ContentTools, which, on form submit-button click event, collects a string of resulting html markup from the edited region and sets it as value on the designated form field.
The problem is that, as I discovered, ContentTools doesn't allow editing of the nested markup, e.g. inside html block elements, i.e. <div>, <section>, <article>, <aside>, etc., out of the box or at all (I do not know). To demonstrate this, I modified a forked JSFiddle example provided by the StackOverflow question #37370944 mentioned above. So, please take a look at this fiddle.
There are three link-buttons described in the markup:
The first one is a stand-alone <a> which is as an immediate child of the wrapper div holding the edited region content (<div data-name="main-content" data-editable="">).
The second link-button is placed inside a nested <div> with set attribute data-ce-tag="text" to presumably enable recognition of the content as editable text.
The third link-button is placed inside <p> tag which is as an immediate child of the wrapper div.
All three link-buttons wrapper-elements (<a>, <div> and <p>) have special css class "js-has-anchor" to enable change of the tools on the tool panel via the "focus" event bound to the editor Root.
It turns out, the "focus" event is only triggered for <p> (case 3) elements in the document, not for <div> (case 2) or <a> (case 1). As a result, only for the 3rd link-button a set of panel tools is updated. Moreover, the <div> and <a> elements cannot be edited.
The html markup in my database is mostly a mess, previously edited in CKEditor in some cases, or entered directly by hand. I'd like to make all available content to be readily recognized by ContentTools as editable (not "static") including nested structures similar to the one in the sample below. The main idea of the provided html sample is that it's a nested structure (not just a list of <hN>, <p> and <img> elements as in the edited page__content region from the ContentTools demo), every <section> consists only of <article> elements, and each article consists of a header(<hN>) and either another section, or a wrapping <div> holding all the content of this article.
And I'd like this structure not to be broken if it is already in place, and ideally enforced if it is not there yet.
But all this is a single region which is persisted in one text field of my database (no separate regions are possible).
<h1>Section 1 heading</h1>
<section class="mb-5">
<article>
<h2>Sub-Section 1.1 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.1.1 heading</h3>
<div>
<p>Some text</p>
<figure>
<img src="pic.jpg" alt="Some text" style="width:100%">
<figcaption>Fig.1 - Picture Caption</figcaption>
</figure>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.1.2 heading</h3>
<p>Some text</p>
<figure>
<img src="another_pic.jpg" alt="Some other text" style="width:100%">
<figcaption>Fig.2 - picture caption</figcaption>
</figure>
</article>
</section>
</article>
<article>
<h2>Sub-Section 1.2 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.2.1 heading</h3>
<div>
<p>Some text</p>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.2.2 heading</h3>
<p>Some text</p>
</article>
</section>
</article>
</section>
So, is it at all possible with ContentTools, and I'd appreciate an example with "customized" tool panel content from the JSFiddle to work for all link-buttons (and all of them be editable), not only for the one wrapped in the <p> tag.
Let's say I want to create a simple responsive one page homepage. I find several alternatives to do this, but what is the best option? I have read several articles on the net including the ones fron W3C, but I don't get a clear answer!
I'm going to have two column layout with text to the left and an image to the right. On a desktop computer they will be besides each other, styled left and right. But in smaller devices like a mobile, the right column will be changed to left and be placed below the text column.
Is alternative 1 bad in a HTML5 point of view? My thought was to devide the page with several parts of alternative 1 or 2. There is also a third alternative(I guess there almost endless with other options aswell) to use two article elements inside the section element and use a article element for the image instead of the aside element.
I guess some of you might also suggest me to use article element instead of section elements and use nested article. It's confusing with all this options!
Should I also use article and header element in alternative 1?
Preciate some feedback and guidelines! Sorry for all my questions, I just want to improve my coding skills!
Alternative 1:
<div id="intro">
<div class="content-left">
<h2>Headline</h2>
<p>Text</p>
</div><!-- end class content-left -->
<div class="content-right">
<img src="...."/>
</div><!-- end class content-right -->
</div><!-- end id intro -->
Alternative 2 with HTML5 elements:
<section id="intro">
<article>
<header>
<h1>Headline</h1>
</header>
<p>Text</p>
</article>
<aside>
<img src="...."/>
</aside>
</section>
The answer is: it doesn't really matter much, apart from code readability. Please see Why use HTML5 tags? for more on that.
You could have a <section class="articles"> that contains all <article> elements. You could have a <div class="articles"> that contains all <div class="article"> elements. I think it's safe to say there's no doubt the first one is easier to read for developers. Your pick.
There is, however, one issue: you self-close <img> -- no need for that in html5 anymore. See Are (non-void) self-closing tags valid in HTML5?.
In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.
With HTML5, there were many additional elements added for structuring documents like blog posts or long texts. But what I have problems coming up with is a semantic way of structuring UI components.
On a typical webapp, you have many different components such as modals, button elements, interacitve forms, containers, and so on. Often, I see those things being constructed using div and span only or by misusing header, footerand nav elements and I get the feeling I missed something out.
Is it really semantic to create all structural, not content-related elements using the div element only? Will there be a more diverse element choice in the future?
EDIT: Here's a short example of what I mean:
<div class="modal foo">
<div class="inner wrapper">
<div class="upper bar">
<div class="inner">
<div class="window-name">
<span class="upper heading">
<h1>Foo</h1>
</span>
<span class="lower heading">
<h3>Extra Baz</h3>
</span>
</div>
<div class="buttons">
<div class="button close"><span class="icon"><i>×<i></span></div>
<div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
</div>
</div>
</div>
<div class="content well">
<!--
Whatever happens inside the modal window named foo.
Pretty sure it needs many divs as well, though.
-->
</div>
<div class="lower bar">
<div class="buttons">
<div class="button help"><span class="icon"><i>?<i></span></div>
</div>
<span class="info">
<p>Enter your barbaz.</p>
</span>
</div>
</div>
</div>
The last W3C working draft for HTML 5.1 was released two days ago, on April, 13, and it is "semantic-centered": see
http://www.w3.org/TR/html51/Overview.html
It is an interesting reading, while waiting to have all those fancy things implemented by the most common browsers.
Is it really semantic to create all structural, not content-related elements using the div element only?
Not in my opinion. Even without to cite "the media is the message", everything has something to do with the content, even "open" and "close" buttons allowing users to see the content.
Will there be a more diverse element choice in the future?
Of course! And with a lot of proprietary prefixes, as usual, just to keep our life busier.
Ignoring div and span elements (which are meaningless, except for the case of specifying some meaningful attributes), your snippet consists of this:
<h1>Foo</h1>
<h3>Extra Baz</h3>
<i>×</i>
<i></i>
<!-- content -->
<i>?</i>
<p>Enter your barbaz.</p>
This is what your content looks like from the semantic perspective. Not very clear what gets represented here.
Using a heading element for a subtitle (h3 in your case) is not appropriate. (Or, if it’s not a subheading but really a new/own section, don’t skip a heading level; but I’m assuming the former.) Use one heading element, and use p for the subheading, and group them in header.
Using i elements for adding icons via CSS is not appropriate. Either use CSS only (with the help of existing elements), or, if you have to add an empty element, use span.
Using span/div elements for buttons is not appropriate. Use button instead.
As you are already using a heading element, it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, it may be article or aside (or nav if it’s for navigation), but in all other cases section.
Following this, you’d get:
<section>
<header>
<h1>Foo</h1>
<p>Extra Baz</p>
</header>
<button>Close</button>
<button>Maximize</button>
<!-- content -->
<button>Help</button>
<p>Enter your barbaz.</p>
</section>
Now you may add header/footer elements for those parts that are not part of this section’s (not this document’s, it’s only about this section!) main content.
You may, for example, enclose the maximize/close buttons in a header (however, opinions if this would be appropriate differ).
HTML 5.1 will probably have a menu element and a dialog element, which might be useful in this case.
What's the best HTML5 element to represent a preview or summary of another webpage? I was thinking <abbr>, but is there a better one to represent these?
(I can’t think of a case where the use of abbr would be appropriate; well, unless the preview content is an abbreviation.)
Preview as teaser etc.
If you want to display some content that already exists at some other place, you probably want to use the blockquote element. You may only use blockquote if you aren’t changing anything of the content.
As it’s a sectioning root element, any headings/sections won’t affect your outline.
<blockquote>
<!-- the quoted page -->
<h1>Foo bar page</h1>
<nav>…</nav>
<article></article>
<!-- could of course also use 'iframe' if it’s the whole page + CSS -->
</blockquote>
Also use blockquote when you want to display a screenshot of the content:
<blockquote>
<img src="screenshot.png" alt="Article Foo …" />
</blockquote>
If you need more complex alternative content, you might want to use object instead of img.
If you are not quoting (i.e., the content is on the same site resp. your own content, or you are paraphrasing), you could just go with article.
<article>
<h1>Summary of article Foo</h1>
<p>…</p>
</article>
In that case, headings/sections do affect your outline, which makes sense, as it’s your content (you summarized/paraphrased).
If it’s just a teaser/snippet in a sidebar (or a search result, or a list of posts etc.), you might want to use the bookmark link type to link to the actual content.
Preview, when creating/editing content
I guess it depends on your understanding of the content if a dedicated element is needed in the first place. One could argue that the preview is (part of) the actual content of the page, and it only happens to be published at another page in addition. So the most basic variant would be to use a sectioning element that is appropriate for this content, probably article:
<form><!-- the content edit form --></form>
<article><!-- the preview --></article>
resp. with a more useful outline:
<body>
<h1>Create a new foo</h1>
<form><!-- the content edit form --></form>
<section>
<h1>Preview of your foo</h1>
<article><!-- the preview --></article> <!-- depends on your case; would also be possible to have several sectioning content elements here -->
</section>
</body>
It could make sense to use the figure element here; as it’s a sectioning root, possible headings/sections of the preview content wouldn’t affect the current outline:
<form>
<!-- the content edit form -->
</form>
<figure>
<!-- your preview -->
</figure>
This is what I would recommend:
<body>
<h1>Create a new foo</h1>
<form>
<!-- the content edit form -->
</form>
<section>
<h1>Preview of your foo</h1>
<figure>
<article>
<!-- your preview -->
</article>
<!-- might use other, more or no sectioning elements here; depends on your case -->
</figure>
</section>
</body>
Special cases
samp
In some cases it might be appropriate to use the samp element:
The samp element represents (sample) output from a program or computing system.
Note that samp can only have phrasing content, so you can’t use it for complex content.
output
In some cases it might be appropriate to use the output element:
The output element represents the result of a calculation or user action.
You could even use the for attribute to relate the output (= preview) with the form.
Just like samp, it can only have phrasing content, so it’s not appropriate for complex content.
It sounds like you might have many short previews or summaries of these websites in a single page? In that case, I think there are many ways to express these types of blocks in smaller HTML chunks while giving them additional semantic meaning. So I will give you several options I would try using in HTML5.
The DETAILS element
The details element is new interactive element in HTML5 which shows a text summary and additional hidden text details that the user can see by clicking the summary text. This is usually created by the browser as a piece of title text with a dropdown toggle arrow that reveals hidden content when clicked. This element is typically used as a Javascript-free toggle widget to disclose additional information if the user chooses to view it. What is nice about this new HTML5 element is it will create this nice toggle, open-and-close, text block without the need for any Javascript, and which includes a nice clickable summary "bar" that unfolds with more detail text. Ive added some extra CSS to make it look sexy. (Note: IE1-11 does not support this element, but with the styles Ive added it degrades gracefully and shows summary and div content in one stacked block.)
<details>
<summary style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #ccccccff;box-shadow: 2px 2px 3px #aaa;">© Copyright 2021</summary>
<div style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #efefefff;box-shadow: 2px 2px 3px #aaa;">
<p>Owned by Company ABC. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of Company ABC.</p>
</div>
</details>
The DEFINITION element
The dfn element represents a piece of definition text when its term is defined in a paragraph. It represents a piece of text that is going to be defined within a sentence. The definition item is usually styled in plain italics. Not as fancy as the details element but tells search engines you are associating a text title with descriptive text. If you want to just drop page previews in plain paragraphs but give their titles more meaning, wrap the titles with this simple piece of HTML. You could also wrap an anchor tag around the dfn element and link to your page you are previewing. This link then has more semantic meaning.
<p>The <dfn id="sun" title="Our Shining Celestial Body">Sun</dfn> is the name of the local star in our solar system.</p>
The DESCRIPTION LIST element
If your page previews need something more formal, as in a listing, try a description list. The dl element is a description list and contains groups of description terms (dt) and descriptions details (dd). The description list is often used to show a page's glossary, lexicon, or dictionary of terms in key-value pairs. A description list is great if you have many of these previews. It really holds a lot of semantic meaning and allows you to have a description TERM and its DESCRIPTION in separate places. Again, this has more semantic meaning than plain HTML paragraphs. Ive added some CSS to this which you will see when you paste this in an HTML page and view it. Each description is in a white block with a border. You might add your page preview titles as terms, and your text preview in the description element.
<dl>
<div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
<dt id="fruit1">Apple</dt>
<dd nowrap="no" role="definition" aria-labelledby="fruit1">A popular fruit that grows on trees</dd>
</div>
<div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
<dt id="fruit2">Strawberry</dt>
<dd nowrap="no" role="definition" aria-labelledby="fruit2">A popular berry that grows low to the ground</dd>
</div>
</dl>
Is this a correct way to use the <section> tag?
<section id="container">
<section id="outer">
<section id="inner">
</section>
</section>
</section>
I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?
If you are just using these elements to place things in some position / style things, then you should probably be using divs.
Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:
http://html5doctor.com/the-section-element/
From the spec:
NOTE: The section element is not a generic container element. When an
element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead. A
general rule is that the section element is appropriate only if the
element's contents would be listed explicitly in the document's
outline.
Having said that, it's perfectly acceptable to nest section elements. Maybe something like:
<section>
<h1>Portishead</h1>
<p>Portishead are a cool band from Bristol</p>
<section>
<h1>Dummy (album)</h1>
<p>some info....</p>
<img src="..." />
</section>
<section>
<h1>Portishead (album)</h1>
<p>some other info info....</p>
<img src="..." />
</section>
</section>
Note:
My answer is severely out-of-date, and no longer contains sound advice given the changes to HTML that have happened in the last decade. I will be leaving this answer as-is for historical context, but please be aware that the structure suggested is not best practice—particularly around the use of the obsolete document outline.
Short answer: The code as you've provided is not semantically valid.
Long answer:
section elements are meant to mark up sections of content. Each section of content (i.e. Introduction, Abstract, content, conclusion) could have subsections.
If you're using those elements for structural purpose, you should be using div elements instead. They are semantically meaningless.
This would be more semantic:
<section id="introduction">
<div id="outer">
<div id="inner">
Some content
</div>
</div>
</section>
This would be a semantic way of marking up nested sections:
<section id="content">
<h1>Fizz Buzz</h1>
<section id="chapter-1">
<h1>Foo bar baz</h1>
...
</section>
<section id="chapter-2">
<h1>Lorem ipsum dolor</h1>
...
</section>
....
</section>
My personal recommendation would be to utilize semantic structure as much as possible when you create HTML5 layouts. As other posters have indicated, nesting section elements is totally acceptable, however you need to just make sure it makes sense to do so.
I personally use a few patterns that I've put together based on some research I've done over the course of the last year or so. The most common situation for using nested section elements is to provide ARIA roles for the main content of the document (see "site layout" example below)
Note: assumes body/html elements are present, etc
Site Layout
<header class="header" role="banner">
....
</header>
<!-- used once per page, implies role="main" -->
<main>
<!-- declares page content to be a document and not a web app -->
<section id="wrapper" role="document">
<section class="hero">
....
</section>
....
<section class="content">
</section>
</section>
</main>
<footer class="footer" role="footer">
....
</footer>
Single-Page Content Layout
Note: This layout applies to a page with a singular/topic/object and isn't suitable for all use cases
<article>
<header>
<h1>Page Headline/Title</h1>
</header>
<section class="page-content">
....
</section>
<!-- if this is a post or something with metadata/authorship info... -->
<footer>
....
</footer>
</article>
I use the tag for the class name on the shell header/footer elements as well as landmark roles to insure I can always distinguish them from other header/footer elements within the page (e.g. easy CSS scoping).
References
role="document" https://www.w3.org/TR/wai-aria/roles#document
A region containing related information that is declared as document content, as opposed to a web application.
"Why the <main> element doesn't need a role attribute": https://www.w3.org/TR/2012/WD-html-main-element-20121217/
The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main.
"W3.org/Wiki explanation of nesting <section> elements" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element
The section element is a container for document content that has a related theme, and represents the section of a document that is grouped around a general concept. Everything within a section element is related. Also section elements may be nested if necessary. The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.
A useful way to think through this is to consider how a screen reader would see your site. Imagine (and in fact you should test this for yourself) the screenreader announcing the word 'section' before reading the content inside your <section> tag.
If that doesn't make logical sense then maybe you've got your items ordered wrong.
Check out aria region role.
I don't know exactly how screen readers read nested sections but if the logical
sections on your page don't have a hierarchy then your HTML shouldn't either.
eg. (this is meant to represent HTML structure)
GOOD
section aria-label="dogs"
section aria-label="labradors"
section aria-labels="terriers"
section aria-label="cats"
section aria-label="sphynx"
section aria-label="persian"
BAD
Section used solely to group two other sections, but without a real meaning of its own as a 'section'.
section style="display: flex; flex-direction: row"
section aria-label="news"
section aria-labels="sport"
HTML5 also allows for setups such as:
<section>
<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>
</section>
multiple times on the same page, so you don't have just the one header, it goes a lot deeper than this, but it's worth checking out.
Check out the http://gsnedders.html5.org/outliner/
An updated method (as far as I understand it) could be something like this:
<main id="content">
<div id="inner-wrapper">
<section>
<h1>Section Title</h1>
...
</section>
<section>
<h1>Section Title</h1>
...
</section>
</div>
</main>
main {
width: 100%;
...
...
}
#inner_wrapper {
max-width: 80%;
margin: 0 auto;
}
See: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/ or http://html5doctor.com/the-main-element/ for more info.