In this article we will learn about how to get started with building your own HTML5 structure, CSS3 & JavaScript document. So let’s get started :
Basic HTML5 Document :
The HTML5 Doctype :
Your HTML5 template needs to start with a document type declaration, or doctype. A doctype is simply a way to tell the browser — or any other parser — what type of document it’s looking at. The doctype should always be the first item at the top of any HTML file. For example :
<!doctype html>
Simple, and to the point. The doctype can be written in uppercase, lowercase, or mixed case.
The <html> Element :
Following the doctype in any HTML document is the element:
<html lang="en">
Here you can includ the lang attribute with a value of en, which specifies that the document is in English. Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.
The <html> element is divided into two parts, the <head> and <body> sections. The <head> section contains info about the document that isn’t displayed to the end users – such as; character encoding, links to css & js files. The <body> section contains everything that’s displayed in the browser — text, images, and so on.
<!doctype html>
<html lang="en">
<head>
<!-- Information about the page -->
<!--This is the comment tag-->
<title>HTML Document</title>
</head>
<body>
<!--Contents of the webpage-->
</body>
</html>
Character Encoding :
The first line inside the <head> section of an HTML document is character encoding for the document. This is optional but recommended for most HTML pages:
<meta charset="utf-8">
The Viewport Meta Element :
It’s important for responsive web design and mobile-first design :
<meta name="viewport" content="width=device-width, initial-scale=1">
The <title>, description, and author :
This HTML structure contains three lines those are :
<title>HTML Document</title>
<meta name="description" content="A simple HTML5 Template for new projects."
<meta name="author" content="SitePoint">
The <title> is what’s displayed in the browser’s title bar (such as when you hover over a browser tab). The other two are optional <meta> elements defining a description for SEO purposes along with an author. All elements inside <head> are optional with the exception of <title>.
Favicons and Touch Icons :
The next HTML structure includes <link> elements that include as a favicon and apple touch icon :
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
The favicon.ico file is for legacy browsers and doesn’t have to be included in the code. The second icon that’s used on Apple devices when the page is added to the user’s home screen.
Stylesheet and Scripts :
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
The stylesheet is included using the <link> element with an appropriate rel attribute. And use the script document at the bottom (just before the closing </body> tag) as a best practice.
The Complete Simple HTML5 Boilerplate :
The final template – a basic boilerplate that you can use for any project :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Document</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- your content here... -->
<script src="js/main.js"></script>
</body>
</html>
You can use this simple, ready-to-use HTML5 template into any project and you can add whatever content you want between the <body> and </body> tags.
Basic CSS Document
There are 3 types of CSS3 practice, those are :
- Inline CSS
- Internal CSS
- External CSS
Inline CSS :
Here, we can include CSS directly in our HTML elements. For this, we make use of the style attribute and then we provide properties to it. For example ;
<h1 style="color: #1d1d1d"> Inline CSS </h1>
Internal CSS :
An internal CSS is defined in the <head> section of an HTML page, within a<style> element. It is used to define a style for a single HTML page. For example ;
<head>
<style>
body {background-color: #1d1d1d;}
h1 {color: #ffffff;}
p {color: #c3c3c3;}
</style>
</head>
External CSS :
The last and most useful way to include css is to use external stylesheet. The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension and include its link in the HTML document as we talked in the basic HTML topic.
Here is what the “styles.css” file looks like :
body {
background-color: #1d1d1d;
}
h1 {
color: #ffffff;
}
p {
color: #c3c3c3;
}
Basic JavaScript
JavaScript ( JS for short ) is a full-fledged dynamic programming language that can add interactivity to a website. JavaScript itself is relatively compact, yet very flexible. For example;
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
JavaScript is one of the most popular modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.
However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually.
That’s all for this article, i hope all the above information will help you a lot. If you find it informative than don’t forget to leave a comment. Thank you!