You are currently viewing Fundamentals of HTML

Fundamentals of HTML

What is HTML Stands for?

HTML stands for Hyper Text Markup Language

What is HTML?

HTML is a markup language.

Hypertext is text which includes links for other web pages and web resources.

Markup language like HTML uses tags to define the elements which create the structure of the web page (it defines the way of displaying the content in a web browser)

Therefore HTML leads to create web pages of formatted text which people can easily understand and web applications that help to communicate with different types of devices and networks all over the world.

Most importantly it’s a language that needs to be learned by anyone who wants to create web sites and web applications.

HTML documents can display in a web browser like chrome, Firefox           

HTML elements consist of following items

Start tag – Element content – End tag

Example – <h1> Domesticated Brain </h1>

HTML document structure 

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8"/>
    <title> HTML Document Structure </title>
    <link rel="stylesheet" type="text/css" href="/main.css">
  </head>

  <body>
    <h1>
        Domesticated Brain
    </h1>

    <p>
        Domesticated Brain is a website started in April 2015
    </p>
  </body>

</html>

HTML <!DOCTYPE> Declaration

<!DOCTYPE html>

HTML <!DOCTYPE> Declaration should be the first thing in a HTML document. It let web browser to identify the html version used in the document.

Document Object Model (DOM) Tree

The HTML DOM tree structure can be shown as follows

HTML DOM Tree

Everything between opening and closing HTML tag called DOM tree (Document Object Model Tree)

Let’s find out about the following simple HTML document.

<html>
  <head>
    <meta charset="UTF-8"/>
    <title> HTML Document Structure </title>
    <link rel="stylesheet" type="text/css" href="/main.css">
  </head>

  <body>
    <h1>
        Domesticated Brain
    </h1>

    <p>
        Domesticated Brain is a website started in April 2015
    </p>
  </body>

</html>

Everything between opening and closing HTML tag is called DOM tree (Document Object Model Tree)

<head> and <body> elements are the children of the <html> element . <html> element is like a root of the tree. <head> and <body> elements are like branches of the tree.

<head> element is the parent of the child elements  <meta> , <title> and <link> 

  <head>
    <meta charset="UTF-8"/>
    <title> HTML Document Structure </title>
    <link rel="stylesheet" type="text/css" href="/main.css">
  </head>

Everything inside the <head> element will affect the entire document.

<meta>  element gives information about the document

<title> element defines the title of the document in the web browser

<link> element here is used to create links for external documents like external style sheets

<body> element contains all the contents that are visible to the user

<body>
    <h1>
        Domesticated Brain
    </h1>

    <p>
        Domesticated Brain is a website started in April 2015
    </p>
  </body>

<h1> element defines a header

<p> element defines a paragraph 

Leave a Reply