You have learned enough HTML by now to create some basic websites. In this section, I want to give you some house rules on your HTML documents. We usually call these rules style guides. Style guides don't fix code errors, they are a set of aesthetic rules for developers to follow. Keeping a consistent style guide across a team makes the code much easier to read and follow for the author and others.
Indentation
We will start by indentation, indentation is the offset of elements when they are contained inside another element. We use 2 spaces for indentation. If you are using the Visual Studio Code text editor, you can set your default indentation on the settings page. Use the shortcut "command + ," or "ctrl + ," for Mac and Linux/Windows to access the settings page. Select "Text Editor" and type "tab size" in the search bar. Change it to 2 if it isn't already.
Always indent when you are creating a child element. A child element is an element nested in a surrounding parent element. Make sure you are indenting correctly. VS Code should auto-indent for you when you create new elements. Keeping the indentation right helps you make out the structure of your HTML much faster.
Bad
language=>HTML
<section> <!-- Parent to article -->
<article> <!-- Parent to paragraphs -->
<p>some paragraph</p>
<p>some paragraph</p>
</article>
</section>
Good
language=>HTML
<section> <!-- Parent to article -->
<article> <!-- Parent to paragraphs -->
<p>some paragraph</p>
<p>some paragraph</p>
</article>
</section>
Close all element tags
Make sure that you are closing all your element tags, missing some closing tags may result in render errors.
Bad
language=>HTML
<section>
<p>some paragraph
<p>some paragraph
</section>
Good
language=>HTML
<section>
<p>some paragraph</p>
<p>some paragraph</p>
</section>
Close self-closing elements and empty elements.
Allowed: actually the correct way to write a self-closing tag is with the /.
language=>HTML
<meta title="Best Page">
Preferred: just for aesthetic reasons, the / is ignored by the browser.
language=>HTML
<meta title="Best Page" />
Lower Case Element Names
Believe it or not, both uppercase and lower case elements will work. But we are going to keep the element names as lowercase.
Bad
language=>HTML
<A HREF="/">Home</A>
Good
language=>HTML
<p class="biography">some paragraph</p>
Lower Case Attribute Names and Values
Keeping to our lower case preference, make sure you attribute names and values are also in lowercase too.
Bad
language=>HTML
<p CLASS="BIOGRAPHY">some paragraph</p>
Good
language=>HTML
<p class="biography">some paragraph</p>
Quote attribute values
If you want your attribute to contain multiple values separated by spaces, you must use a quotation marks. Our preference is to use a double quotation mark in HTML (").
Error: dark is treated as an attribute name
language=>HTML
<p class=biography dark>
Bad
language=>HTML
<p class=biography>
Good
language=>HTML
<p class="biography">
<p class="biography dark">
Spaces and Equal Signs
In HTML, we prefer not to have spaces before and after (=) equal signs. Not having spaces makes it more compact and easier to read.
Bad
language=>HTML
<p class = "biography">
Good
language=>HTML
<p class="biography">
Soft Wrap
This isn't an HTML style rule but a setting on your VS Code editor. When you type a very long sentence, the normal behavior is to extend the sentence to the right, and you have to scroll to view it. Set the "Word Wrap" setting to true in the editor settings page. Type "Word Wrap" in the search bar and you will see it. Turn it "on".
Try to follow these rules when you work on the assignments and projects.
