Writing Your Best Code - Learn to Code HTML and CSS: Develop and Style Websites - page 268

Lesson 12. Writing Your Best Code
There's a lot to learn—different elements, attributes, properties, values, and more—in order
to write HTML and CSS. Every lesson until this point has had the primary objective of ex-
plaining these various components of HTML and CSS, in hopes of helping you to under-
stand the core fundamentals of both languages. This lesson takes a step back and looks at a
more abstract picture of HTML and CSS.
More specifically, this lesson focuses on the best coding practices for both HTML and CSS.
These coding practices serve as an overarching framework for writing HTML and CSS.
They apply to every lesson and should always be kept in mind when programming.
When you're reviewing these best practices think about how they may be used in other areas
or programming languages, too. For example, the use of comments to organize code (as we
cover in this lesson) is beneficial in all programming languages. Keep an open mindset and
consider how you can fully utilize each practice.
HTML Coding Practices
A lot of coding best practices emphasize keeping code lean and well organized. The general
practices within HTML are no different. The goal is to write well-structured and standards-
compliant markup. The guidelines described here provide a brief introduction to HTML cod-
ing practices; this is by no means an exhaustive list.
Write Standards-Compliant Markup
HTML, by nature, is a forgiving language that allows poor code to execute and render to
varying levels of accuracy. Successful rendering, however, does not mean that our code is se-
mantically correct or guarantee that it will validate as standards compliant. In addition, poor
code is unpredictable, and you can't be certain what you're going to get when it renders. We
have to pay close attention when writing HTML and be sure to nest and close all elements
correctly, to use IDs and classes appropriately, and to always validate our code.
The code that follows has multiple errors, including using the intro ID attribute value
multiple times when it should be a unique value, closing the <p> and <strong> elements
in the wrong order within the first paragraph, and not closing the <p> element at all in the
second paragraph.
BAD CODE
Click here to view code image
1. <p id="intro">New items on the menu today include <strong>caramel