SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: HTML Help

  1. #1
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Help

    Hi,

    I want to build a page with questions e.g.

    1. Question here
    2. Question here
    3. Question here

    which will have links <a href = ...etc>

    and I want when the user clicks on that question, they will be directed to the bit underneath the questions which will display the answers. If I'm not mistaken, I think you have to use '#' but I have forgotten the name of it.

    Does anybody know what I'm talking about and any tutorials I can google to see how to do this?

    Many thanks! Btw, is this HTML5?

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,822
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ParfaitMacaron View Post
    Hi,

    I want to build a page with questions e.g.

    1. Question here
    2. Question here
    3. Question here

    which will have links <a href = ...etc>

    and I want when the user clicks on that question, they will be directed to the bit underneath the questions which will display the answers. If I'm not mistaken, I think you have to use '#' but I have forgotten the name of it.

    Does anybody know what I'm talking about and any tutorials I can google to see how to do this?

    Many thanks! Btw, is this HTML5?
    Dead easy.

    Let's say you have an answer further down the page that looks like this:
    Code:
    <h3>Question 2: How do I jump down the page?</h3>
    <p>You need to use fragment identifiers. Add an ID to the point where you jump to, and then link to this with a #</p>
    You need to add an ID to that answer (I have added it to the <h3>, but if you have a wrapper <div> that goes round the whole answer you can put it there, or if you don't have a heading just put it on the paragraph itself), like this:
    Code:
    <h3 id="q2">Question 2: How do I jump down the page?</h3>
    <p>You need to use fragment identifiers. Add an ID to the point where you jump to, and then link to this with a #</p>
    (Note that your ID must start with a letter, but can include numbers as well)

    Then in your questions, you include a link like this:
    Code:
    <li><a href="#q2">How do I jump down the page?</a></li>
    You can make it look slicker with scripts such as SmoothScroll, but that doesn't change the basics. This isn't HTML5, it's been around since pretty much the dawn of time.

  3. #3
    SitePoint Enthusiast ParfaitMacaron's Avatar
    Join Date
    Mar 2013
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Stevie! Appreciate your tutorial!

    Quote Originally Posted by Stevie D View Post
    Dead easy.

    Let's say you have an answer further down the page that looks like this:
    Code:
    <h3>Question 2: How do I jump down the page?</h3>
    <p>You need to use fragment identifiers. Add an ID to the point where you jump to, and then link to this with a #</p>
    You need to add an ID to that answer (I have added it to the <h3>, but if you have a wrapper <div> that goes round the whole answer you can put it there, or if you don't have a heading just put it on the paragraph itself), like this:
    Code:
    <h3 id="q2">Question 2: How do I jump down the page?</h3>
    <p>You need to use fragment identifiers. Add an ID to the point where you jump to, and then link to this with a #</p>
    (Note that your ID must start with a letter, but can include numbers as well)

    Then in your questions, you include a link like this:
    Code:
    <li><a href="#q2">How do I jump down the page?</a></li>
    You can make it look slicker with scripts such as SmoothScroll, but that doesn't change the basics. This isn't HTML5, it's been around since pretty much the dawn of time.

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    (Note that your ID must start with a letter, but can include numbers as well)
    No, it can start with a letter. ID in HTML can be anything except the empty string and it can't contain whitespace.
    Simon Pieters

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,822
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zcorpan View Post
    No, it can start with a letter. ID in HTML can be anything except the empty string and it can't contain whitespace.
    I quote from the W3 specs for HTML4:
    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    yeah they've widened this in HTML5. And it's a cowpath-paving sort of thing... browsers accept weird tokens :P
    http://mathiasbynens.be/notes/html5-id-class

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    I quote from the W3 specs for HTML4:
    Quoting HTML4 is like quoting CSS1 for what rules apply for CSS. Maybe useful a decade ago, not so much today.
    Simon Pieters

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Someone (you) even said /TR/ was outdated, but lots of it isn't.

    I wonder if all the URLs should just be changed, because honestly I feel I should be able to type "w3 HTML# [elementname]" into any search engine and get the most up-to-date pages first.

    It's also confusing to many developers that even if they are writing "HTML4" the browser will use whatever HTML parser it has, which nowadays would be one that accepts most of the new 5 stuff. More confusing that lots of the illegal 4 stuff was always fine in browsers and merely got "legalised" in 5. Like the id's.

    Building web stuff might not be easy but I think getting to the right docs for the project should be Barney-purple-dinosaur simple. I too have gone looking stuff up without realising I was on old pages (yeah, the styles are a bit different, but I'm not artsy enough to notice styles on most pages I visit, unless I'm there to look at the styles).

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if you search for "whatwg html [elementname]" instead you have a higher change to get up-to-date pages first, since WHATWG don't publish frozen snapshots that get out of date.
    Simon Pieters

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    yeah but lawlz, that's WHATWG... sometimes the snowflake moment you want, other times someone's frizzy thought that lasts a few moments :P

    I don't mind "most recent frozen snapshot", really... we should get duckduckgo to do most-recent-frozen stuff for w3c requests...

    I mean, if I want to run Debian Testing I get all the latest things, but for a work machine I might be happier with latest stable.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •