Front-End Tutorials: HTML basics (part 2)

5 min readDec 6, 2022

These Front-End Tutorials articles will be used as my personal learning notes but at the same time as a way to distribute information to everyone interested in learning Front-End Engineering.

This blog post will cover more basic information about HTML structure and semantics to improve our knowledge and understanding and master this markup language.

HTML syntax

DOCTYPE

The doctype notation tells the browser that the document is in HTML format. This must always be the first line of every HTML document.

<!DOCTYPE html>

The html refers to the current version of HTML which is version 5.

HTML Element

<!DOCTYPE html>
<html>
 
</html>

After declaring the doctype, we must add an opening and closing <html> tags and every code inside these tags will be considered HTML code.

Head Element

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>

  </head>

</html>

Unlike the body element, the content of the HTML <head> element is not displayed on the web page. It’s only used to describe the page metadata and it must be placed above the body element inside the <html>.

One of the most used metadata types is <title> which is used for the browser’s tab titles.

Anchor Element

// Jump to an external site in a new tab
<a href="https://en.wikipedia.org/wiki/Tiger" target="_blank">
  Tigers
</a>

// Jump to a different page in the same folder of the current page
<a href="./contact.html">
  Contact
</a>

// Use an image as the anchor to the hyperlink
<a href="https://en.wikipedia.org/wiki/Tiger" target="_blank">
  <img src="./tigers.jpg" alt="A Tiger image."/>
</a>

// Jump to a different section on the same page using the id property
<a href="#top">Top</a>
<p id="top">This is the top of the page!</p>

The anchor element, also known as a hyperlink, is the fundamental component of the internet that enables us to navigate between websites.

The href property of the <a> tag must specify the local place or remote URL that the browser should send us to when it is clicked. The href property can also be used to jump inside the same page using the id property of HTML elements.

The content of this element is what will be clickable and it can be anything, from simple text, to images or other HTML elements.

The target property as “_blank” is used when we want the next page to be open on a new window/tab.

Comments

<!-- This is a comment that the browser will not display. -->

<!-- <p> This paragraph will not be displayed also. </p> -->

This is how to write comments on an HTML file that will not be presented on the website no matter its location.

Table Element

<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Temperature</th>
      <td>73</td>
      <td>81</td>
    </tr>
    <tr>
      <th scope="row">Busy</th>
      <td colspan="2">Yes</td>
    </tr>
    <tr>
      <th scope="row" rowspan="2">Actions</th>
      <td>Read book</td>
      <td>Write blog</td>
    </tr>
    <tr>
      <td>Learn HTML</td>
      <td>Buy groceries</td>
    </tr>
  </tbody>
</table>

<table> is the HTML element that allows us to present information on a two-dimensional table. Inside this element there are some child elements that are worth noticing:

<tr> — table row — add rows to the table
<td> — table data — add cells to the table’s rows
<th> — table heading — add headings to rows and columns
scope=”” — defines that the header element relates to a column or a row
colspan="2" — defines the number of columns that the row will span across
rowspan="2" — defines the number of rows that the column will span across
<tbody> — should include all the table’s data excluding headings
<thead> — should contain the table’s headings

Semantic HTML

Semantic HTML is when we use HTML elements that provide information about its content. This means that instead of just using <div> and <span> tags, we may prefer to use more meaningful tags, for example, <nav>, <article> or <footer>.

This will increase the accessibility of our website since screen readers are able to better interpret the HTML code. Semantic HTML also boosts the SEO, which means we increase the number of visits to our website. Also, this serves as documentation purposes as the code will be easier to read and maintain.

Header Element

<!-- Instead of using this: -->
<div id="header">
  <h1>
    This is a header without Semantic HTML!
  </h1>
</div>

<!-- Our code will be better with this: -->
<header>
  <h1>
     This is a good use of Semantic HTML!
  </h1>
</header>

Used to contain all the headings (from <h1> to <h6>).

Nav Element

<!-- Instead of using this: -->
<div id="nav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#posts">Posts</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

<!-- Our code will be better with this: -->
<header> 
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
      <li><a href="#contact">Contact</a></li>     
    </ul>
  </nav>
</header>

Used to define a block of navigation links.

Main and Footer

<main>
  <header>
    <h1>This is an H1 header with semantic HTML.</h1>
  </header>
  <article>
    <h3>This is the article's heading.</h3>
    <p>
      This is the article's paragraph.
    </p>
  </article>
</main>
<footer>
  <p>Contacts and other notes</p>
</footer>

The <main> element can be used to include all the dominant content of the website including text, headings and other media content.

The <footer> is where we should place all the additional information like contacts, or secondary links like “about me” or “terms of use”.

Section, Article and Aside

<section>
  <h2>Section's Heading</h2>
  <article>
    <p>An article that belongs to this section.</p>
  </article>
  <aside>
    <p>
     Can contain the bibliography for example.
    </p>
  </aside>
</section>

The <section> encapsulates elements that are related to each other. This can be the several sections of your landing page, for example.

The <article> element is used when its content makes sense on its own and is commonly used for articles, blog posts or comments, for example.

The <aside> is used for additional information like bibliography, endnotes or comments.

Figure and Figcaption

<figure>
  <img src="random-image.jpg">
  <figcaption>This is the image caption.</figcaption>
</figure>

The <figure> is used to encapsulate media such as images, illustrations, code snippets, etc.

The <figcaption> is then used to describe the corresponding media.

More details about HTML can be found here.

Thanks for reading. Hope this helps you as much as it helped me. ❤️
If you want to follow my Front-End Learning journey, follow me on Medium and Twitter.