HTML, hyperlinks, buttons, and onClicks

HTML is semantic. We have built in methods for creating usable, readable, and accessible websites using HTML elements.

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.

https://en.wikipedia.org/wiki/Semantic_HTML

Everything is aiming to be rendered as HTML. HTML provides our core building blocks for the web. You might write plain HTML, you might write JSX, you might do other weird and wonderful things, but their purpose is to output HTML; Because that is what the browser understands!

There are around 120 HTML elements, some are very specific, some are more general. Scan over them and learn a few.

Default browser styles have disconnected the meaning of these elements by being used based on how they look rather than their semantic meaning.

This coupled with the rise of JavaScript has introduced an issue I see all too often:

• <button> elements inside <a> elements.
• onClick events that manipulate the page or change the URL tied to <div>s.
• Other nausea inducing solutions.

🌊 divs, divs everywhere, and not a semantic meaning to see.

The Button Element

The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

As described in the quote, the <button> is not just for submitting forms. The element exists also to perform actions upon the page. By default it looks like a button, but the appearance can be changed via CSS to look however you want it to look. It can be used to open a menu, request more content for the page, make a box explode with confetti, whatever you want.

It has accessibility built in. It will take focus when ⇥ tabbing around the page. It will be read by screen-readers as an interact-able element.

It should NOT be used to take you to a new URL. There’s an element for that…

The Anchor Element

Ah, the very foundation of the world wide web. The hyper in hyperlink, the hyper in hypertext, the hyper in hyperspace!

The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link’s destination.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

It is used to link to other parts of the web, be that a completely different URL than the page you’re currently on, or an anchor to another part of the page, such as an ID.

But it doesn’t look like a button‽

You can make anything look like anything with CSS! Override the default browser styles.

An <a> can look just like a button, just refer to it as a call to action or something.

A <button> can look just like an <a>, or a pill 💊, or a hot-dog 🌭, or a spaceship 🚀.

The semantic meaning of an element should dictate its usage, not how it looks.

Andy Bell explains beautifully how to style your <button> and adds more to the accessibility argument.

What’s wrong with my <div onClick={someAbomination}>?

The above should have explained that through a process of elimination. But…

The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

It is not an element designed for interaction. It exists to group content, and the likelihood is there’s a more semantic element you should be using. It has no SEO or accessibility meaning of value. It’s the HTML equivalent of a plastic bag.

More on semantics

Avoid getting swayed by the default browser styles when thinking about your markup. Think about the semantic meaning of the elements you use. Then style them as appropriate. Semantics provide human interaction value. Do it for the people and also reap the rewards of SEO.

SEO you say?

Search Engine Optimisation; A robot reads your site to try and figure out what it’s about and then serve it to your potential audience when they search for something that your content covers.

These robots can’t see in the traditional sense, they see your code. Semantic mark-up gives context to your code. It explains to the robots what the <main> content is, what block of content is an <article>, etc. Make life easy for this little robot 🤖.

I found this talk given by Bruce Lawson at GOTO 2020 to be inspiring, here he covers in more detail the human side of being semantic with your mark-up.

Edit, since writing this Una Kravets has released a short video about semantic markup on the Chrome Developer Channel on YouTube,

I also published this on Medium.