What is HTML?

A quick introduction to HTML

HTML is Hypertext Markup Language used to structure and present the World Wide Web contents.

Hypertext stand for pages connected with each other using hyperlink which when clicked, takes us to connected page

Markup consist of several key components, including those called tags(and their attributes)

HTML document example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <h1>Main Heading</h1>
  <p>This is a <a href="demo.html">simple</a> paragraph.</p>
  
  <!-- this is a comment -->
 </body>
</html>

HTML user agents(eg. Web browsers) parse this markup and convert it into a DOM(Document Object Model) tree. A DOM is an in memory representation of a document, similar to image below

HTML DOM tree representation

Root element of DOM tree is always HTML which, further has head and body as its children’s. It also has Text node between them. In above image you might notice other Text nodes in DOM which are added due to spaces (represented here by “␣”) and line breaks(“⏎”) in the document.

HTML elements

HTML document consist of elements and tags. Each element has start tag, such as <body> and corresponding end tag </body> - pay special attention to forward slash which differentiates between start and end tag. For certain elements end tag is not mandatory, one example is <hr> tag.

HTML element attributes

HTML elements can have attributes, which control how the element work. Attributes are defined inside start tag. In the example below, there is a hyperlink, formed using the a element and its href attribute:

<a href="demo.html">simple</a>

Attributes are defined using name and value which are separated with “=” sign such as href="demo.html". In this case href is name and "demo.html" is value. Value need to be defined inside double or single quotes if it contain ASCII whitespace or any of “ ‘ ` = < or > characters. In certain scenarios value can also be omitted along with “=” sign as demonstrated in example below

<input name=address disabled>

Extending HTML

HTML alone creates plain page as, we can see below

To make beautiful and interactive websites we need to extend functionality of HTML using CSS and JavaScript.

For demonstration purpose lets add blue background to h1 element and change display color to white using style attribute

I hope you enjoyed the introduction to HTML.

html