I've got an HTML page that has multiple footnote references that need to go to the same footnote at the bottom of the page. That is, I want 1 and 4 in body content to both link to the same block of text at the bottom.
Most footnote markup is a series of anchor links tied to ids, but by definition they relate one-to-one. Is it possible to do a one-to-many link in HTML somehow?
You can have a many-to-one relationship with anchor links and IDs.
That is, you can only have one instance of each ID, but you can have multiple links pointing to one ID.
<p>This will go to footnote 1.</p>
<p>This will also go to footnote 1.</p>
<p>This will go to footnote 2.</p>
<footer>
<p id="footnote-1">[1] A footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>
</footer>
To the people who came here for a solution for OpenHTMLToPDF:
Got it working by accident:
Lorem ipsum...
<div class="footnote" id="f-1">This is my first footnote</div><br/>
Lorem ipsum...
<div class="footnote">Second <strong>footnote</strong>!</div><br/>
Dolor sit amet...
<!--This is a reference to the same footnote as the first footnote -->
[1]
Created an issue on the github to get a solution or an addition to their wiki.
Related
There are cases when text and image content is too large to be put onto one single page, but context is important for the content in question, so displaying it explicitly makes sense from the UX perspective. For example, this content could be chapters of a novel, parts of a long article, entries in a specialized list of items:
A Tale in Three Parts
The Beginning
The Middle
The End
Local Flora and Fauna
Badger
Mushroom
Snake
The answer would've been more simple if everything was on the same page, but what if these are separate standalone pages? What should be the proper way to semantically mark headings in that case?
Option 1
Use same h1 but different h2 on all pages:
<article>
<h1>Main Title</h1>
<h2>Title of Specific Part</h2>
<p>...</p>
</article>
Option 2
Use h1 for both article and section even though there is only a single section, and have same top-level h1 on all pages:
<article>
<h1>Main Title</h1>
<section>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</section>
</article>
Option 3
Optimize for machines, fake styling for humans:
<article>
<p class="styled_like_h1">Main Title</p>
<h1 class="styled_like_h2">Title of Specific Part</h1>
<p>...</p>
</article>
Option 4
Optimize for machines and hope humans figure it out from surrounding navigation:
(<nav><ul>...breadcrumbs...</ul></nav>)
<article>
<h1>Title of Specific Part</h1>
<p>...</p>
</article>
Using your example of a novel displayed as a chapter per page, it would make sense to use a structure like this:
Title Page
<head>
<title>A Tale in Three Parts</title>
</head>
<body>
<main>
<h1 class="title">A Tale in Three Parts</h1>
<p>Lorem ipsum...</p>
<nav>
<h2>Table of Contents</h2>
<ol>
<li>The Beginning</li>
<li>The Middle</li>
<li>The End</li>
</ol>
</nav>
</main>
</body>
Chapter Page
<head>
<title>A Tale in Three Parts: The Beginning</title>
</head>
<body>
<nav aria-label="Breadcrumbs">
<ol>
<li>A Tale in Three Parts</li>
<li>The Beginning</li>
</ol>
</nav>
<main>
<h1 class="chapter">The Beginning</h1>
<p>Lorem Ipsum...</p>
</main>
</body>
When thinking about HTML semantics, you should think about it in the context of the HTML document (the page) rather than the broader context of the full content (in this case, the novel). The elements should make sense for the content on the page.
Also remember, semantics aren't just for machines. Users with screen readers, or users for whom stylesheets don't load also benefit from semantic elements. Relatedly, the appearance of text shouldn't dictate which element is chosen. If a large, unique style is desired for a title page, and smaller heading styles are desired for chapter pages, that should be managed through CSS. Both should be <h1> elements on their respective pages.
Additionally, using <article> to wrap the content of each page isn't appropriate in this example, because articles are meant to be:
"...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable..."
— MDN Web Docs: The Article Element
In the case of a novel, the individual chapters aren't independently distributable.
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.
Suppose there is a main heading and it has several sub headings which can be categorized by giving them separate headings but instead they are visually communicated differently than giving them separate headings.
i.e:
In such a case how should we use heading tags?
What I believe should be the right thing to do (but not sure) is to add separate section element for both categories.
like this:
Any suggestions?
Note that the section element is a sectioning content element. This means it creates an entry in the document outline. If you want to use h1-h6 according to the corresponding rank in the outline, your h2 headings should become h3 headings.
Also note that it’s recommended to explicitly use sectioning content elements where appropriate (e.g., at least wherever you use heading elements), so you might want to use section for "What we do" etc., too.
So the outline-relevant structure could look like this:
<body>
<h1>Xyz Company</h1>
<section>
<h2>About us</h2>
<section>
<h3>What we do</h3>
</section>
<section>
<h3>Where we are?</h3>
</section>
<section>
<h3>Where we do?</h3>
</section>
</section>
<section>
<h2>Attributes</h2>
<section>
<h3>Respect</h3>
</section>
<section>
<h3>Responsibility</h3>
</section>
<section>
<h3>Growth</h3>
</section>
</section>
</body>
Each sectioning content element (and each sectioning root element, i.e., body in this case) has its own heading, and there is no heading without explicit section.
Even if you don’t want to provide "About us" and "Attributes" headings, you can still keep the two section elements. Not ideal, but better than not having these, because they make the intended document outline clear. (A compromise could be to visually hide these two headings with CSS.)
From a pure technical SEO standpoint, it would be better if both sections had their own heading, and the contents of those sections had their subheadings, so you would be looking for something like this:
<main>
<h1>Your Company Name</h1>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
</section>
<section>
<header>
<h2>About Us</h2>
<h3>What we do</h3>
<h3>Where we are</h3>
<h3>Where we do</h3>
</header>
<section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section>
<section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section>
</section>
</main>
Usually what I like to do is look at the page without any CSS/JavaScript and see how it looks. If you have the same flow, and things appear like they should by default, you are on the right track.
Search engines are smart enough to understand what you mean, even if you use div for everything, but having it semantically correct may increase their likeness towards your clean and organized code.
Adding sections for both could be helpful, but what is much more helpful is that this page talks about a specific topic, other than multiple. So I would recommend that instead, you make one page for each About Us and Attributes. If it seems overkill, you can go with just one page; That would be correct, but not optimal in search engines eyes -- They really like that you have one page for each topic and that they-re unique within the domain.
As part of a project mentioned in connection with another question I need to markup nested articles in semantic HTML5. There's a magazine article containing a number of short texts by different authors plus some editor comments. In the present HTML4 version it looks something like this:
<div id="article">
<h1>Main heading - a collection of texts</h1>
<p id="intro">
A general introduction to the whole collection by the editor.
</p>
<p class="preamble">
A few words from the editor about the first text.
</p>
<h2>First text heading</h2>
<p>First text. Lorem ipsum ...</p>
<p class="author">
Name of author of first text.
</p>
<div>*</div>
<p class="preamble">
A few words from the editor about the second text.
</p>
<h2>Second text heading</h2>
<p>Second text. Dolorem ipsum ...</p>
<p class="author">
Name of author of second text.
</p>
<p id="postscript">
Some final words about the whole collection by the editor.
</p>
<div>
I have been considering something like this in HTML5, but there are some elements where I simply don't know what's best:
<article>
<header>
<h1>Main heading</h1>
<ELEMENT>
General introduction
</ELEMENT>
</header>
<article>
<header>
<ELEMENT>
Preamble
</ELEMENT>
<h2>
Article heading
</h2>
</header>
<p>
Article text
</p>
<ELEMENT>
Name of author
</ELEMENT>
</article>
<div>*</div>
<article>
Second article ...
</article>
<ELEMENT>
Postscript by editor
</ELEMENT>
</article>
Should I use a p element with class names for the various introductions and postscript, or maybe aside elements? Something else? And the same question regarding the names of authors. The address element doesn't seem quite right there. A footer perhaps with some other element (?) in it?
Edit: Occasionally there are some images as well and the photographer is mentioned in small print at the end of the article ("Photo: John Doe."). Element x inside a footer?
I think the first question should be where to put the editor comment for an article. I can think of three ways:
(a) editor comment in the header of an article
<article class="author-text">
<header class="editor-comment"></header>
</article>
(b) editor comment in an article that is nested in an article
<article class="author-text">
<article class="editor-comment"></article>
</article>
(c) editor comment in a section that has the article as child
<section class="editor-comment">
<article class="author-text"></article>
</section>
You are using (a) in your question. I don’t think it’s the best choice, mainly because this article would contain content from different authors (that did not work together), so the concept of "nearest article element ancestor" for denoting authorship wouldn’t work. It’s used, for example, by the author link type and the address element.
(b) and (c) don’t have this problem. In (b), each editor could have their own authorship info, in (c) the authorship info for the editor would be taken from the parent article (which includes the whole collection of articles), so the editor would have to be same everytime.
The definition of article suggests that (b) is appropriate:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.
It would make sense to include this editor comment article in a header.
The authorship information could be placed in a footer. Only if this information contains contact information for the author, use an address element in addition (and only for these contact information parts).
So a single short text could look like this:
<article class="author-text">
<h1>First text heading</h1>
<header>
<article>
<p>Editor comment</p>
</article>
</header>
<p>First paragraph of the text …</p>
<footer>
<!-- text author information -->
<!-- use 'address' here if appropriate -->
</footer>
</article>
The whole collection could be structured like this:
<article class="text-collection">
<h1>Main heading</h1>
<p>General introduction</p>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<p>Postscript by editor</p>
</article>
I am trying to style how the articles are laid out in a Category Blog and have got stuck on styling the actual content of the article.
My code for the first article on the Category Blog is as such:
<div class="items-leading">
<div class="leading-0">
<h2>
News Post 1
</h2>
<dl class="article-info">
<dt class="article-info-term">Details</dt>
<dd class="published">2nd Mar 2013</dd>
</dl>
Lorem ipsum dolor sit amet etc...
<div class="item-separator"></div>
</div>
I am trying to style the lorem ipsum example text by wrapping it in some kind of tags, either div or paragraph I don't mind, so I can give its wrapping container a div and font styling etc.
Here is a link to the site where its currently on:
http://test.studevent.co.uk/news
Any help is greatly appreciated.
You want to change default template for article item in blog?
/components/com_content/views/category/tmpl/blog_item.php - it is default template. copy it in your template (/templates/{your_template_name}/html/com_content/category/blog_item.php).
After, in your copy on line 137 you can find <?php echo $this->item->introtext; ?> - it is your text 'Lorem ipsum ...'
To do this, the file you need to edit is found here:
YOURSITEROOT/layouts/joomla/content/blog_style_default_item_title.php
In order to edit file, create a new folder (within your template) and move the file here, so it would be:
YOURSITEROOT/templates/YOURTEMPLATE/html/layouts/joomla/content/blog_style_default_item_title.php