Nobody Likes Rude Code
It may seem ridiculous or silly, but there’s such a thing as being a respectful dev that writes clean, proper code.
What does this look like? Well, a site with well-written markup will have:
- Logical or Liner Ordering
- Properly Nested Tags
- Indented Elements
There are many other unspoken rules you can Google, but those 3 are my major pet peeves when done poorly - and I’m likely to call you out on them.
Ordering
Most languages read and process top-to-bottom, so its important to list these elements linearly and/or logically down the page.
<!DOCTYPE html>
<html>
<body>
<!-- This is improper ordering of blocks. -->
<!-- The footer should come after the main content. -->
<div class="footer">
<p>(C) Justine Evans, 2017</p>
</div>
<div id="mainBody">
<h1>"Debt"</h1>
<h2>A sonnet about student loans.</h2>
</div>
</body>
</html>
Burrito Those Tags
We “wrap” elements in opening and closing tags, as you know. You’re now familiar with single-tag element sets like <p>...</p>, but elements can actually have multiple sets of tags. It’s considered proper to layer these sets in concentric orbits around the element.
This basically looks like <tag3><tag2><tag1>...</tag1></tag2></tag3>
<!DOCTYPE html>
<html>
<body>
<!-- From a recently released deleted scene: -->
<p>Spengler: "There's something very important I forgot to tell you."</p>
<p>Venkman: "What?"</p>
<p>Spengler: "Dont cross the streams."</p>
<p>Venkman: "Why?"</p>
<p>Spengler: "It would be bad. Almost as bad as <a href="https://youtu.be/jyaLZHiJJnE"><u><i>improperly nesting HTML tags.</p></a></i></u>
<p>Venkman: "What's proper?"</p>
<p>Spengler: <a href="https://youtu.be/jyaLZHiJJnE"><u><i>This</i></u></a>.</p>
</body>
</html>
True story.
Indentation
There isn’t total protocol for indent depth, although standard procedure is to indent one tab (or 2 spaces) for each new element that is a child of the one above it.
Indentation doesn’t effect how the page renders, but makes a huge difference in the readability of the code.
<!DOCTYPE html>
<html>
<body>
<!-- This is a mess, and considered in poor taste: -->
<ul id="main-navigation">
<li><a href="#">Home</a>
</li><li><a href="/about">About</a></li><li>
<a href="/contact">Contact Me</a></li></ul>
<!-- This is considered best practice: -->
<ul id="main-navigation">
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact Me</a></li>
</ul>
</body>
</html>
An extreme example would be the nested list from the previous page:
{ TODO: }
Skim W3School’s HTML5 Style Guide for proof that you can have “very bad” code that actually works, but is considered in poor style and just plain rude.