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>
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;
}
So , lately i tried to mess around with html , it went well , until i tried to add a link .
so link isn't working and it's taking me to the files directory where the html file is located and saying err_file_not_found
<!DOCTYPE html>
<title>hello World</title>
<head>Hello World !</head>
<header>2nd sentence</header>
<h1>3rd sentence</h1>
<h2>4th sentence</h2>
<h3>5th sentence</h3>
<h4>6th sentences</h4>
<h5>7th sentence</h5>
<h6>8th sentence</h6>
<p>this is a regular sentence.<br>
regular sentences contain many words.<br>
by the end of this day , i will learn new
things and remember old ones.<br>
i learned how to write words in
<em>diagonal</em> .<br>
i also learned how to write words in
<strong>bold</strong><br>
<ul>my first list
<p>list item 1</p>
<p>list item 2</p>
<p>list item 3</p>
<p>list item 4</p>
</ul>
<ol>my secon list
<p>list item 1</p>
<p>list item 2</p>
<p>list item 3</p>
<p>list item 4</p>
</ol>
<hr> some thing horizontal
<a href="www.wikipedia.org">this is an example
of a web page</a>
</p>
Make sure to use at URLs http:// or https:// before the URL (Depends on the Website, in Wikipedias Case https). In your case your Browser thinks that it is a file.
Just as a guide - to correct your HTML markup perhaps this will be useful as it encapsulates the comments I made above.
<!DOCTYPE html>
<html>
<head>
<title>hello World</title>
</head>
<body>
<header>2nd sentence</header>
<h1>3rd sentence</h1>
<h2>4th sentence</h2>
<h3>5th sentence</h3>
<h4>6th sentences</h4>
<h5>7th sentence</h5>
<h6>8th sentence</h6>
<p>
this is a regular sentence.<br>
regular sentences contain many words.<br>
by the end of this day , i will learn new
things and remember old ones.
<br>
i learned how to write words in
<em>diagonal</em> .
<br>
i also learned how to write words in
<strong>bold</strong>
<br>
<ul>
<li>my first list</li>
<li><p>list item 1</p></li>
<li><p>list item 2</p></li>
<li><p>list item 3</p></li>
<li><p>list item 4</p></li>
</ul>
<ol>
<li>my secon list</li>
<li><p>list item 1</p></li>
<li><p>list item 2</p></li>
<li><p>list item 3</p></li>
<li><p>list item 4</p></li>
</ol>
<hr> some thing horizontal
<a href="https://www.wikipedia.org" target='_blank'>this is an example of a web page</a>
</p>
</body>
</html>
One thing to note perhaps is the use of target='_blank' in the hyperlink. This opens the link in a new window/tab so that the original page remains open ~ you do not want, afterall, to send away visitors! But, as already noted - use the scheme when adding remote links else they will be treated as relative to current site.
<img src='//example.com/images/img1.jpg' />
<script src='//example.com/script.js'></script> ...etc
For certain types of content (img,css,javascript etc) you may omit the scheme but instead use a double slash // - this forces the content to load using the same protocol as the current page.
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.
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>