HTML: Keeping It Organized and Understandable
When it comes to writing great code, what are the most important things to ask yourself?
- Is written in a way that can be easily understood by another developer?
- Can it be amended easily?
- Is it scalable? That is, will this codebase be adaptable to growth?
In this post, I’ll address the first question with respect to HTML. How can we write HTML in a way that is succinct, understandable, and organized?
First, using proper tags is key to writing HTML code.
<section> <article>
Each of these tags in HTML are functionally interchangeable, but each one has a specific purpose. In the example below, I’ve utilized both <section> and <article> to denote separate segments of text in an example web page. Stylistically they’re the same, however the <section> tag would imply an independent, generic segment of content, whereas an <article> tag communicates that the content is related to, yet separate from the section. Read more about the <article> tag here, and read more about the <section> here.
I highly recommend developer.mozilla.org as a resource to delve into the descriptions of each tag, and learn their intended purposes. Remember, you can be creative as you like in using these tools, but in writing code that can be easily understood, stick to the common conventions as much as possible.
Read more on HTML tags from Mozilla here.
Next, let’s talk about indentation.
Indentation is a technique when composing code that allows you and anyone reading your code to understand your code in an organized, legible way. In the above example there are <h2>, <p>, and <a> tags are child elements inside <section> parent elements. The indentation allows the individual reading your code to clearly differentiate parent elements from embedded child elements.
Many code editors enable you to format your text in a legible fashion with just a click. I personally use Visual Studio Code to write and edit HTML, CSS, and JavaScript. “VSC” allows you to format your code with a secondary click within your code (see the example below). Keep in mind that there is no “right way” or “wrong way” to indent (despite the many opinions you may read on the subject), but consistent formatting throughout your codebase is paramount to having your code be organized, readable, and understandable.
Check out this article that discuses indentation and HTML formatting.
Lastly, let’s discuss style editing.
HTML5 allows you to embed CSS style elements directly into your HTML code and it’s a great tool for making quick and easy modifications. However while it may be a great tool for adding small minor edits for styling, it’s best practice to create separate cascading style sheets that are linked to your HTML file. It’s easier to read and understand a separate CSS file with all of your styling elements, than to include the numerous lines of CSS code into HTML. In addition there are rules about specificity within CSS that may change the outcome of your styling unknowingly.
Understandability and legibility is paramount when writing all code, and HTML is no exception. It’s key to being able to communicate with other developers, be part of a team, and ask productive questions that will help you grow and learn as a developer. By using proper tags, structuring your code with consistent, standard indentation, and utilizing smart styling techniques, your code will look and feel more professional and understandable.
Andreé Kless is a web developer and federal air traffic controller based in the Maryland suburbs of Washington, DC.
