Heeding to the Structure of your House — The Tools & The Foundation

Published in

Globant

7 min readOct 1, 2020

So you want to build a strong, beautiful, luxurious house. You pick your tools, lay the foundation, structure the building, paint & decorate each room/ area in the building and NEXT! You jump right into adding that cool infinity pool, that bowling alley, that walk-in closet, that tennis court and DONE!

One fine day, you wake up & realize that you don’t like the flooring any more or you would like to extend your tennis court to accommodate a few more sports and SNAP!
You realize that while you were building the house, you were so focussed on getting those amenities up & running quickly, that you might have overlooked the importance of structuring the building in such a way that it allows for easy future modifications & maintenance.

It has been a few years now. You have broken a few walls, in order to accommodate that home bar. You have layers & layers of paint on your walls, as per your ever changing “theme”. You have different flooring in each room. Things are a mess and your friends are not impressed when they visit these hideous corners of your grand, luxurious house.

Enough with the analogies! You get my point.

As Web UI developers, we often overlook the basics of structuring HTML/ CSS in our project. This might not appear to be a big deal, as it doesn’t affect (in most cases) the functionality you add via JS. But trust me, most HTML/ CSS code becomes a mess after a few months of active development. You struggle maintaining it and end up adding to the mess, until you reach a tipping point 💥.

Let’s discuss how we can lay the groundwork to avoid all this misery.

HTML Structure — Know the Tools, Lay the Foundation

Begin by checking off these items…

1. What goes into the <head>

Make sure to declare Doctype at start of the HTML document.
Use meaningful <title> for the application.
Use appropriate <meta> attributes, like description , keywords , viewport , etc.
The charset <meta> attribute can be used as a shorthand method to define an HTML document’s character set, which is always a good thing to do.
Know the order of styles you <link> .

Standard HTML document

2. Use Semantic Markup

It’s not a choice, it’s a must follow best practice (unless of course your web page is from pre-HTML5 era). It helps with SEO, accessibility & maintenance of your web application. Moreover, it’s easier for both people & the browser to understand.

Some common examples:

Use <main> : to specify the main content of the document. Your application body, minus the header/ footer should usually be encapsulated inside <main> .
Note: There must not be more than one <main> element in a document. The <main> element must not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Not to mention, use <header> & <footer> for header & footer of your application, respectively. You can use the <hgroup> element where you want a main heading with one or more subheadings.
Use <nav> for your navigation.
Use <section> for your containers: let’s move on already from putting everything inside a <div> . You’ll see how organized & readable your markup becomes, once you start practicing this tip.

Standard HTML page structure

Use tags like <article> , <aside> , <summary> , <figure> , etc to structure text rich content.
Make sure to use text-formatting tags, like <mark> , <strong> , <sup> , <sub> , <small> , <mark> , etc. (Read more on W3Schools)
Use <h1> to <h6> tags for your headings, in descending order of importance.
Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

Standard markup structure for articles

Use <table> to create tables and <tr> , <th> for table rows & headers respectively. Remember using <thead> , <tbody> & <tfoot> for detailed tables.

Standard markup structure for tables

Use <ul> for unordered lists, <ol> for ordered lists and <dl> for description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

Various lists depending upon the content

3. Mind Web Accessibility (A11y)

Using semantic markup helps immensely with web a11y. Additionally, use alt attribute with <img /> & title attribute with <a> . This provides a screen reader-friendly user experience.

Note: It’s important to follow web content accessibility guidelines (WCAG), in order to make your application accessible to people with special needs.

Using native HTML elements give you focus, keyboard support, and built-in semantics, but there are times when a simple layout and native HTML won’t do the job. For example, currently, there’s no standardized HTML element for a very common UI construct, the pop-up menu. Nor is there an HTML element that provides a semantic characteristic such as “the user needs to know about this as soon as possible”.

ARIA is good for bridging areas with accessibility issues that can’t be managed with native HTML. It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree.

You can dive deep into the fundamentals of web accessibility here.

4. Breaks in Markup

<hr /> tag can be used to define thematic changes in the content. It inserts a horizontal rule in an HTML page to divide or separate document sections.
<br /> tag can insert single line breaks in a text. It is useful for writing addresses or poems.

Standard page & line break markup

Commonly, we don’t use <br /> and <hr /> tags, as they don’t fit the graphic needs. Still, they are handy little tools in your toolbox.

5. Mind Self-Closing Tags

In HTML5 it is not strictly necessary to close certain HTML tags. The tags that aren’t required to have specific closing tags are called “self closing” tags, aka “void-elements”.

This means that the following are both acceptable:
<meta charset="UTF-8">
and
<meta charset="UTF-8" />

However, when it comes to standards, it is always good to religiously close all tags, whether it’s necessary or not. Reason being consistency & readability of code. It is much easier to visually inspect a page with well laid out markup. Working with this markup is easier for developers.
It makes little to no difference to a rendering engine in a browser that can parse markup written this way, so the tags can be considered redundant.

Some commonly used self-closing tags:<br /> , <hr /> , <img /> , <input /> , <link /> , <meta /> , etc.

6. Use Actionable Elements

All users must be able to determine if an element is actionable or if it is static content. Actionable elements are links, buttons, navigation and other control features, including swipe areas on touch devices that might be less obvious.

Use native HTML elements for actionable controls, rather than repurpose another element, as the required semantics and behavior will already be built in by default. Use the <button> element for buttons, the <a> element for links, <input> elements for form controls, etc. Additionally, native controls present users with a “look and feel” that they are already accustomed to.

When using CSS to style page elements, make sure that styles do not impact on the intended meaning of page elements; for example, ensure that buttons have the visual appearance to suggest that they are clickable, rather than plain text.

Take this tip with a grain of salt. We often come across such design requirements, where we must click a <div> to perform an action. Eg: accordions, clickable tiles, tree lists, etc. Although, always try to use native actionable HTML elements wherever possible.

7. Use HTML Entities

HTML character entities come in handy in the following situations:

Your keyboard does not support the character you need to type. Eg: em-dash (long dash) or the copyright symbol.
Your editor does not support Unicode (very common some years ago, but probably not today).
You want to make it explicit in the source what is happening. For example, the   code is clearer than the corresponding white space character.
You need to escape HTML special characters like <, &, or ".

Always keep an eye for scenarios where you could make your markup more readable by using these. Here’s a list of common HTML entities used for typography.

Looks like we are good to move forward…

…Time to apply what we learnt. Let’s build ourselves a house with strong structural integrity, simplicity & maintainability.

Standard HTML Structure

The following diagram depicts the structure of the above example:

Ready to Move-in?

It doesn’t look like you would want to move-in right away. Next, we shall take a look at finishing the house with plastering, flooring and paint job.

Photo by Ralph (Ravi) Kayden on Unsplash

We’ll add some styling to make the page in example CodePen, a bit easy on the eye. Effectively use CSS (with preprocessor like SCSS), in order to have well structured, readable & maintainable style documents. Have a brief look into Mobile First approach for Responsive Web Design (RWD).

So, check out Heeding to the Structure of your House — The Paint & The Decor next.