html5 - How to close open html tags in an php foreach loop -
i have code produces horizontal menu in wordpress. however, produces invalid code because html tags aren't closed. have tried adding closing tags in loop seems mess menu bad.
foreach ( (array) $menu_items $key => $menu_item ) { $tiny_menu_list .= '<option value="'. $menu_item->url .'">'. $menu_item->title .'</option>'; if( !$menu_item->menu_item_parent ){ $menu_list .= '<li><div><a href="' . $menu_item->url . '">' . $menu_item->title . '</a>'; if( count($menu_items) > 1 ) $menu_list .= '<span>'; continue; } $menu_list .= '|<a href="' . $menu_item->url . '">' . $menu_item->title . '</a>'; } if( count($menu_items) > 1 ) $menu_list .= '</span>'; $menu_list .= '</div></li></ul>';
here code generates:
<li><div><a href="/">home page</a> <span><li><div><a href="/about-us/">about us</a> <span>|<a href="/why-us/">why ?</a>|<a href="/why-us/compare/">compare us</a> <li><div><a href="/tour/">take tour</a> <span>|<a href="/frequently-asked-questions/">frequently asked questions</a> <li><div><a href="/free-options-videos/">free options videos</a> <span><li><div><a href="/options-courses/">options courses</a> <span>|<a href="./">extended options course</a>|<a href="/ultimate-options-course/">ultimate options course</a></span></span></div></li></ul>
as can tell, each li & span & div not closed. thankfully browsers correct this, sake of being html5 compliant, use in fixing it.
this not due html tags, happening because missing many closing </div>
, </li>
.
on formatting code dumped loop shows this:
<li> <div> <a href="/">home page</a></li> <span> <li> <div> <a href="/about-us/">about us</a> <span>|<a href="/why-us/">why ?</a>|<a href="/why-us/compare/">compare us</a> <li> <div> <a href="/tour/">take tour</a> <span>|<a href="/frequently-asked-questions/">frequently asked questions</a> <li> <div> <a href="/free-options-videos/">free options videos</a> <span> <li><div><a href="/options-courses/">options courses</a> <span>|<a href="./">extended options course</a>|<a href="/ultimate-options-course/">ultimate options course</a></span></span></div></li></ul>
you can check error pasting code in html validator one
and show missing elements.
Comments
Post a Comment