The Basic of Advance HTML
Nowadays, a website is a must for your presence online. It gives you a sense of social attachment and inner satisfaction. People visit websites, watch videos, view images, use mobile apps, and share whatever they find amazing.
This is achieved by technology today. And keeping up with technology is one of the most important parts of the day to day life. But, simple things in life require a simple approach. Especially when it comes to websites. Its basically the HTML and CSS, and a basic of client-side Javascript that is all needed.
But, one must learn the basics first to get to the advance and I am going to provide you with a simple example of the basic HTML, with an advanced approach, which will help you understand the process better. So, here we go, keeping in mind that you know the basic HTML tags for starters.
Starting with the root of all, the HTML tag,
<!DOCTYPE HTML><html>...</html>
When looking at the first line, it's just a document declaration for the browser to understand its an HTML document. and proceeding with the HTML root tag.
<head>...</head>
<body>...</body>
Both tags reside inside the HTML tag,
HEAD defines the header, consisting of the metadata about the webpage, not visible to the user, except the TITLE tag.
The BODY defines the frontend of the webpage that will be visible to the user, better design it well.
<title>Codyx Weboratory</title>
Defines the TITLE of the document, visible to the user on the Browser tab.
Also, important in terms of SEO, as it is displayed in the list main header.
<meta name="description" content="Help You Understand the Basic HTML" />
A meta tag, visible to the browser and also read by the Search Engine to display the description of the website on the list.
<link rel="icon" href="https://www.codyx.me/favicon.png" />
<link rel="stylesheet" href="http://www.codyx.me/path-to-file.css" />
<style type="text/css"></style>
Only HTML cannot make the Webpage look and feel better, its depended on the CSS, a style sheet to design the page with defining the position, colors, spaces, size, animation of the HTML tag elements. Included in the Header Tag section, rules can be defined inline or using an external file providing the path to it.
<script src="https://www.codyx.me/path-to-file.js"></script>
<script type="text/javascript"></script>
When you need a logical approach to a solution that is required without using the precious server resource, you can use client-side scripting for programming your logical part. Javascript provides you with this flexibility and one of the most important programming language in the whole world.
When combining all the tags together you get a web document file, also known as the webpage. See the example below:
<!DOCTYPE HTML> <html> <head> <title>Codyx Weboratory</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Help You Understand the Basic HTML" /> <meta name="keywords" content="help, basic, html" /> <meta name="author" content="Ankush Gautam | Codyx Weboratory" />
<link rel="icon" href="https://www.codyx.me/favicon.png" /> <link rel="stylesheet" href="http://www.codyx.me/path-to-file.css" /> <style type="text/css"></style> </head> <body> <h1>Welcome To HTML Basics</h1> <script src="https://www.codyx.me/path-to-file.js"></script> <script type="text/javascript"></script> </body> </html>
Here are some tips for your next webpage:
- Provide a Good TITLE and META Description, very useful for SEO
- Define CSS between HEAD tag only, help load page faster
- Define SCRIPT just before the closing of the BODY tag, not in the HEAD tag, help reduce load time
- Provide keywords, author for providing extra info about your webpage
- Provide META for page content type for browser
Using the above mentioned points you can increase the SEO visibility and Speed up your site
I hope you find it useful, Please like, share and comment if I missed something, Thank You