Home CS SEO HTML
Night More

Revise Now

Cambridge AS levels

Physics Chemistry Computer Science

Programming and coding

Learn HTML Learn SEO

More

What do you want
to do?

Contact us Donate Support More Services Send a tweet Social media




more topic chapters

HTML Basics - Getting Started

The first thing to understand is that HTML coding is not case sensitive so that means we can write it in uppercase or in lowercase or both but, we recommend you to use lowercase.

Before starting to make your very own Html page or document, we need to define that the webpage follows HTML5 so we use the DOCTYPE element!

Then we need to use the Html element to open the HTMl document

Like the example below

<!DOCTYPE html>
This is especially useful to google indexers and crawlers because, it tells them that your website follows the latest format. This could potentially improve your SEO ranking!

You need to know what are HTML elements/tags

HTML Tags/Elements

this is an example of html tags and basic syntax

These are used to define the property of the data of item to be displayed on the Html document or webpage. For example, if we want to enter a paragraph we need to use the <p> element

Almost all elements have a ending tag which is used to show the ending of the element. Sometimes it is not required but, it's better to always put it

This is an example

<p>Hello My name is Lily</p>

HTML basic elements

Before going too far, we need to know some elements and their uses. We will give an example for most of them

We will see an example which includes all these tags

As you can see the <html> element is used to define the html document or the webpage

The <head> element contains metadata or data about the webpage either to the user or to the Google SEO. These include scripting metadata and even styling codes

The <title> is used to define the title of the webpage

The <body> element holds the visible content of the Html document

Run

HTML heading

The heading elements are used to represent Html heading and there are 6 different types of headings

The use of headings must be carefully used as the Google SEO focuses on the <h1> element the most. It is requirement for it to be on the webpage and it clearly defines what the html document is about

Run

As you can see, the <h1> element has the highest importance and also it is by default the largest size. The other headings are also important but, decrease in size as it reaches <h6>.

There are only 6 types of headings!

You could define a paragraph as a heading by styling it using CSS but, this gives it less importance for Google search optimisation. So your website is less likely to be found

Also this is considered to be a terrible mistake and you should never use a paragraph tag as a heading!

This is considered to be a common mistake so always avoid it!

HTML links

this is an example of html tags  and links which uses the a tag

Revise Zone - This is an example of a link!


A link is something which directs the user to a different website or a different place of the same website when clicked

Below is an example

We need to use the href="" attribute which contains either the URL to a different website or the pathway to an internal file.

Pathways will be discussed later under the intermediate chapter

Run

We need to use the <a href="www.revisezone.com"> element to add a link. The href defines the url or the access route of the file

Another point to remember is that a href attribute can have the url of a file or an image and it doesn't need to be a html document.

It could be a webpage, pdf or even an apk/zip file!

HTML images

this is an img tag which are used to display images in webpages

We use the <img> element to define an image. For this element there is no closing tag!

The <img> tag contains a src attribute which tries to access an image over the internet or from your own server

src stands for source and you need to provide the location of the file image. It is very similar to a link but, can only access image file extensions!

Run

We use the alt attribute incase if the image fails to load, it tells the user what the image is about even though they can't see it

This is especially important for Google seo as they require it to optimise keywords. In fact, the alt attribute is so important that you must make sure all images have that! It is especially useful for screen readers as they can read out the image to a blind person using the alt attribute!

Don't worry! These are the very basic stuff in programming and coding of HTML. We will learn more advance things later





Revisezone.com Copyright 2020 Developers & Coding section