HTML and CSS Basics for SEO Professional

HTML and CSS

• HTML is not a programming language, it is a markup

language

• HTML consists of set of tags and attributes

• HTML is language used to develop any website

• Basic understanding of HTML is necessary for SEO

What is HTML?

– HTML 4.01 [2000]

– XHTML 1.1 [2001]

– HTML 5.0 [2014 – Recommendation]

HTML Editor :

– We can use either notepad or notepad++ or Dreamweaver to create

html pages.

HTML Versions

<doctype html> [To define version of html]<html><head><title> Welcome to site </title>

</head><body>

</body></html>

Structure of HTML

Tag and Attributes

<p align=“center”> Welcome to Site </p>

Start Tag Attribute Content End

Tag

HTML Tag Elements

• Head Elements

• Structure Elements

• Content Elements

• Multimedia Elements

• Form Element

SEO Related Head Tags

• Title Tag

• Meta Tags

• Canonical Tags

• CSS (Important for Optimization)

• Java Script (Important for Optimization)

• Heading Tags (To define page headings)

– <h1> </h1> <h2> </h2> ……. <h6> </h6>

• Paragraph : <p> </p> – To display content of the page

• Preformatted: <pre> </pre>– To display the content exactly as input format

• Span: <span> </span>– To display the inline content block

• Breaks : <hr/> and <br/>

• Comments : 

Content Tags

List Tags• Unordered List

<ul><li>Home</li><li>About Us</li><li>Clients</li>

</ul>

• Ordered List<ol><li>Home</li><li>About Us</li><li>Client</li>

</ol>

• Home• About Us• Clients

1. Home2. About Us3. Clients

Nested Lists • Unordered List

<ul> <li>Home</li><li>About Us

<ul> <li>Vision </li></ul> </li><li>Clients</li>

</ul>

• Ordered List<ol><li>Home</li><li>About Us<ol> <li>Vision </li> </ol> </li><li>Client</li>

</ol>

• Home• About Us

• Vision • Clients

1. Home2. About Us

1. Vision 3. Clients

• Links are used to create relation between pages or external site

Anchor Links

<a href=“page.html" target="_blank"> Link </a>

<a href=“http://www." target="_blank"> Link </a> External

Internal

<a href=“mailto:" target="_blank"> Link </a> Mail Link

Image Tag – To Display Images

Flash Tag - To Display Flash Animation

Graphic Tags

<img src=“image path” alt=“some text” width=“200” height=“200” border=“1”>

<object …> <embed> </embed> </object>

• To retrieve content from the other sources

• Using IFRAME in practical purpose

– Facebook Like Box– Google Maps – Youtube Video

• Generally not recommended for SEO Purpose

iFrame

<iframe src=“ ” width=“ ” height=“ ” frameborder=“ 0”> </iframe>

CSS Concepts

• Cascading Style Sheet is used to define the page design

– It controls how the elements are displayed– What are the dimensions of elements– What are the colors of the elements – CSS helps in developing Responsive Design

CSS Tags

• Internal CSS– <style> …. </style> - This is called as internal css

and must be avoided in website

• External CSS– <link rel=“stylesheet” href=“style.css” />– To include the CSS from external page

CSS in SEO Point of View

• Use CSS to design a responsive website.

• Optimize the CSS to load the site faster.

• Use a single CSS file rather than using multiple

CSS files, which decrease the requests.

• Avoid using the hidden elements with CSS

Java Script Basics

• JS is scripting language to implement features like sliders, validations and other useful concepts in webpage

• Internal JS– <script> </script>

• External JS– <script src=“file.js”> </script>

Java Script in SEO Point View

• Crawler can render basic Java Script.

• Crawler cannot render complex java script

• Provide the crucial content in HTML format

• Avoid using external Ajax Content to load content

in page

• Avoid Javascript Drop Down menus

HTML and CSS Basics for SEO Professional

Internet

Transcript of HTML and CSS Basics for SEO Professional