Overview
I am trying to add footnotes to an HTML page. According to the W3C recommendation for Common idioms without dedicated elements §4.12 Footnotes, the appearance of a footnote links to the footnote section and vice-versa. They provide an example of linking to a section with paragraph <p> elements with values inside.
Instead of a paragraph, I am using the <footer> element within the section to contain an ordered list <ol> element. For example:
<section id="section-2">
<h2>Section 2 Title</h2>
<p>Many paragraphs of information. But at least one sentence has a footnote reference, like this one.<sup><a id="r1" href="#fn1">1</a></sup>
<footer id="section-2-footnote">
<ol>
<a id="fn1" href="#r1"><li>Although it's not a very informative footnote. But more information can be seen in the appendix.</li></a>
<ol>
</footer>
</section>
Problem
In the example, the entire <li> element (except the number itself) is a part of the anchor. This becomes confusing if the footnote itself links to some other part of the document (e.g. an appendix, caption, table, etc.) as it is indistinguishable from the rest of the anchor.
Desired outcome
What I would like to do is get the numbered value rendered by the <li> element to serve as a link back to the reference. For now, I only want to handle single instance references. Something similar to:
1. First
2. Second
3. And so on..
Is there a way to anchor the number value of a <li> element?
Related
While creating Table of Contents in jupyter-notebook using <html>
I created hyperlinks linking to internal notebook cells, But clicking them does not take me to the desired cells.
Example:
The markup in the table of content is like:
<ol>
<li>Understanding the Data</li>
<li>Reading the file</li>
<li>Adding Columns</li>
<li>General Analysis</li>
</ol>
Whereas the code in the Cells linked by above hyperlinks are as follows:
<h2> Understanding the Data </h2>
<h2> Reading the file </h2>
... and so on
Like to share the solution to my problem as follows:
a. The hyperlink's href attribute should be preceded by hash'#' and exactly match the name of the linking cell( case insensitive)
with dash( no underscore ) replacing the spaces.
e.g.
<ol>
<li>Understanding the Data</li>
<li>Reading the file</li>
<li>Adding Columns</li>
<li>General Analysis</li>
</ol>
b. Whereas on the cells I am linking to, there should not be any space between opening and closing tags that are encompassing the name.
e.g.
<h2>Understanding the Data</h2>
<h2>Reading the file</h2>
<h2>Adding Columns</h2
<h2>General Analysis</h2>
Note that now there is no space between html tags and the name defined within.
I am trying to transfer a text from a printed book into HTML5, but meanwhile I am trying to keep its thematic and page/paragraph/lines layout structure exactly as it is. For example, every page of the printed book is divided as a <div> section eg. <div class=page id=55> so that it emulates/represents exactly the page unit of the printed book, and also facilitate referencing. I don't care much how the text will be rendered on the browser, this is something that I can think about later. I just want the HTML and the browser to "know" the original pagination and layout of the printed book.
The problem is that in the printed book, some paragraphs or even boxes, tables etc span over to the next page. If I translate it to HTML, I do it like this:
<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...
This is illegal in HTML, as we have a <p> tag being interrupted by a </div> tag, and then a new div element beginning with a plain text, which is closed by a </p> tag.
HTML would expect me to close the first part of the broken paragraph with a </p>, and continue with a new <p> tag after the div, but I am not doing this because it doesn't correspond to the pagnation of the original book, and would result in half-paragraphs being understood are 2 proper paragraphs.
So, how to use legal HTML while maintaining the theoretical page/paragraph/broken paragraph/page break structure and information, or at least making the brower "know" the original pagination? Is there a more appropriate tag or method to emulate the page break while keeping the page number id?
Perhaps something like
<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>
How about instead of encapsulating each page within a div you include a tag at the start of each page designating the page number. An aside tag seems appropriate for this.
<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>
If you need to continue a paragraph then you'll have to break into multiple elements, but perhaps you can specify when a paragraph is a continuation of a previous one. For instance using the continued class as shown above.
If you really don't want to break the p tag then you could put a span within it that is only used for semantic reasons. Something like this;
<p>...and so the bold knight
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>
But this kind of makes less semantic sense than the previous solution.
Try adding display: inline; to either the CSS style of the class page or the style attribute of each page div.
In my page i need to list last news with title only. I have two methods:
One:
<div>
<p>Title One</p>
<p>Title Two</p>
<p>Title Three</p>
<p>Title .....</p>
<p>Title .....</p>
<p>Title .....</p>
</div>
Two:
<div>
<ul>
<li>TTILE ONE </li>
<li>TTILE Two </li>
<li>TTILE THree</li>
<li>TTILE .....</li>
</ul>
</div>
In HTML5 which way is better and readable?! with <p></p> Or <ul><li>?!
Neither is better in terms of how html can be read. However it is considered a list, and so your question can be answered by means of using <li>
You have there a list of news, so the correct one is UL.
The first option, using paragraphs is bad, because... Do you thing titles are paragraphs? I think title != paragraph, so uou can't use <p> tag.
Using an unordered list, <ul>, would be more semantically correct than using a paragraph, <p>.
Obviously either one could be used, so semantics may feel like a 6 vs half dozen sort of thing, but in the long run using the correct tags will make your job easier.
The <p> will come with native styles, i.e. margins and so on, that will need to be removed in your css if you intend you use them this way. While <ul> and <li> will probably only need to have bullet points accounted for.
Also not everyone experiences the web in the same way, try to keep in mind that screen readers will take markup into account when reading pages to the visually impaired.
In more extreme cases semantics can even effect your search engine optimization (SEO). Google, for instance, may grab your first paragraph and use it as a part of your site description.
I have been working with a lot of html structuring lately and I started to wonder what are the elements that are allowed as children of an <a> element?
Anything as long as there insn't any interactive content like buttons, forms, other link...
w3.org HTML5 specs :
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
see link to source
And here is an example of what you can do (still form w3.org) :
<aside class="advertising">
<h1>Advertising</h1>
<a href="http://ad.example.com/?adid=1929&pubid=1422">
<section>
<h1>Mellblomatic 9000!</h1>
<p>Turn all your widgets into mellbloms!</p>
<p>Only $9.99 plus shipping and handling.</p>
</section>
</a>
<a href="http://ad.example.com/?adid=375&pubid=1422">
<section>
<h1>The Mellblom Browser</h1>
<p>Web browsing at the speed of light.</p>
<p>No other browser goes faster!</p>
</section>
</a>
</aside>
Changes in HTML5
Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.
HTML language reference
I am trying to learn fundamentals of html and markings.
I want to create an anchor which containes two lines of information.
first line: the name of the link
second line: short explanation
e.g.
<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>
Is this correct?
How should the following (2nd span) be modified if necessary?
Thank you
PS. Both lines need to be surrounded with span for css-styling.
First off, don't rule out using a br tag. This is a semantically-appropriate place for a br tag (forcing a hard break inside a line or paragraph of text). Plus, if you use a br tag, it may no longer be necessary to put either of the two lines of text in separate tags, unless you want to style them differently.
<a href='#'>
Studies<br/>
-Information about studies
</a>
Second, try viewing the HTML with stylesheets disabled (I do this in Firefox by pressing ctrl-shift-S, with a little help from the Web Developer extension). Is the browser able to render the content in an easy-to-read way based solely on the HTML provided? To some extent, the more readable the "unstyled" content appears, the more semantically-correct the HTML is.
Given that the second line of text seems to be secondary to the first line (a subtitle, not as important, possibly redundant or not entirely essential), putting the first line in a strong tag or putting the second line in a small tag are a couple ways to establish the relative importance of the two lines, if you wish to do so.
<a href='#'>
<strong>Studies</strong><br/>
-Information about studies
</a>
<a href='#'>
Studies<br/>
<small>-Information about studies</small>
</a>
There's some room for personal preference here. These are just two approaches.
It may be a little bit of a stretch using a small tag in a case like this, but it's not entirely inappropriate. A small tag is typically used for "fine print", attribution, disclaimers, or side comments. It doesn't semantically mean the text is small, but it does tend to be used for content that's secondary to something else (that clarifies something else). It should though only be used for text that's short in length.
And a strong tag doesn't have to be styled bold. In fact, that's the whole point of semantic markup: It doesn't specify or imply how the content will be styled; all it does is offer a hint to the meaning or context of the content. A strong tag can reasonably be given a style of font-weight:normal.
In order to achieve that those are in separate lines, try using the <div> tag instead. You can still specify a class for styling, the only difference is that <div>s are block-elements; each of them is rendered on a separate line. Here's the modified version of your code:
<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>
Another, slightly more preferable way of doing that is by styling the elements to be block-elements. That can be used by setting the CSS display property to block. Something like:
<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>
(Note that class = "alt block" means the element has both classes alt and block, and note also that the first <span> is removed because there's no need to style that node with anything).
CSS:
.block {
display: block;
}
Hope that helped you!