What Is HTML

HTML in full details

Introduction

HTML – Hyper Text Markup Language.

HTML is the language of the web. It is used to create websites. We use HTML tags to define look and feel of a website. With understanding of these tags and how to put them together , we can create beautiful websites easily.

Then Why CSS And JavaScript – 

HTML is used for defining layout of a page – a barebone page structure. CSS is used to add styling to that barebone page created using HTML. JavaScript is used to program logic for the page layout eg. What happens when a user hovers on a text, when to hide or show elements etc.

A Beautiful Analogy –

  • HTML = Car body (Only metal)
  • CSS = Car paint decoration etc.
  • JavaScript = Car Engine + Interior logic.

We will start learning how to build beautiful layouts in this post.

Installing VS Code – 

We can use any text editor of our choice. Here i am using VS Code because it is light weight, opensource and from Microsoft. Go to google , type VS Code and install it.

Note – You can write HTML even in Notepad. Text editor like VS Code just makes these things easier.

Creating Our First Website

We start building a website by creating a file named index.html . Index.html is a special filename which is presented when the website root address is typed.

A Basic HTML Page –

<! Doctype html> = Specifies this is an html 5 doc

<html> = Root of an HTML page

<head> = Contains page metadata

<title> Your website title </title> = Contains title

</head> = Closing head tag

<body> = The main body of the page 

<h1> This is a heading </h1> =Heading tag

<p> My paragraph </p> = Paragraph tag

</body> = Closing body tag

</html> = Closing html tag

A tag is like a container for either content or other HTML tags.html

Imp Notes –

  • Head and body tags are children of HTML tag.
  • HTML is the parent of head and body tags.
  • Most of the HTML elements have opening and closing tag with content in between opening and closing tags.
  • Some HTML tags have no content. These are called Empty elements eg <br>
  • We can use “Inspect Element” or “View Page Source” option from chrome to look into a website’s HTML code.

HTML Element = Start tag + Content  + End tag .

Comments in HTML –

Comments in HTML are used to mark text which should not be parsed. They can help document the source code. <!— HTML Comment —>

Case Sensitivity –

HTML is a case insensitive language. <H1> and <h1> tags are the same.

Basic HTML Tags

We can add elements inside the body tag to define the page layout.

HTML Element

Everything from starting to the ending tag

<body> = Opening tag

“content”

</body> = Closing tag

HTML Attributes –

Used to add more information corresponding to HTML tag. we can either use single or double quotes in attributes.

The Heading Tag –

Heading tag is used to mark headings in HTML from h1 to h6 . We have tags for the most important to the least important heading.

<h1> Most important heading <h1>

<h2> Another heading h2 <h2>

<h3> Another heading h3 <h3>

<h4> Another heading h4 <h4>

<h5> Another heading h5 <h5>

<h6> Another heading h6 <h6>

We should not use HTML heading to make text thick or bold.

The Paragraph Tag – Paragraph tags are used to add paragraphs to an HTML page.

<p> This is a paragraph </p>

The Anchor Tag – The anchor tag is used to add links to an exiting content inside an HTML page.

<a href=” https://google.com”> Click Me </a>

The Img Tag – Img tag is used to add images in an HTML page.

<img src= “image.jpg”>

Bold, Italic And Underline Tags – We can use bold, italic and underline tags to highlight the text as follows :

<b> This is bold </b>

<i> This is italic </i>

<u> This is underline </u>

br Tag – The br tag is used to create line breaks in an HTML document.

Big And Small Tags – We can make the text a bit larger and a bit smaller using big and small tags respectively.

hr Tag –  hr tag in HTML is used to create a horigontal ruler often used to separate the content.

Subscript & Superscript – We can add subscript and superscript in HTML as follow :

<sub> This is </sub> subscript

<sup> This is </sup> superscript

Pre Tag – HTML always ignores extra spaces and newlines. In order to display a piece of text as is , we use pre tag.

<pre> This is written

             using pre

             tag

</pre>

Creating A Page Layout

When we use the right tag in right place, it results in a better page layout, better indexing by search engines and better user experience. We use the following tag to get the job done.

<header>

<main>

<footer>

Inside the main tag we insert the following tags :

<main> = The main opening tag

<section> = A page section

<article> = A self contained content

<aside> = Content aside from the content (eg, Ads etc)

</main> = The main closing tag

Creating a page like this is not necessary but it creates a structured layout. Also they are useful for SEO.

Link Attributes –

<a href=”/contact” > Contact us </a> = Contact page opens in same tab

<a href=”/contact” target= “blank”> Contact us </a> = Opens in a new tab

We can put any content inside an anchor tag (images, heading etc are all allowed). If the page is inside a directory, we need to make sure that we link to the correct page (some applies to img tag as well). We can add links to images like this –

<a href= “/about”> <img sec= a.jpg width =”120″> </a> = Height will be set automatically.

The Div Tag – 

Div tag is often used as a container for other elements div is a block level element (always takes full width).

The Span Tag –

Span is an inline container (Takes as much width as necessary).

Lists, Tables & Forms

Lists :

Lists are used to display content which represents a list.

Unordered List : Used to list unordered items –

<ul>

<li> Home </li>

<li> About </li>

</ul>

Ordered list : Used to list ordered items –

<ol>

<li> Phone </li>

<li> Pc</li>

<li> Laptop </li>

</ol>

Tables :

The <table> tag is used to define tables in HTML. It is used to format and display tabular data.

tr tag : used to display table now.

td tag : used to display table data.

th tag : used in place of table data for displaying table headers.

We can define as many table rows as we want.

Colspan attribute – This attribute is used to create calls spanning multiple columns.

<th colspan= “3” > Harry </th> = Spans 3 columns.

HTML Forms :

An HTML form is used to collect input from the user form tag is used for the same.

<form>

–Element of the form —

</form>

There are different form elements for different rinds of user input.

  • Input element : Can be of type text, checkbox, audio, button and submit we also have a file type.
  • Textarea element : Defines a multi line text input cols and row attributes can be used to size the textarea.
  • Select element : Define a drop down list.

Note : you don’t have to remember all the tags , you will automatically memorize them with practice.

Embedding Videos – Video tag is used to play videos in HTML .

<video src =”harry mp4″ > Error</video>

Attributes For Video :

We can use – Width : To adjust width of a video (Height automatically adjust). We can use autoplay / loop to autoplay or loop the video .

SEO (Search Engine Optimization)

We will focus only on HTML standpoint of SEO. We will not be looking into keyword building and content optimization aspect of SEO.

HTML SEO :

HTML developers can implement SEO using the following techniques :

  1. Set the title very nice and to the point
  2. Set the meta description = <meta name=”description” content = “…….”>
  3. Set a nice URL slug
  4. Set the meta keyword tag
  5. Set the author tag <meta name=”author” content = “Harry”>
  6. Set a favicon
  7. Compress images and other resource
  8. Remove unused HTML / CSS and JS files + compress them
  9. Add alt text to images

Leave a Reply

Your email address will not be published. Required fields are marked *