HTML Basics: Introduction, Code Editors & Structure

Posted on April 19, 2021

Introduction

HTML is a hypertext mark-up language which is used to build up a website. Basically, HTML just gives a basic structure to your website. For styling, there’s an another language CSS is used and for any logical operations languages like JavaScript, PHP, jQuery and so on are used. Moreover, HTML is also a very easy to learn language, you just need to remember the tags that you will use while developing a website. Alternatively, you can also keep cheats of all HTML tags for your reference. Initially, it seems difficult to remember all the HTML tags. But as you will work on some web development projects and have some experience, it will become easier to remember all the HTML tags.

Every website you get online, use HTML language. If you want to see the HTML code of any website then just right click on that web page on Chrome Browser, and you will get an option name “view page source”. Once you click on that option, you get the entire HTML code of that particular web page. Or you can also press Ctrl+U to view the page source of any web page.

To create a website, only HTML is not sufficient, many other languages are also required for the designing, logical operations, database connection, API integration and so on. HTML is just a basic structure of any website.

Learn more about HTML

HTML Editors

To write and run a simple HTML codes, simplest way is to do with notepad. Below I’ve shared the steps to compile a simple HTML code.

STEP 1: Open you notepad.

Step 2: Write a basic HTML code. I’ve shared an simple HTML code below

<!DOCTYPE html>

<html>

<title>Basic HTML code</title>

<body>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<p>This is an paragraph</p> 

</body>

</html>

Step 3: Just copy and paste this code in your notepad and save the file with .html extension at the end

That’s all. Now that file will be saved in html format instead of a text document. And you can open it your default browser.

Alternatively, you can also use some of the text editors that are available in the internet. Below I’ve listed some of the common code editors, you can choose any one of them to write all of your coding stuff. Here, I will not share how to use those compliers, it’s very simple and if you get any issues then you can also watch some tutorial on youtube.

  1. Visual Basic Studio
  2. Sublime
  3. Notepad ++
  4. Atom

HTML Basic structure to get started

An HTML document always start with an <!DOCTYPE html> tag declaration. It basically represents, what kind of document it is and allow the browser to open the document correctly.

After document type declaration, <HTML> …. </HTML> tag is used. Between this tag, every html elements and tags are declared.

Then comes, <HEAD> and <TITLE> tag, <HEAD> tag includes metadata information of your HTML document. This data is not displayed, it gives the information about your web page eg: webpage title, descriptions, style, scripts and so on. We will show this part in our coming tutorials.

And <TITLE> tag is used to give a title for that particular web page.

Next, <BODY> tag, whatever code you write, everything will come under this body section. This is the main body of your webpage.

Once you use any HTML tag, you also need to close that tag at the end. Below I’ve shared an basic HTML code where everything which discussed above are mentioned.

<!DOCTYPE html>

<html>

    <head>

        <link rel=”stylesheet” type=”text/css” href=”style.css”>

        <script src=”script.js”></script>

    </head>

<title>Basic HTML code</title>

<body>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<p>This is an paragraph</p> 

</body>

</html>

Thanks for reading and I hope you have now learned about HTML basic structure. If you have any doubt or query, kindly drop your message on the comment section.

You can also reach out to us at contact@typicalcoding.com

Leave a Reply

Your email address will not be published. Required fields are marked *