Apr 24, 2021

10 min read

Headstart to HTML5

A Quick Guide to the basics of HTML5 for beginners

Even if you are a toddler taking baby steps preparing to explore into the world of web design or a seasoned web grandmaster keen on sharpening your skills, we got you covered. This series that we are starting is solely aiming on giving a taste of the minutiae of everyday Web development to all inquisitive minds out there.

It goes without much pom poms that if you want to make it big in the domain of Web Development, then you must get your foundation right, which can be reiterated to simply to learn HTML. HTML is a simple yet powerful coding tool for Web Development, which is used along with CSS to build awesome websites.

HTML, aka Hyper Text Markup Language, is a code that is used to build and structure web pages and make them functional. To put it simple, it consists mainly of matching pairs of angle-bracketed tags, enclosing slices of human-meaningful text.

To start with, we could say that an HTML document consists of text, that comprises the content of the document and tags, which define the structure and appearance of the document. The basic structure of an HTML document is simple with the entire document bound by a pair of <HTML> and </HTML> tags.

<!DOCTYPE html>
<html>
<head>
<title> My First Code </title>
</head>
<body>
<h1>Hello, World! </h1>
<p>My first paragraph. </p>
</body>
</html>

The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
The <html> element wraps all the content on the entire page and is sometimes known as the root element.
The <head> element contains meta information about the HTML page. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results.
The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph.

For creating HTML documents, an HTML editor like Frontpage or Frontpage Express could be used, or else at the very least your machine’s in-built Notepad and a web browser like Google Chrome shall work too.

After typing your code in the text editor or notepad, save it with a .HTM or .HTML extension. It can be later viewed by typing in the previously saved document’s name along with its path and BAM, you’ll be able to view the marvelous creation that you created from scratch in action.

Just like we say that Cells are the basic structural and functional unit of an organism, in the case of HTML, it is the Tags. When I say these tags are so powerful that they can do anything, I actually mean every word of it. You can italicize words, can make the font bigger or smaller, make a word or image hyperlink to somewhere else and so on.

A pair of matching tag and the text it encloses is called an element.

Let’s look at them one by one.

1. Opening Tag: It contains the name of the element enclosed by angle brackets marking the point from where the element starts to take effect, in this case the <p> or Paragraph.

2. Closing Tag: It is similar to opening tag, except that it includes a forward slash before the element name. It marks where the element ends.

3. Content: The content enclosed, which in this case is text.

4. Element: The pair of tags with the content together comprises an element.

Note: Some HTML elements neither have content nor a closing tag. These elements are called empty elements.

Eg: <br> — single inline break, which ends a line and wrap to the next line.

Another component that works hand in hand with Tags are Attributes. Attributes contain additional information about the element that you don’t want to appear in the actual content.

<img src=”MyCat.jpg” alt=”My Cat’s image”>

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

Nesting elements

Elements can be placed within other elements. This is called nesting. The only thing to note is that the the tags have to open and close in a way that they are inside or outside one another.

Wrong way of nesting:

<p>My cat is <strong>very smart. </p></strong>

Proper way of nesting:

<p>My cat is <strong>very</strong> smart. </p>

Let’s now look at some of the Basic HTML Tags.

1. HTML tag

The <HTML>. . . </HTML> tag is just like a tag that let the browsers and other programs recognize that the file is an HTML document. It marks the beginning and ending of a given HTML document.

It has mainly two attributes, namely, DIR and LANG. DIR will specify in which browser shall the text be present within the entire document. It can have values ltr (left to right) or rtl (right to left). LANG specifies the language that we’ve used within the document.

2. Head tag

The <HEAD> . . . </HEAD> tag defines the header of the document. It contains document info like its title, scripts used, style definitions and document description. It is contained inside the <HTML> tags.

3. Title tag

The <TITLE>. . .</TITLE> element contains the title of the document. It is not visible on the webpage rather it is seen on the title bar at the top of the browser window. In short it helps the search engines to identify our page during searches. It is used inside the <HEAD> tags.

4. Body tag

The <BODY>. . .</BODY> tag is used to display the body of our document and encompasses all the contents of an HTML document like the text, images, list, tables, hyperlinks etc.

It has a number of attributes as listed below.

a. Background attribute is used to display a background when displaying a page. It could be a texture or the image of an object.

<BODY background = “filename.gif”>

b. Bgcolour is used to break the typical black text on white background by customizing it to a colour of your choice.

c. Text attribute helps to change the color of the entire text displayed on the web page. Just my two cents regarding this customization is to keep in mind to use contrasting colors for background and text so that it will be reader friendly.

d. Link, Alink and Vlink attributes

To change the colour of links, visited links and active links, LINK, VLINK and ALINK are used respectively.

To sum up them,

<BODY bgcolor = “olive” text = “magenta” link = “aqua” vlink = “lime” alink = “red”>

e. Top and left margin

It refers to the blank area from the edge of the page. Based on whether you want to leave space along the left side or the top the attributes are to be used accordingly by specifying the value in pixels.

<BODY leftmargin = “value”><BODY topmargin = “value”>

5. HTML Headings

Irrespective of whether it is a magazine, newspaper or a website, most of the structured texts are beautifully scripted with headings and paragraphs.

HTML headings are described with the <h1> to <h6> tags, with their importance diminishing in a successive fashion.

<html>
<head>
<title> Sample </title>
</head>
<body>
<h1>This is heading 1 </h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

The output will look as follows.

6. HTML Paragraphs

HTML paragraphs are defined by a the <p> . . . </p> tag.

<html>
<head>
<title> Sample </title>
</head>
<body>
<p> Put all your energy in things that excite you. </p>
</p>Even if it doesn’t make sense to people, all that matters is your happiness. </p>
</body>
</html>

Paragraph tag is by default left aligned. But you can change its alignment by using ALIGN attribute.

<P align = alignment>

Where the alignment can be LEFT, RIGHT or CENTER.

7. FONT and BASEFONT Tags

The BASEFONT tag lets us to define the fundamental font size for the text in the document from which no other font setting has been provided.

The FONT tag lets us to change the size, style and color of a short segment of text.

Both of them have three attributes namely size, face and color.

<FONT size = 4 face = “Consolas” color = “purple”>

The following example illustrates the <FONT> tag.

<!DOCTYPE html>
<html>
<head>
<title>Font Color</title>
<style>
body {
font-size:40px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<font color = “#009900”>Angels and Demons</font><br />
<font color = “green”>The Lost Symbol</font>
</body>
</html>

8. Horizontal Rule Tags

The Horizontal Rule or the <HR> tag allows us to separate sections of our document visually by producing a horizontal line spread across the width of the browser window. It has four attributes namely size, width, noshade and color.

<!DOCTYPE html>
<html>
<head>
<title>hr tag with attributes</title>
</head>
<body>
<p>Normal horizontal line.</p>
<hr>
<p>Horizontal line with height of 30 pixels</p>
<hr size=”30">
<p>Horizontal line with height of 30 pixels
and noshade.</p>
<hr size=”30" noshade>
</body>
</html>

9. HTML Image tag

The HTML <img> tag is used to insert an image in a web page. It has mainly two required attributes-

a) src — It specifes the path to the image

b) alt — It specifies an alternate text for the image

<img src = “url” alt=”alternatetext”>

An example with the image tag can be illustrated as follows.

<!DOCTYPE html>
<html>
<head>
<title>HTML Image Tag</title>
</head>
<body>
<img src = “https://www.indiewire.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-20-at-3.16.21-PM.png"
alt = “Batman” height = “150” width = “140” />
</body>
</html>

10. HTML Link

HTML links are hyperlinks that when clicked can help us to hop from one document to another document. The HTML <a> tag defines a hyperlink and it’s most important attribute is href.

<a href=”url”> link text </a>

Lists

Lists are something that makes our lives easier. Just like your unending roll of shopping lists webpages are also organized to a sleeker look with the use of this feature. In HTML we have three kinds of them to worry about.

Unordered lists are used to markup lists of items for which the order of the items doesn’t matter. Every unordered list starts off with a <ul> element that wraps around all the list items and the list items are in turn individually wrapped inside a <li> (list item) element.

<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>hummus</li>
</ul>

Ordered lists are lists in which the order of the items does matter. The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>.

<<ol>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>hummus</li>
</ol>

Tables

HTML Tables are one powerful tool for organizing data on a webpage. There are two significant ways in which tables are used; one where the actual table is visible on the web page and two when it is invisible, but restricts content into specific regions of the webpage.

The table is organised in to rows and columns. The table may have a header row (signifying what each column contains), captions in the first column (indicating what each row contains). Each of these rows, columns, individual cells or captions may be modified in different ways, using different font faces, sizes of letters, emphasising text, aligning it differently, or filling the background with a colour or image.

The pair is the defining pair. All tags, attributes or values, text or images form the content of the table. A basic table can be created using the following tags.

The table tag has a number of attributes.

The border is an attribute of <table> tag and it is used to put a border across all the cells and if we don’t want a border we can just set the value to 0.

The cellpadding and cellspacing can be used to adjust the white space in thetable cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.

We can use the colspan attribute if you want to merge two or more columns into a single column. Similarly we will use rowspan if you want to merge two or more rows.

A sample code for using table tag is as follows.

<!DOCTYPE html>
<html>
<body bgcolor=”pink”>
<table bgcolor=”silver” align=”center”
border=”5" cellspacing=”5"
cellpadding=”5">
<tr bgcolor=”purple”>
<caption align=”top”>
<h2 style=”color: #ff3300;”>
Train
</h2>
</caption>
<th bgcolor=”magenta”>train number</th>
<th bgcolor=”magenta”>departure</th>
<th bgcolor=”magenta”>arrival</th>
<th bgcolor=”magenta”>category</th>
</tr>
<tr>
<td>12267</td>
<td>23:25</td>
<td>05:15</td>
<td>duronto</td>
</tr>
<tr>
<td>12426</td>
<td>19:40</td>
<td>05:05</td>
<td>rajdhani</td>
</tr>
<tr>
<td>12019</td>
<td>06:05</td>
<td>13:15</td>
<td>shatabdi express</td>
</tr>
</table>
</body>
</html>

Comments

Comments are textual content that will appear in the code but won’t be rendered by the browser. They are written in between < !- — — and — — →. Browsers will ignore the text between comment character sequences.

I hope this article will be a good kick start for anyone who wants to learn HTML. Now that you have cleared basics, all you need to focus is on practicing, experimenting and improving your skills.

Happy Learning Amigos!