HTML and CSS Basics for SEO Professional

• 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. Home
2. About Us
3. 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. Home
2. 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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to HTML and CSS Basics for SEO Professional

Similar to HTML and CSS Basics for SEO Professional (20)

More from Web Trainings Academy

More from Web Trainings Academy (17)

Recently uploaded

Recently uploaded (20)

HTML and CSS Basics for SEO Professional