Elemental HTML

Learn about the basic building blocks of every web page and how to control them on Hot Page

If you have even a little bit of experience building web pages, you may want to skip past the basics and read about the specifics of using elements on Hot Page.

The Basics

On a web page, pretty much everything is an “element.” This paragraph, the menu at the top of the window, the links in the menu—these are all elements. We create elements by writing in a computer language called HTML, which stands for HyperText Markup Language. Elements are created by so-called tags that appear in angle brackets like this and surround your content:

<p id="intro" class="big bold">The Queen of Hearts, she made some tarts</p>

Here, we have an example of a paragraph made with the <p> tag, just like the one you’re reading now. When a browser renders the page for you, the text “The queen of hearts, she made some tarts” will be the only thing that you see.

This paragraph that we just made has two so-called attributes: id and class. There are any number of attributes that you can put on an element but these are two of the most useful because they will help us identify this paragraph when it comes time to style it.

There are, of course, many other types of elements, not just paragraphs. For example, the <a> or anchor element creates a link to another page, the <h1> tag is for headings, the <em> tag is for emphasis. Here are some of the most useful:

• h1, h2, h3, h4, h5 and h6 are headings of different levels. They represent the start of a section of content and are very important for visually impaired users because screen readers will use them to create an outline of the page.
• div This is probably the most common element and it basically has no semantic meaning. It’s just a “division” and you can style it however you want using classes or an ID.
• pre is for pre-formatted text. Inside this element you can type two spaces and expect to see a bigger space (this is generally not the case as explained below).
• aside holds a piece of content out of the main flow of text.
• blockquote is used for quoting a block of text from another source.
• main holds the central well of content.
• section can be used to divide content into distinct parts.

All of the above elements are called “block” elements and are generally things that take up the full width of the page and cause the things after them to jump to a new line (although not always, depending on their styles).

The following elements are “inline” elements because they can exist within a line of text:

• a or anchor is for making links with a the href (or hypertext reference) attribute that contains the URL of the page for the link.
• span is like the div element in that it gives no meaning.
• b or strong are for bold text.
• i or em (emphasis) are for italic text.

That’s very far from a full list of elements and if you plan on really learning this web stuff, you will probably want to consult a full list.

Picking the Right Element

All this talk about picking elements can seem a little pointless. I mean why worry about using the <main> element when you could just write <div class="main"> and visitors to your site will never know the difference. Is it just splitting hairs?

This is actually a quite controversial subject. It goes to the heart of something called the Semantic Web, or the idea that we should be adding markup that enhances the meaning of text so that machines can read it and understand it as well.

That idea is pretty much dead these days, the victim of a power struggle between the W3c (an organization created by the inventor of the web, Tim Berners-Lee) and the large tech companies like Google and Apple that took the technology in a different direction.

There are still some very good reasons to pick your tags with care, however.

• For one thing, you can read them while you’re working on your markup and so can other people (or your future self). The meaning of the <main> tag is pretty apparent and this context can really help people understand the structure of a page.
• Machines can read them too. At one point, this was very important for search engines and the content in your <h1> tag was considered very important to “optimize.” Then people started gaming this system and these days Google is certainly doing a lot of black art to figure out what your page is really about. These tags can still be important for other web crawlers and dumber search engines, like the one we built for this documentation web site.
• Accessibility is another important reason. Visually impaired people often use something called a screen reader that lets them listen to the text of a page spoken in a computer-generated voice. This software depends quite heavily on tags, skipping over navigation in a <nav> element or jumping to different sections using headings like <h1> as a guide.
• Browsers can also use tags in some subtle and often surprising ways. For example, if you’re building an accordion for your page, your first instinct might be to just use some <div>s and slap classes on them. It turns out that HTML has the <summary> and <details> element for just this purpose and there is a hidden advantage to using them: when a reader uses the find in page function to search for a word, the browser can open these elements and show results inside of them. Your <div>-based accordion might look and work great, but it’s never going to have that feature.

So, when in doubt, pick the right tag. It’s not very difficult and it’s definitely the safer bet.

Elements on Hot Page

In the example above we had this HTML tag which creates a paragraph element:

<p id="intro" class="big bold">The Queen of Hearts, she made some tarts</h1>

Since editing HTML elements like this is essentially the core of what we do on Hot Page, the editor employs a shorthand for defining elements based on the way that CSS selectors work. We can create the element above on Hot Page like this:

Writing HTML like this is a bit more concise and easier to read, while giving more emphasis to the content and minimizing the markup. It also has the advantage that it looks more like the selectors we use in CSS when we style our elements.

Custom Elements

One of the newest features of the web lets you create your own elements. These elements are built in JavaScript and can do pretty much anything you can imagine. Let’s take a look at an example from the Hotfx library:

That will create something like this on your page:

In order for this to work, you’ll need to add a bit of JavaScript to the page that defines this custom element and does the work of drawing that circle around the text. That work is all a bit complicated, but the very cool thing is that you don’t need to worry too much about the details to use these custom elements on your pages.

Custom elements, which are also called web components, are still pretty new but there are already many publicly available elements that you can use today. Here are some of the favorites around Hot Page:

• CSS Doodle Create geometric designs with a variant of CSS
• Model Viewer Embed 3D models
• Shader Doodle Use WebGL to create cool effects
• Shoelace A collection of many different elements with some really great functionality, like a QR code, a copy button, a carousel, a star rating button and one of those image diffing slider things.

If you want to build your own, LitElement can be a great way to get started.

A Word About White Space

You may have noticed a peculiar feature of the Hot Page editor is that it won’t let you type more than one consecutive space. This is not just a quirk of its design, but reflects something about the design of HTML itself: white space is not significant.

This means that in an HTML source file, you could write 10 spaces and only one would show up. The language was designed this way because it was markup, half document and half code. When people write code, they typically indent nested blocks of elements to make it easier to read, but we wouldn’t want to show all that indentation to the reader. So if you actually want to make empty space, you’ll have to use HTML or CSS.