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.
A Beautiful Analogy –
- HTML = Car body (Only metal)
- CSS = Car paint decoration etc.
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.
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
</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
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.
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 are used to display content which represents a list.
Unordered List : Used to list unordered items –
<li> Home </li>
<li> About </li>
Ordered list : Used to list ordered items –
<li> Phone </li>
<li> Laptop </li>
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.
–Element of the 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 :
- Set the title very nice and to the point
- Set the meta description = <meta name=”description” content = “…….”>
- Set a nice URL slug
- Set the meta keyword tag
- Set the author tag <meta name=”author” content = “Harry”>
- Set a favicon
- Compress images and other resource
- Remove unused HTML / CSS and JS files + compress them
- Add alt text to images