The Designer’s Guide to the Galaxy… (of Code) E03
Among the thousands of stars in the milky way of design articles, one story will froth up above all others — “Should designers learn how to code?”
This is, yet again… not that story.
Welcome back to our designer-friendly code spaceship! On our two previous episodes, we looked into the basics of HTML and orbited some of the tools you can use to write code.
Let us now pierce a bit more deeply into the anatomy of HTML elements and the basic structure of a web page.
Attributes, attributes everywhere!
As we have already seen, HTML elements are composed by an opening and closing tag and have content between those (text or further child elements), but we previously skipped other key constituents, called attributes.
Attributes are used to give browsers extra info about the element, they should always be declared inside the opening tag (since some elements don’t have a closing tag) and separated from each other by a single space.
Let’s check an example of an anchor, the HTML element that is used to generate hyperlinks…
As you can see, the href attribute takes the URL of our link between double-quotes, in this case, another document in the same folder as the hypothetical document we are on.
Just so you know, the hypertext reference attribute can actually do more than link documents, it can be used to open an email client with our desired address on the recipient (i.e. href="mailto:johndoe@gmail.com"), or even open ftp connections.
Also, while I have said that attribute values should be declared inside double quotes ("), it is fine to use single quotes ('), just as long as you consistently use them in your documents. I personally use doubles when writing HTML and switch to singles when writing JavaScript (makes things simpler when doing React, where you can have HTML in the middle of your JS).
There are plenty of other attributes available for anchors and even more for other HTML elements.
There are common ones like id and class which are related to CSS (we will clarify this relation on the next episode). Boolean attributes like disabled (buttons) and checked (checkboxes), which are called such because they are either true or false, and as such do not require a value. You can even create custom data- attributes that are the best way to add JS connected information.
Before you start worrying about memorizing dozens of attributes and their values, I will let you in on a secret… no one actually knows any of this by heart, we just look them up from time to time on documentation sites like the Mozilla Developer Network. 👨💻
Page anatomy 101
Just like elements have anatomy, pages also have their own structural rules, albeit not as strict or predictable.
Take the following example…
This is what all of this should look like on your browser…
Breaking it down, we have our head and body elements (notice how things inside the head are meant for the browser only and the content of the body is visible, just like the HTML element attributes and content) and inside the body we will typically find the following elements:
Header
Normally a big title of the page or a strip on top that is always shown in all the site pages (it can also stick to the top when scrolling).
Nav
Kinda self-descriptive, this element takes the main navigation links of the site.
Main
Where the, you guessed it, main contents of your page go into.
In our example, it contains an article (it could have been several articles like in the case of blogs) with the text content of the page and an aside, which usually is used as a sidebar with secondary links and information related to the article.
Footer
The bottom part of your site, like the header it normally appears in all pages and takes information like the copyright.
Nothing is true, (almost) everything is permitted
While I have place the asideinside the main, it could also be placed before or after to the main, and hold the primary nav (i.e. your hamburger with side of hidden menu).
This is the beauty of HTML, while it’s good practice to format your documents in certain standard configurations, doing something different (if you have reason to do so) will still get you a valid page, that renders as it should on the browser 😎
And that is that for this episode! Next time I will take your for a CSS space walk and show you how it dances the perfect sideral tango with HTML.
So long, and thanks for all the claps 👏
