coding180 icon

Coding180

What is HTML? - Introduction

What is HTML? - Introduction

Tutorials > HTML > HTML Introduction


HTML stands for HyperText Markup Language, It gives structure to our website. HTML is a front end language that is used to develop website alongside CSS and JavaScript.

HTML and CSS are 5&6. HTML gives elements and structure, while CSS define the styles and how elements are displayed.

Basic HTML structure

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Page Title Here</title>
</head>

<body>
    <h1>H1 Heading Text</h1>
</body>

</html>

1. <!DOCTYPE> - Document Type

The HTML doctype tag is used for specifying which language and version the document is using. Each HTML document must begin with a document type declaration that declares which version of HTML the document is using. This is referred to as the document type declaration (DTD).

2. <html> ... </html> - Root tag.

HTML webpage has a root tag known as <html>. 
This defines the beginning of an HTML document.
The root tag is defined by opening <html> and closing </html>. 

3. <head>...</head> - Head Tag

  • This is always the first element in an HTML element.
  • Head element contains important and technical information about a webpage.
  • Information in Head element is used by search engines and browser.
  • Styles, Page Title, Metadata, Scripts are all defined in the head element.
  • All information inside the head is not displayed to the user.

4. <body>... </body> - Body Tag

The body tag contains all the visual components (elements) of a webpage. This is where you use tags to define an element that is displayed to the user on screen. E.g. Image, paragraph, heading, form, text, etc.

In the next Lesson, we are going to see how to create HTML visual components (elements) on our webpages.

Exercise - Task

Some tags are missing on line 2 and line 11, please complete it and run the code.

Task code:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Know the basic structure of html files</title>
</head>

<body>
    <h1>In this section, you will learn to recognize the 
basic structure of html files</h1>
</body>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel