html and css basics for seo professional
DESCRIPTION
HTML and CSS Basics are mandatory for SEO Professionals. This document has basic information about web technologies for SEO Point of ViewTRANSCRIPT
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 : <!-- This is a comment -->
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