HTML5 in 5 minutes: Lets learn web programming.

Learn HTML5 in 2021, being the only structural language for webpages is also one of the most easy language to learn. Is it really worth learning HTML5 in 2021?

Well… Yes its is. Nowadays frontend development is not just restricted to web applications rather frameworks like React Native , Ionic etc made it easier to build android apps by just using simple html css structural logic.

Don’t panic if you don’t aim to use your learning in mobile development. Here we will just cover basics of website structural pattern. This article doesn’t require any prior knowledge. So feel free to follow along.

Talking about HTML, there are almost 110 tags that can be used in designing a webpage. You need to remember all of them to be a professional web developer.

Wait… I am just kidding. Its impossible to keep in mind all of those tags. Even most of them are never needed during development.

We are just covering most important tags to keep it simple and easy to understand.

Basic Structure:

A webpage is structured in two sections <head> and <body> and tags have so called attributes we will discuss further. Head covers all the meta data, connection links, title and also sometimes script tags. Most important concept is

Everything inside <head> tag doesn’t appear on screen.

Our main focus is <body> tag because anything we want to display on screen is placed inside it.

Okay… we got basic concepts now its time to do some coding. Grab your coffee and follow along.

To run html file locally on computer we need to:

Create a new document in Notepad.
Write some html & save it.
Make sure file extension is .html and not .txt etc.
Open file in browser

Now copy the following code and follow above steps.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>My First Page</h1>
</body>
</html>

You will see a white screen with ” My First Page ” printed on it. If so congratulations you have wrote your first html code.

Maybe it seems confusing at first but believe me its so easy.

What is <!DOCTYPE html> ? Its just a markup telling browser that its a HTML5 version and a document type structure. We don’t need to worry much about this.

Heading Tags:

We have discussed <head> and <body> but who is <h1>. In HTML we have 6 heading tags <h1>, <h2>,<h3>,<h4>,<h5>,<h6>. Now remove existing code and copy this one:

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>

save and refresh the page. You will hopefully see 6 text of different size.

Keep in mind, headings are not use to size text. Rather it tells browser how our page is structured. We can resize & style our headings using css.

Paragraph Tag:

Next is <p> tag. Its is used to write standard paragraph text.

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>This is a paragraph.</p>
  </body>
</html>

we have learned basic text elements.

Images:

What about images? Images are key content of a website. They attract audience and making page more meaningful.

To add image we write <image> tag. Add following code:

<img src="your-image.jpeg" alt="this is my image" height="150px" width="150px">

Note that unlike heading and paragraph tags image tag doesn’t have any closing like </image>. We don’t do that. There are some attributes like src (path of your image), alt (alternative text if image failed to load), also you can use height and width attribute to resize your image. But this is optional we can also do it from css styling.

Next is button, to add a button we need to add <button> tag.

<button name="submit">Submit</button>

Button have some basic attributes like name, type etc. For more information you can go through this site.

User Inputs:

Webpage is not just about showing text or images. Interactive webpages allow users to enter information. To do so we use <input> tag.

<input name="username" type="text" placeholder="Enter Username.." />
<input name="email" type="email" placeholder="Enter Email.." />

Inputs also doesn’t contain any closing tags. Paste above code in your file and save it. You will see two input fields side-by-side.

We can perform validation from type attribute and its mandatory to use it. We can also create Checkbox , radio or range types of input but we are not discussing them here. You can follow link here to read more about it.

Lists:

List is any essential component of a document. Html contains two types of lists <ul> (unordered list) and <ol> (ordered list). List items????

There is another tag <li> to add items in list. If it seems confusing copy below code and save file.

<p>This is an un-ordered list</p>
<ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Banana</li>
      <li>Peach</li>
</ul>


<p>This is an ordered list</p>
<ol>
      <li>Apple</li>
      <li>Orange</li>
      <li>Banana</li>
      <li>Peach</li>
</ol>

I think now you will get better understanding of how lists are different. You can add other tags in <li>. Here is an example:

<ol>
      <li>
        <img
          src="your-image.jpeg"
          alt="this is my image"
          height="150px"
          width="150px"
        />
      </li>
      <li>
        <img
          src="your-image.jpeg"
          alt="this is my image"
          height="150px"
          width="150px"
        />
      </li>
      <li>
        <img
          src="your-image.jpeg"
          alt="this is my image"
          height="150px"
          width="150px"
        />
      </li>
      <li>
        <img
          src="your-image.jpeg"
          alt="this is my image"
          height="150px"
          width="150px"
        />
      </li>
    </ol>

Here we added images in an ordered list.

Anchor Tag:

<a> is also one of the most important and commonly used tag in html document. It creates hyperlink to other pages, email or telephone number. Here is an example of how to use it:

   <a href="http://youtube.com">Youtube</a>
   <a href="mailto:example@gmail.com">Email</a>
   <a href="tel:+000000000">Phone</a>

Tables:

Tables are useful in managing large data. These can be created in html document using tags like <table>, <th>, <tr> and <td>. Lets see an example:

<table>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
      </tr>
      <tr>
        <td>John</td>
        <td>0XX-XXXXXXX</td>
        <td>example@gmail.com</td>
      </tr>
      <tr>
        <td>Doe</td>
        <td>0XX-XXXXXXX</td>
        <td>example2@gmail.com</td>
      </tr>
      <tr>
        <td>Mark</td>
        <td>0XX-XXXXXXX</td>
        <td>example3@gmail.com</td>
      </tr>
    </table>

Table contain rows and rows are represented by <tr> tag. Rows contain data represented by <td> tag and all these tags are enclosed in a parent <table> tag,

<th> is defines the heading or so called label of each column.

Conclusion:

We have learned some basic html elements like <h1>, <h2>,<h3>,<h4>,<h5> and <h6> for headings, <p> for paragraph, <input> to interact with user inputs, <button> & <img> tags, ordered <ol> and unordered <ul> lists and in last we learned about creating tables using <table> tag.

What next?

As I mentioned earlier in this article. This is not everything about html. Its just a small step. We have just covered most basic tags for purpose of understanding html. You need to learn more advance html and css also to build a career in website development.

Please tell me in comments about your experience while reading this article. Also mention other tags that you think are important for learning html.