Front-end basics: #2 HTML – semantic elements, classes, id – Dev Bay

Table of Contents

HTML semantic elements

It is very important to use HTML elements in a proper way. If we want to list some text items, the we must create a normal list with <ul> or <ol> tags, not <p> or <div> tags with some additional CSS styles.

So what semantic elements do we have in HTML. There are more than 100 semantic elements, I will not double here very good MDN documentation, so you can check it here.

Basics of HTML semantic elements and common mistakes

I will focus here on the most common mistakes in HTML code which I have seen during my career.

As mentioned, creating text list with numbers or bullets, without using <ul> or <ol> tags. Always when we want to make numbered list then write:
```
<ol>
    <li>Point 1</li>
    <li>Point 2</li>
    <li>Point 3</li>
</ol>
```
and when you need list with bullets then write:
```
<ul>
    <li>bullet 1</li>
    <li>bullet 2</li>
    <li>bullet 3</li>
</ul>
```

Use headers: h1, h2, h3, h4, h5, h6 in right order, not just to change a font-size when needed. This should be used the same like in the newspaper. On one webpage there should be one h1 header. Often developers put logo inside that, but if we have a textual content, then h1 is reserved for the title of the article. Next below h1 we must write h2, under h2 write h3 etc. Check example below:

<body>
    <h1>This is the title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <h2>Subtitle level 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <h3>Subtitle level 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <h3>Subtitle level 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <h2>Next subtitle level 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <h3>Next subtitle level 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
</body>

Result:

In forms use buttons, not link “<a>” tags. This happens quite often nowadays, when developers use JavaScript frameworks like ReactJS or VueJS, they can bind click event to all kinds of elements, so they put e.g. “<a>” tag to send the form – which in the background will be send via ajax, not normal browser’s form interface. But this is wrong, wherever is form, there at the end must be a <button>.

In HTML tag ID attribute must be unique, so the same ID value must occur only once in entire HTML document. Class attribute name can occur many times.WRONG CODE:

<!-- wrong code example -->
<body>
    <button id="btn">Button 1</button>
    <button id="btn">Button 2</button>
    <button id="btn">Button 3</button>
</body>
<!-- wrong code example -->

CORRECT CODE:

<body>
    <button id="btn-1" class="btn">Button 1</button>
    <button id="btn-2" class="btn">Button 2</button>
    <button id="btn-3" class="btn">Button 3</button>
</body>

Whenever you create a clickable element you must use a link <a> tag or <button> tag. This is very important from accessibility point of view. When you add a click event to <div> element, it will be not accessible without mouse!

Short useful tips within HTML

Types of anchor “<a>” (link) elements

We can use a link (named also an “anchor”) <a> element on many different ways, let’s focus on most important:

Normal hyperlink – it will just direct user to another web page.
<a href="https://dev-bay.com">DEB-BAY.COM</a>
Open link in a new tab – you must add attribute target="_blank" to your anchor element:
<a href="https://dev-bay.com" target="_blank">DEV-BAY.COM</a>
Hyperlink with pointer to certain location on webpage – at the end of the URL we add one HTML tag’s “id” attribute value with # on the beginning, like "#nav_menu-4". So the final URL looks like below. When user click on that link, it will direct her/him to that webpage and SCROLL DOWN to location where element with id="#nav_menu-4" is displayed.
Click here to check how it works: DEV-BAY.COM TIPS
<a href="https://dev-bay.com#nav_menu-4" target="_blank">DEV-BAY.COM TIPS</a>
Send email hyperlink – it will open the default email client app on user’s computer. To be honest – in nowadays it is not such a good way to use it. Most often users check and send emails via post web apps, not the “default outlook” application installed on computer.
<a href="mailto:someone@domain.com">someone@domain.com</a>
Telephone number hyperlink. This is a very useful feature nowadays. When user opens your webpage on mobile phone and wants to call you directly, then just click and mobile phone will start calling this number.
<a href="tel:98765422">Call: 98-765-422</a>
Download hyper link. You want to make a link for downloading the “.txt” file. But when you do that, browser will just open the text file directly itself. If you want to make it downloadable just add property download.
<a href="https://dev-bay.com/some-text-file.txt" download>Download text file</a>

Read HTML “data-” attributes values in JavaScript

If you want to add additional data to your HTML elements and reuse it in JavaScript, than you can use for that data-*="" attribute. This is a fully correct method to add our own custom attributes for HTML elements:

CORRECT: <li data-currency="EUR">1 000</li>

INCORRECT: <li currency="EUR">1 000</li>

And this is a good way to push or bypass some data to JavaScript from HTML. Of course, remember that mostly this is a good workaround, but not the target good solution. You should use it in situation you have very limited access to data model and transferring it to JavaScript code, but you have some control over the displayed HTML. Situation like that might happen in some older software e.g. build in SAP systems which needs to be extended after many years of development.

So you can e.g. generate HTML code with data-* attributes with some defined values and read it from JavaScript.

Example – in your old ERP system you have USD as currency, but now, for a new team based in Europe, you must display in EUR currency. You have control over HTML table but to the end user you must display formatted values, like “1 000 000 USD”, but in you HTML code you have also nominal value and currency, so you can avoid string like “1 000 000 USD” parsing in next step. The right place to hold nominal value and currency are data-*="" attributes.

So let’s say your default table looks like:

<ul>
    <li>1 234 USD</li>
    <li>2 837 923 USD</li>
    <li>398 834 USD</li>
    <li>200 000 USD</li>
</ul>

and it looks like below:

So as I stated, it is hard to operate on data like we have in strings in list in format like “2 837 923 USD”, but as long as we can add nominal value and currency in data attributes, we can be 100% sure that we will take right data to convert. The result HTML should look like below:

<ul>
    <li data-value="1234" data-currency="USD">1 234 USD</li>
    <li data-value="2837923" data-currency="USD">2 837 923 USD</li>
    <li data-value="398834" data-currency="USD">398 834 USD</li>
    <li data-value="200000" data-currency="USD">200 000 USD</li>
</ul>

And now, we can add simple JavaScript code which will take the data attributes values and transform that into EUR giving in result well formatted string. Check this out:

const newCurrency = "EUR";
const exchangeRate = 0.8;
const items = document.querySelectorAll("ul li");

items.forEach((item) => {
  const oldCurrency = item.getAttribute("data-currency");
  const oldValue = parseInt(item.getAttribute("data-value"));
  const newValue = oldValue * exchangeRate;
    
  if(oldCurrency === "USD") {
    item.textContent = newValue + " " + newCurrency;
  }
});

Check how it works with full code, you can download it HERE.

Forms HTML5 validation

This is longer story – read more about that in our another article HERE – HTML5 FORM VALIDATION.

Tables – fix columns widths, wrapping text inside cell

How to make table with the same or predefined widths of columns, or to wrap long text or long one single word in table – read HERE MORE ABOUT TABLES.