Hyper Text Markup Language or HTML is the skeleton of any web page. It is incredibly easy to get started and an important first step of learning to make a website.
The Basics
HTML consists of an elements that tell a Web browser how to structure a website. In this article we are going to cover four basic elements to build a page quickly.
DOCTYPE & HTML
An element begins with the < and ends with > character. The first element to an HTML page consist of the an element is declaration that tells the file what to expect. Now using HTML files without declaring DOCTYPE may work but may result in the browser being forced into quirks mode.
Quirks mode is a technique used by some web browsers for the sake
of maintaining backward compatibility designed for old web browsers.
src: https://en.wikipedia.org/wiki/Quirks_mode
The html tag is the start of the document and will contain all HTML tags with the exception of doctype. Here you should also display the language of the web page.
To start your document with DOCTYPE and an html element type the following.
<!DOCTYPE html>
<html lang="eng">
</html>
This declaration will let the browser know that the document is HTML5.
Head
The next common element known as head is used to house metadata for the website. Common things to place in head include page title, style, character, and scripts.
<!DOCTYPE html>
<html lang="eng">
<head>
</head>
</html>
Body
Last of the elements we are covering today is body. In this element tag is going to consist of everything that appears on your webpage. Here you would place text, images, and more.
<!DOCTYPE html>
<html lang="eng">
<head>
</head>
<body>
</body>
</html>
Now that we have built our basic file let's add on more element tag to display text. We are going to add the paragraph tag in the body element. We will discuss further on what the paragraph element is in later articles.
<!DOCTYPE html>
<html lang="eng">
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Now when we open this file in the web browser we will see the text "Hello World" being displayed.
Follow and like for more articles on web dev basics.
Top comments (0)