 End tag a violates nesting rules errors |
  |
| Ersan Yildiz |
 Oct 27 2014, 05:06 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 27-October 14 Member No.: 21,725  |
Hello, I get the error when I validating my site by errors, but I have only 2 errors by line 24, but I cannot fix them. Can somebody help me?
This is my HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ersan Yildiz</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/reset.css" rel="stylesheet" type="text/css"> <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type= "text/javascript"></script> <script src="js/smoothscroll.js" type="text/javascript"></script> <link href="http://static.turingts.com/favicon.png" rel="shortcut icon"> </head> <body> <section data-type="parallax_section" id="home"> <article> <a class="smoothScroll" href="#home"> <div class="navbar"> <ul> <li>Home</li> </ul> </a> </div> <a class="smoothScroll" href="#section-1"> <div class="navbar1"> <ul> <li>Persoonlijke info</li> </ul> </a> </div> <a class="smoothScroll" href="#section-2"> <div class="navbar2"> <ul> <li>Over mij</li> </ul> </a> </div> <a class="smoothScroll" href="#section-3"> <div class="navbar3"> <ul> <li>Portfolio</li> </ul> </a> </div> </article> </section> <section id="section-1"> <article> <h1 class="persoonlijkeinfo">Persoonlijke info</h1> <table class="info"> <tr> <td>Naam:</td> <td> </td> </tr> <tr> <td>Woonplaats:</td> <td> Kampen</td> </tr> <tr> <td>Emailadres:</td> <td> ersan.yildiz@outlook.com</td> </tr> <tr> <td>Geboortedatum:</td> <td> </td> </tr> <tr> <td>Geboorteplaats:</td> <td> Kampen</td> </tr> <tr> <td>Nationaliteit:</td> <td> Nederlandse</td> </tr> <tr> <td>Geslacht:</td> <td> Man</td> </tr> <tr> <td></td> </tr> </table> <h1 class="opleidingen">Opleidingen</h1> <table class="info-1"> <tr> <td>Almere College</td> <td> Niveau: basisberoepsgericht (2010/2012)<br> Niveau: kaderberoepsgericht (2013/2014) diploma behaald</td> </tr> <tr> <td>Landstede (Media Academy)</td> <td> Opleiding: Applicatieontwikkelaar<br> Niveau: 4 (2014-heden)</td> </tr> </table> <h1 class="talen">Talen</h1> <table class="info-2"> <tr> <td>Nederlands</td> <td> Moedertaal<br></td> </tr> <tr> <td>Turks</td> <td> Vloeiend</td> <td></td> </tr> <tr> <td>Engels</td> <td> Goede beheersing in spreken, verstaan, lezen en schrijven</td> </tr> <tr> <td>Arabisch</td> <td> Voldoende beheersing in lezen</td> </tr> </table> </article> </section> <section data-type="parallax_section" id="section-2"> <article> <div class="overmij"> Over mij </div><a class="smoothScroll" href="#section-1"> <div class="menu example1"> <span></span> </div></a> <div class="inspiratie"> Inspiratie </div> <div class="content-1"> Mijn inspiratie haal ik van ondernemers zoals Steve Jobs en Drew Houston.<br> Vooral het leiderschap van Steve Jobs vind ik inspirerend en het design Apple heeft bewezen hoe belangrijk design is voor marketing. </div> <div class="school"> School </div> <div class="content-2"> De school waar ik studeer is het Landstede, ik volg een 3-jarige MBO-opleiding Applicatieontwikkelaar.<br> Deze studie heb ik gekozen omdat deze opleiding heel breed is en veel kansen biedt. </div> <div class="toekomst"> Toekomst </div> <div class="content-3"> In de toekomst zie ik mij als een ondernemer.<br> Om deze droom waar te maken zal ik alle registers opentrekken. </div> <div class="quote"> <blockquote> A man who stands for nothing, will fall for anything. </blockquote> </div> </article> </section> <section data-type="parallax_section" id="section-3"> <article> <div class="Portfolio"> Portfolio </div><a class="smoothScroll" href="#section-2"> <div class="menu example1"> <span></span> </div></a> <div class="iPad-kop"> Responsive iPad opdracht </div> <div class="iPad"> <a href="http://codepen.io/ErsanYildiz/full/xyvfa"><img src= "images/iPad.jpg" alt="iPad"></a> <div class="Lipsum-kop"> Lipsum Vakanties opdracht </div> <div class="Lipsum"> <a href= "http://codepen.io/ErsanYildiz/full/ElipI"><img src="images/lipsum.jpg" alt="lipsum"></a> </div> </div> </article> </section> <section data-type="parallax_section" id="footer"> <article> <div class="footertekst"> Ersan Yildiz © All rights reserved <a class="smoothScroll" href="#home">back to top</a> </div> </article> </section> </body> </html> |
  |
 
|
| Frederiek |
Oct 27 2014, 05:18 PM
Post
#2
|
|
Programming Fanatic  Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You can't have a link (<a>) around a div and ul. The link should go around the text inside the li. You have several of those. Fix that and validate again.
|
|
|
|
| Ersan Yildiz |
Oct 27 2014, 05:27 PM
Post
#3
|
|
Group: Members Posts: 2 Joined: 27-October 14 Member No.: 21,725 |
QUOTE(Frederiek @ Oct 27 2014, 05:18 PM)  You can't have a link (<a>) around a div and ul. The link should go around the text inside the li. You have several of those. Fix that and validate again. Yes, it's ready. I have no errors. Thank you!  |
|
|
|
| Christian J |
Oct 27 2014, 05:32 PM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(Frederiek @ Oct 27 2014, 11:18 PM) You can't have a link (<a>) around a div and ul. Actually you can in HTML5: "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)." But the nesting order is incorrect: CODE <a class="smoothScroll" href="#home"> <div class="navbar"> <ul> <li>Home</li> </ul> </a> </div> --the </div> end tag must appear before the </a> end tag. Same things goes for all four links in the ARTICLE element. |
|
|
|
| pandy |
Oct 27 2014, 05:52 PM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Oct 27 2014, 11:32 PM) Actually you can in HTML5: And ugly it is.  |
|
|
|
| Frederiek |
Oct 28 2014, 03:46 AM
Post
#6
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
I think so too.
I replied a little hasty late last night, that I didn't even noticed the improper nesting. I'd even opt to simplify the lists. And I wonder if those DIVs are really needed there and why each needs to be styled separately. See the Listamatic tutorials at http://css.maxdesign.com.au/index.htm . |
|
|
|
| Christian J |
Oct 28 2014, 05:44 AM
Post
#7
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Oct 27 2014, 11:52 PM) QUOTE(Christian J @ Oct 27 2014, 11:32 PM) Actually you can in HTML5: And ugly it is. I can see some practical advantages (such as reduced markup), but accessibility may suffer. As a user you need to know what is a clickable link and what is not (especially when using a touch screen). But if there's a block level element inside a link, the whole block level element (including all its white space) becomes an active link (not just the underlined text inside it), like a kind of Mystery Meat navigation. |
|
|
|
| Christian J |
Oct 28 2014, 05:49 AM
Post
#8
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(Ersan Yildiz @ Oct 27 2014, 11:06 PM) Hello, I get the error when I validating my site by errors May I ask if you used a template for this page? I recall seeing a code example with the same nesting error before.  |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 07:35 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC