Anchor link not working when using unordered list
I wrote an HTML document with seven anchor links to jump to different section on the page. However, only the first and the last links are working and the rest are not working. I cloned the first section which is working alright and then changed the id to the second section. And that made the second anchor link working. So, I know that somewhere in my second to the second last section is not working. However, I cannot find where is wrong. My code passed the w3.org’s validator. Could someone look into my code to see what is the problem. I’m still a beginner so please go easy on me. Thank you.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Jade Ichinose Resume</title> </head> <body> <h1>Jade</h1> <span id="email">Email:</span> <span id="phone">Mobile:</span> <a href="linkedinlink">My LinkedIn Profile</a> <section> <h3>Overview</h3> <ul> <!-- Link to every section in the page --> <li><a href="#personal_summary">Personal Summary</a></li> <li><a href="#education">Education</a></li> <li><a href="#skillset">Skillset</a></li> <li><a href="#working_experience">Working Experience</a></li> <li><a href="#voluntary_experience">Voluntary Experience</a></li> <li><a href="#hobbies_interests">Hobbies and Interests</a></li> <li><a href="#referees">Referees</a></li> </ul> </section> <section id="personal_summary"> <h2>Personal Summary</h2> <p> describing myself what I studied experience job, volunteering Career goal -> What I want to achieve for the company using my skills and experience </p> </section> <section id=“education”> <h2>Education</h2> <ul> <li>date (start mmm/yy - completed mmm/yy) school</li> <li>major</li> <li>Achievement — what I did well in the study — <ul> <li>computer programming with the result A+ <ul> <li> languages and field, courses</li> </ul> </li> </ul> </li> </ul> </section> <section id=“skillset”> <h2>Skillset</h2> <ul> <li>Hard skills— languages, maths, software, SublimeText3, Wing, Geany, Spyder</li> <li>Soft skills, English, Japanese, fundamental level Chinese(mandarin), team-orientated, time management,</li> </ul> </section> <section id=“working_experience”> <h2>Working Experience</h2> <ul> <li>date (start mmm/yy - completed mmm/yy) company </li> <li>role, position</li> <li>Achievement — what I did well in the job — <ul> <li>example1 <ul> <li> detail about example1 may not be required</li> </ul> </li> </ul> </li> </ul> </section> <section id=“voluntary_experiene”> <h2>Voluntary Experience</h2> <ul> <li>date (start mmm/yy - completed mmm/yy) company or organisation (church)</li> <li>role, position</li> <li>Achievement — what I did well in the job — <ul> <li>example1 <ul> <li> detail about example1 may not be required</li> </ul> </li> </ul> </li> </ul> </section> <section id=“hobbies_interests”> <h2>Hobbies and Interests</h2> <ul> <li>Cooking</li> <li>Minerals and Lapidary</li> </ul> </section> <section id="referees"> <h2>Referees</h2> <ul> <li>name of the referee, position, company, contact detail (email or phone number)</li> <li>referee 2</li> <li>referee 3</li> </ul> </section> </body> </html>
Take a close look on your ".
<section id=“education”> <section id="education"> The first is not working, the second does work. You are using a ‘right double quotation mark’ (”) and not a ‘normal quotation mark’ (") in the other sections. The first section personal_summary is fine.
The quotation marks that you have used for id are wrong
Use
<section id="education"> Instead of
<section id=“education”> Same for all other non-working sections
You made a tiny mistake on the type of quotation mark you used.The first and the last are fine and you’ve used ".." but on the rest you’ve made the mistake of using “…”. For example for education, you had it as:
section id=“education”
Instead of:section id="education"
You’ve also named an ID as id=“voluntary_experiene” and called it using:href="#voluntary_experience" which has a slight spelling mistake. The code below has all the fixed/working anchor tags.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Jade Ichinose Resume</title> </head> <body> <h1>Jade</h1> <span id="email">Email:</span> <span id="phone">Mobile:</span> <a href="linkedinlink">My LinkedIn Profile</a> <section> <h3>Overview</h3> <ul> <!-- Link to every section in the page --> <li><a href="#personal_summary">Personal Summary</a></li> <li><a href="#education">Education</a></li> <li><a href="#skillset">Skillset</a></li> <li><a href="#working_experience">Working Experience</a></li> <li><a href="#voluntary_experience">Voluntary Experience</a></li> <li><a href="#hobbies_interests">Hobbies and Interests</a></li> <li><a href="#referees">Referees</a></li> </ul> </section> <section id="personal_summary"> <h2>Personal Summary</h2> <p> describing myself what I studied experience job, volunteering Career goal -> What I want to achieve for the company using my skills and experience </p> </section> <section id="education"> <h2>Education</h2> <ul> <li>date (start mmm/yy - completed mmm/yy) school</li> <li>major</li> <li>Achievement — what I did well in the study — <ul> <li>computer programming with the result A+ <ul> <li> languages and field, courses</li> </ul> </li> </ul> </li> </ul> </section> <section id="skillset"> <h2>Skillset</h2> <ul> <li>Hard skills— languages, maths, software, SublimeText3, Wing, Geany, Spyder</li> <li>Soft skills, English, Japanese, fundamental level Chinese(mandarin), team-orientated, time management,</li> </ul> </section> <section id="working_experience"> <h2>Working Experience</h2> <ul> <li>date (start mmm/yy - completed mmm/yy) company </li> <li>role, position</li> <li>Achievement — what I did well in the job — <ul> <li>example1 <ul> <li> detail about example1 may not be required</li> </ul> </li> </ul> </li> </ul> </section> <section id="voluntary_experience"> <h2>Voluntary Experience</h2> <ul> <li>date (start mmm/yy - completed mmm/yy) company or organisation (church)</li> <li>role, position</li> <li>Achievement — what I did well in the job — <ul> <li>example1 <ul> <li> detail about example1 may not be required</li> </ul> </li> </ul> </li> </ul> </section> <section id="hobbies_interests"> <h2>Hobbies and Interests</h2> <ul> <li>Cooking</li> <li>Minerals and Lapidary</li> </ul> </section> <section id="referees"> <h2>Referees</h2> <ul> <li>name of the referee, position, company, contact detail (email or phone number)</li> <li>referee 2</li> <li>referee 3</li> </ul> </section> </body> </html>
