HTML

WAYS TO ORGANIZE HTML CODE

(quick & simple guide)

<!DOCTYPE html> <html>   <head>     <title>MY SITE</title>     <meta name="description"                  content="DESC">   </head>   <body>CONTENTS</body>  </html>

PROPER HTML PAGE STRUCTURE

01

<header>MY SITE</header> <nav>SITE NAVIGATION</nav> <main>  <article>HELLO WORLD!</article>

USE SEMANTIC ELEMENTS

02

 <aside>     <section>SIDE A</section>     <section>SIDE B</section>   </aside> </main> <footer>FOOTER</footer>

BAD <ul><li>foo<li>     <li>foo<li> <li>foo<li> <li>foo<li>                              <li>foo<li>       </ul>

PROPER INDENTATION

03

GOOD <ul>    <li>foo<li>   <li>foo<li>   <li>foo<li> </ul>

BREAK LONG PROPERTIES

04

<video   class="mystyle" id="myvideo"   controls autoplay muted loop   width="1920" height="1080"   preload="metadata"   src="myvid.mp3"     poster="vidposter.jpg"> </video>

ADD COMMENTS & NOTES

05

<!-- @NOTE: SOMETHING --> <ul>   <li>foo<li>   <li>foo<li> </ul>

USE SHORT SIMPLE NAMES

06

<!-- BAD --> <p id="UvUvWeVwEvWe-onYet"></p>   <!-- GOOD --> <p id="first-paragraph"></p>