Sometimes I want to send a link to e.g. an article in a newspaper and want the receiver to read a specific paragraph, chapter or similar. If the structure of the page is something like
<p class="h2">Some header
<p class="body">Body text
etc. Is it possible to link to any of these element specifically? For example, I want someone to read the fourth paragraph, that is, the fourth time the class="h2" is used, something like . I know, but I don't recall the syntax ATM, that XPaths offers this functionality, but what about html?
This will work for you http://www.web-source.net/html_link_anchors.htm#.Us-JX7T6SrE
<p class="h2">Some header</p>
<p class="body" name="text">Body text</p>
<html>
<body>
<p>
See also Chapter 4.
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
If you visit following link, this will take you to bottom of the page (this page explains the topic too):
http://www.myhtmltutorials.com/jump.html#Bot
Google Chrome offers this functionality since a couple of months ago. Right-click on whatever you want to direct link to and select Copy link to. The result is something like this:
https://stackoverflow.com/questions/21036942/link-to-one-of-many-divs-with-the-same-class#:~:text=If%20you%20visit-,following,-link%2C%20this%20will
This is not supported on all browsers so far but I guess it, with time, will spread.
Related
I found this little snipped of code here on stackoverflow, it works great but when you expand each one of the items, the "parent" or "title" for each of the other 'detail' tag sections moves down too.
is there a way to make it so that only the expanded result shows in the next line? so that the 'detail' options stay in the same line even after any of them is expanded
For example when I expand 'mail', both options 'telefon' and 'brev' move down, I want them to stay in the same place
Here is a fiddle: https://jsfiddle.net/y8tb5jnt/
I tried using inline or formatting but I wasn't even close to getting the desired result
HTML
<footer>
<P>Kontakta mig på följande sätt</P>
<details>
<summary>Mail</summary>
<p>Bla bla bla</p>
</details>
<details>
<summary>Telefon</summary>
<p>Bla bla bla</p>
</details>
<details>
<summary>Brev</summary>
<p>Bla bla bla</p>
</details>
</footer>
CSS
footer details {
display: inline-block;
}
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>
The standard tutorials teach how to use the hashtag and the anchor name to link to page sections, like so:
<li>Section 2</li>
<h1>Title</h1>
<a name="section1"></a><h2>Section 1</h2>
<p>Blah bla bla bla bla.</p>
<a name="section2"></a><h2>Section 2</h2>
<p>Blah bla bla bla bla.</p>
How do I make a page jump where I can embed the link to the page section using a fully qualified url? For example:
Please read section 2
The application is a signup notification email.
Using your example, the link would be:
Please read section 2
Also note that the <a name="section2"></a> is superfluous. You could simplify to
<h2 id="section2">Section 2</h2>
I have got just a quick question regarding the header hierarchy when using HTML5 and especially sections. I am asking from a SEO point of view.
At this moment my markup looks like this:
<article>
<header><h1>Article Header</h1></header>
<!-- Bla bla -->
<section>
<header><h1>Article section 1</h1></header>
<!-- Bla bla -->
</section>
<section>
<header><h1>Article section 2</h1></header>
<!-- Bla bla -->
<h2>Article section 2 Sub 1</h2>
<!-- Bla bla -->
</section>
<section>
<header><h1>Article section 3</h1></header>
<!-- Bla bla -->
</section>
</article>
The questions I am asking is about <h1>Article section 2</h1> and <h1>Article section 3</h1> and the code in-between.
Its outline is as expected:
hmtl5 outline http://i51.tinypic.com/34pi1hk.jpg
But when looking at the site without css, I am seeing this:
As you can see in the second picture it seems that <h2>Article section 2 Sub 1</h2> is given more "importance", although it is just a h2 of another subsection (just like displayed in the outline).
Now I am wondering if I can safely ignore this, or does Google probably also think that <h2>Article section 2 Sub 1</h2> is more important than the previous and next h1 titles? Obviously, I want to make sure that <h2>Article section 2 Sub 1</h2> is given less importance than the previous and next h1 titles.
I hope I was able to explain what I am trying to figure out!
The order of rendering the page never means anything as far as SEO is concerned. h1 will always be given more importance compared to h2 in the context it is placed in.
Firstly, HTML5 is backward-compatible with HTML4.
You can use old style h2+ tags
Or just sectioning contents and the h1 tag only
Or both, in the same page!
but default style is firstly made to maintain backward compatibility with older pages,
then to implement html5-sectioning's default style
Your code is not wrong, you just need to reset the style.
I'm pretty sure about this because I've read some discussions on mozilla's bugzilla
Hope this helps!
I currently have an ordered list that I want to markup using the new HTML 5 attributes. It looks like this:
<ol class="section">
<li class="article">
<h2>Article A</h2>
<p>Some text</p>
</li>
<li class="article">
<h2>Article B</h2>
<p>Some text</p>
</li>
<li class="article">
<h2>Article C</h2>
<p>Some text</p>
</li>
</ol>
It seems the only way to keep the list AND use HTML 5 tags is to add a whole bunch of unnecessary divs:
<section>
<ol>
<li>
<article>
<h2>Article A</h2>
<p>Some text</p>
</article>
</li>
<li>
<article>
<h2>Article B</h2>
<p>Some text</p>
</article>
</li>
<li>
<article>
<h2>Article C</h2>
<p>Some text</p>
</article>
</li>
</ol>
</section>
Is there a better way to do this? What are your thoughts?
If you’re using a list to add chronological order semantics to weblog posts, and as #Tomas mentioned each article is self-contained, then your code is ok (I’d remove the containing section though — it’s untitled and unnecessary).
However as you say there’s some extra markup. If you want to use less HTML, you can remove the list. You may think that you’ve then lost the chronological order semantics, but you can actually do this better using time with the pubdate attribute. This would look like:
<article>
<header>
<h2>The lolcat singularity</h2>
<time datetime="2010-05-24" pubdate="pubdate">Today</time>
</header>
<p>…</p>
</article>
<article>
<header>
<h2>The internet is made of cats</h2>
<time datetime="2010-05-23" pubdate="pubdate">Yesterday</time>
</header>
<p>…</p>
</article>
If you’re making a list of articles on the homepage, you’ll have to decide if the content stands alone (i.e. would you make a feed out of the article summaries). If so then the above code is still fine. If the summaries are too short to be self-contained, then you could choose to use a list, but at that stage you’re not dealing with “article” semantics, so your original classnames would be a little misleading:
<ol class="article-list">
<li>
<h2>Article A</h2>
<p>Some text</p>
</li>
<li>
<h2>Article B</h2>
<p>Some text</p>
</li>
<li>
<h2>Article C</h2>
<p>Some text</p>
</li>
</ol>
and select using .article-list li {} or .article-list h2 {} etc.
Fwiw I actually ended up using an ordered list containing article with time pubdate — the semantic belt and suspenders approach. I’m now wondering if I should remove the list myself :) You can also get carried away with hAtom, but note that ARIA’s role="article" shouldn’t be used on list items.
While HTML5 is an evolution, you’ll get the most benefit from throwing out your old code, starting from the content and a good guide to the spec, and marking stuff up from scratch. HTH!
According to the last editor's draft:
The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
As I interpret that, your use is perfectly fine semantically, although I really must question your use of a list in the first place. Given that each article is probably much more text than a couple of lines, an unordered list just seems to make things clotty. I imagine you'll "style away" the bullets etc with css, and I can't see why you'd want a bulleted list of articles if the page is displayed with css disabled. I'd suggest merely
<article>
<h2>The header</h2>
<p>Some text</p>
</article>
<article>
<h2>The header</h2>
<p>Some text</p>
<p>And maybe another paragraph</p>
</article>