Hello World

👋 🌎

HTML is the foundation of most web pages — it’s how we tell web browsers to structure content into titles, headings, paragraphs, images, links, lists, forms, tables, and more. In this post, we’ll learn what HTML is and what it’s used for. Then, we’ll review some of the most common elements and attributes in the language. Finally, we’ll end with some of the common elements for a blog post. Let’s get started.

Here we have the template for other blog posts on JustinChill.com. On this page is each HTML element available in one place. Inconsistencies in styles are easier to spot this way, and it's also a reminder to use a variety of elements in your content.

What is HTML

HTML is a markup language that defines the basic structure of web pages. Usings tags and attributes, HTML tells browsers how to both process text and present it to the viewer. With HTML, you can specify which part of the document is a title, which is a list, which is an image, and so on. You can also hyperlink a word, embed an image, italicize font, and do much more.

HTML is short for Hypertext Markup Language. “Hypertext” is text that contains references to other text or pages, more commonly known as hyperlinks. Hyperlinks let you jump to another section of the page or open an entirely new page. Hyperlinks can also open a PDF, email, or multimedia, like a video or audio file. Semantic HTML is HTML code that uses HTML tags that effectively describes the purpose of page elements. Semantic HTML code communicates the meaning of its element to both computers and humans, which helps web browsers, search engines, assistive technologies, and human developers understand the components of a web page.

<p>: The paragraph tag signifies a paragraph of text. Anyone or any device reading this tag will understand its purpose.
<h1>, <h2>, <h3>, etc.: Headings on the page in descending order of importance.
<a>: A hyperlink.
<button>: A button element.
<strong> and <emphasis>: These elements signal that the text inside them is important.
<ol> and <ul>: Ordered and unordered lists, respectively
<header> and <footer>: Denote the header and footer sections of a web page.

The Stack

This blog is built using HTML and CSS.

This stack requires no maintenance, has perfect Lighthouse scores, has an instant development loop, and is an exercise in reductionism.

The entire project is in git, pushed to GitHub, so GitHub Pages is my web host. This means it's super portable: just edit, push, and your changes are live.

My requirements building this site were:

simplicity
performance
long term support

The Authoring Process

Writing pure HTML + CSS requires nothing more than a simple text editor. It's platform and device agnostic and can be previewed using any web browser by opening the file.

The typography and layout design here is inspired by some of the best examples of online content I have come across: Pudding.cool, NYTimes.com, Medium.com, etc. Each webpage is built from scratch, with ideas copied from people far smarter than me from around the web. Wherever I could, I tried to use semantic HTML, which means organizing content using logical elements like article and figure. It also makes for cleaner code. 🤓

An example of semantic code are the different tags available for text:

`<mark>`

This is some regular plain text, and this is some text we are highlighting using the mark element.

`<del>`

Using the del element on ~~text that we are indicating is deleted~~.

`<ins>`

Opposite of the last one, this is text that we are indicating has been added. We do this with the ins element.

`<s>`

This is an example of ~~text that is no longer relevant~~. We do this with the s element.

There are tons of simple techniques that allow typography to pop on the web. Typography is the art of typefaces, point sizes, letter-spacing (tracking), etc. The first letter of the paragraph above is one example. Another is limiting text to 80 - 100 characters per line. Otherwise, everything you read starts to look like Wikipedia and your eyes will glaze over. For a deeper dive on typography, see here.

Images

I'm a figcaption for the above image.

This image spans 3 columns of the 7 columns total in the layout. That gives the image more breathing room and breaks up the page visually.

Fonts

When designing a website you should consider fonts for three types of text: the content, the UI, and your brand. Specifically I found that the best free alternatives (Google Fonts) to the handcrafted fonts that Medium uses are Lora, Montserrat, and Playfair Display SC. I discovered with delight that the last one mimics almost perfectly the effect created especially for a blockquote element.

I'm an example of an aside element. Appears on the right on large screens and as a row on smaller screens.

Content font

The content font should be a serif one, to gently bring your eyes from one letter to the other with the lowest amount of effort.
line-height and letter-spacing are vital here. Play with those parameters to make the most out of your font of choice. However at Medium you'll find almost an empty line of space in the middle of two lines of text (line-height: 1.58;). While the space between the charachters is kept a little bit on the negative side (letter-spacing: -0.03;) to make words feel more compact.

Brand font

The purpose of this font is to enforce the presence of our brand during the navigation experience. We can use it for titles and, here and there, for some minutiae. The brand font we are using on this page is Playfair Display. Notice the border-left on the following blockquote- this is done using CSS Grid.

There is no sincerer love than the love of food.

UI font

The font used for all the UI elements is preferably a sans-serif one. It should create contrast with the content font. Its color could be a little bit lighter than the one used for the main content.
It needs to be readable given the background-color of your page but not distracting from the main purpose of the page- reading!
You can also use it for h2 - the titles for your paragraphs. Here the color should be the same as the one used for the main title.

Maintaining footnotes manually can be a pain. By using CSS counters to add the numbered references in the text and an ordered list to display the actual footnotes in the footer, it becomes extremely easy.

The highlight

To highlight a word or phrase you can wrap them in a span element and set the background to a color that evokes your brand color identity. Here I am using a simple green.

A figure spans the entire page, as opposed to a medium image.

The length

The length of a line of text should never be longer than 740px. So our eyes are not forced to run from left to right on the page. CSS Grid makes this really simple to accomplish- on this page we have a 7 column layout made up of 2 fr units, a tiny 10px gutter column (used for the blockquote border), and a central column with a max-width of 740px.

Here we find rgba(0, 0, 0, 0.54) to give the subtitle meaningful information without grabbing the attention that the title deserves. This subtitle is a p element, but it should probably be a h3 or h4 element instead. Coming up next we have a full bleed image:

The color

The text color should be rgba(0, 0, 0, 0.84) on a rgba(255, 255, 255, 1) background to ensure the best contrast possible.

Conclusion

As always, the strict first rule of design is that there are no strict rules.
But, if you are looking for a good template...

Uncommon thinkers reuse what common thinkers refuse ✍️