A Minimalistic Approach To HTML

Photo by Jackson Sophat on Unsplash

A Minimalistic Approach To HTML

Oye Ibrahim's photo
Oye Ibrahim
·

2 min read

In this article, we're going to talk about tags, those used to build a basic website. let's begin...

We've heard a lot about semantics in HTML, and we've also heard so much about HTML tags; how numerous they are, what they represent and how they're supposed to be used. What I want to talk about today though is the basics, a minimalist approach to HTML for those who are just getting started.

To properly define an HTML file, we must first declare the version we're using, that is the document type. This document declaration holds the "information" that tells the browser what document type to expect. and since we're now on version 5 the document type to expect is written like so: <!DOCTYPE>

In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

in XHTML 1.1 is written as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

and in HTML 4.01 is written as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOM representation of Table 1. The html tag is the parent with head, body, and footer tag as the children. Head has a child tag title, body has a child tag p, and footer has a child tag p.

After the document type, comes the container tag <html> it represents the root of an HTML document. All other documents and tags should be written inside the container and after it is the <head> tag. The head tag is the container for "metadata" but that won't be discussed in this article, since we want this to be as basic as possible.

In addition to the "metadata" the <title> tag holds the "title" of the document, you should note that the title won't be displayed on the page, rather it will be displayed at the tapbar of your page.

ENTER BODY TAG: Whatever you plan on displaying o the website should go inside the body tag e.g tags such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

<!DOCTYPE html> 
<html> 
  <head>
    <title>A Basic Web Page
    </title> 
  </head> 
  <body> 
A Minimalistic Approach To HTML

    <h1>My First Webpage</h1> <p>Congratulations!</p> 
  </body> 
</html>

One last thing before we conclude, if you notice the code above you'll see that all these tags; at least most of the ones we discussed here have a closing tag. In another article, we'll discuss semantics meta tags and the rest of the tags in HTML to improve our knowledge of how to build a modern-day responsive website. Till next time keep coding. Peace!

HTML5tagsnewbie