Table of Contents
HTML is a very simple language to learn. It is a markup language, which means that it is a language for describing documents as a sequence of markup elements. Let's look at a very basic HTML page, what a DOCTYPE is, the difference between a head tag and a body tag is, how to add a class, and what an ID is.
DOCTYPE
Before we dive into a basic HTML page, it's important to know what DOCTYPE is. This declaration appears at the very top of every HTML document and it tells the browser that what follows next is HTML 5, as opposed to an earlier version of HTML, and it looks like this:
HTML<!DOCTYPE html>
A basic HTML page
Creating a real HTML document requires the use of HTML tags. HTML tags are used to describe and give meaning to whatever content is inside the tag, which gives the page structure.
Let's start with a very basic HTML document.
HTML<!DOCTYPE html>
<html>
<head>
<title>Look at this title!</title>
</head>
<body>
<h1>I am very important!</h1>
</body>
</html>
You can see that the html tag encompasses the entire document. This tells the browser "hey, everything between these two tags is an HTML document, so please render it".
After that, pretty much every website you browse will then contain two more tags, a head and body tag.
Head tag
The head tag allows you to add metadeta describing your HTML page. Metadata is data that describes other pieces of data. The metadata you provide is useful for the browser to further understand what your page is about.
Things that are typically included in the head tag include the page title you see at the top, links to any external files like CSS and JavaScript files, a description for the page, adding a favicon, and much more.
Setting a Page Title
You can set the page title by adding a title tag inside the head tag. Here's an example:
HTML<title>Using Tags, Attributes and Elements</title>
Titles are important both to the user and search engines. The title of a page is what the user sees at the top of the browser window.
Adding a description
You can add a description to your page by adding a meta tag with a name with descriptiont as the value inside the head tag. Here's an example:
HTML<meta name="description" content="Learn about HTML!">
Adding a favicon
Favicons are small icons that are used to identify your website in search engines and tabs. You can add a favicon to your page by adding a link tag with a rel with icon as the value inside the head tag. Here's an example:
HTML<link rel="icon" href="/images/favicons/favicon.ico">
Setting an author
You can set the author of your page by adding a meta tag with a name with author as the value inside the head tag. Here's an example:
HTML<meta name="author" content="John Cena">
Authors are important because they are used to identify who created the page.
Body tag
The body tag, on the other hand, is where the content you will see displayed on your screen resides. You need to put anything you want actually rendered on the page between the opening and closing body tags.
In an earlier example here, you saw a header with some text in between. The h1 tag stands for header1, and is reserved for the most important header. There are many others like h2, h3, h4, and so on.
Save this file and open it in your browser.
This is how it should look for you.
- HTML
Class
class is an important attribute in HTML. It can be applied to pretty much every tag, which then makes it easy to apply styles to with CSS. The value of this attribute can be repeated as many times as you want. Here's an example:
HTML<p class="red">I am red</p>
<p class="red">I am also red</p>
ID
Another important attribute in HTML is id. On a valid HTML page, the values of this attribute must all be unique. If you give a tag an ID of first, no other tag may have that same ID. Here's an example:
HTML<p id="first">I am first</p>
<p id="second">I am second</p>
Resources
Getting Started with Solid
Git Tutorial: Learn how to use Version Control
How to Serve Static Files with Nginx and Docker
How to deploy a PHP app using Docker
How to deploy a Deno app using Docker
How to deploy an Express app using Docker
Getting Started with Sass
Learn how to use v-model with a custom Vue component
Build a Real-Time Chat App with Node, Express, and Socket.io
Getting Started with Moment.js
Using Push.js to Display Web Browser Notifications
Setting Up a Local Web Server using Node.js