Html goodies

HTML GOODIES

Presented By:
Ali Hassan

Let’s Discuss The Following
• The HTML Doctype
• HTML Meta Tags
• HTML Body Tags
• HTML Standards Checklist
• Web Checklist
• W3C Validation
• Must for SEO compliant HTML
• HTML Best Practices
• HTML Importance for Web Developers

The Doctype is an instruction to the web browser about what
The HTML Doctype version of the markup language the page is written in.

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN“ "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

The <meta> tag provides metadata about the HTML document,
HTML Meta Tags Meta elements are typically used to specify page description,
keywords, author of the document, and other metadata.

Tag Name Example(s) Description
The HTTP content type may
be extended to give the
<META HTTP-EQUIV="CONTENT-TYPE"
character set. It is
CONTENT-TYPE CONTENT="text/html; charset=UTF-
recommended to always use
8">
this tag and to specify the
character set.
Declares the primary natural
<META HTTP-EQUIV="CONTENT- language(s) of the document.
CONTENT-LANGUAGE LANGUAGE" May be used by search
CONTENT="en-US,fr"> engines to categorize by
language.
<META NAME="AUTHOR"
AUTHOR The author's name.
CONTENT="Tex Texin">
<META HTTP-EQUIV="CACHE- The directive CACHE-
CACHE-CONTROL CONTROL" CONTENT="NO-CACHE"> CONTROL:NO-CACHE indicates
cached information should
not be used

HTML Meta Tags
Tag Name Example(s) Description
<META NAME="COPYRIGHT"
COPYRIGHT A copyright statement.
CONTENT="© 2004 Tex Texin">
The text can be used when
<META NAME="DESCRIPTION"
DESCRIPTION printing a summary of the
CONTENT="...summary of web page...">
document.
The keywords are used by
some search engines to index
<META NAME="KEYWORDS"
KEYWORDS your document in addition to
CONTENT=“drugs, rock & roll">
words from the title and
document body.
The date and time after which
<META HTTP-EQUIV="EXPIRES"
EXPIRES the document should be
CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
considered expired.

The body tag serves as the element containing all the content for
HTML Standard Tags the website. Tables, Lists, Forms, Paragraphs, everything must be
placed within the body element to be displayed on your site.

Tag Description Tag Description
 Defines a comment <select> Defines a select list
<a> Defines an anchor <span> Defines a section
<area /> Defines an area inside an image-map <table> Defines a table
<base /> Defines a default address <td> Defines a cell in a table
<div> Defines a section in a document <tr> Defines a row in a table
<h1> to <h6> Defines HTML headings <tt> Defines teletype text
<ul> Defines an unordered list <textarea> Defines a multi-line text
<ol> Defines an ordered list <strike> Defines strikethrough text
<li> Defines a list item <p> Defines a paragraph
<menu> Deprecated. Defines a menu list <hr /> Defines a horizontal line
<object> Defines an embedded object <select> Defines a select list
<script> Defines a client-side script

Let’s Verify The HTML Document
HTML document can be verified by
1. Structure and visualization
2. HTML code
3. CSS Code
4. Structure

HTML Standard Checklist
Structure and Visualization
• Do not use <font> element.
• Move arrangement attributes (align, valign, width, height) to CSS.
• Do not use tables except showing table data. Using tables for visual
formatting is acceptable in complex situations only. Max table nesting can
not be great than 3.
• Move attribute "background" to CSS.
• Design of input fields and buttons must be written as class in CSS.
• Style table must be written as external file and linked using <link>
• All images related to design (not content) move to block with style
{background: transparent url("gif") no-repeat;}

HTML Code
• If table cell contains only image with width and height, then don't

use these attributes for cell.

• Use minimum cols and rows for tables.

• All <image> elements must have "width" and "height" attributes.

• All <image> elements, which are not links, don't have "border" attribute.

• All attributes values must be placed in double quotes.

• All tags and attributes names must be in low case.


CSS Code
• Unique elements must have "id" attribute, which is used for style.

Repeated elements must use classes.

• Determine background color for <body>

• Split declarations to groups (fonts, tables, text blocks, divs)

• Determine geometrical dimensions in percents or pixels.

• All colors values must be as short as possible and in upper case.

• All tags and attributes names must be in lower case.

• All margins and indents must be defined for all browsers.

• All classes and identifiers must be named logically with one naming

convention.

HTML Standards Checklist
Structure
• Use title, description and keywords in header.

• All elements with closing tags must have it (ideally, use XHTML 1.0
Transitional/Strict).

• Use alt attribute for <image>. If image don't have semantic meaning, alt
must be empty.

• Use comments before main blocks.

• Use standard tags for creating text structure

(<h1>-<h4>, <p>, <ul>, <il>, <li> and so one).

• Vertical and Horizontal menus must be defined using <li>.

• Blocks must be placed in document in the descending order of importance.
Blocks location can be defined using CSS.

Website Checklist
Validation Browser Independence
 Validate the html  Try different browsers
 Validate the CSS  check printed page
 Check the broken links  Switch javascript off
Flexibility  Switch plug-in off
 Try varying window size  Switch image off
 Try varying font size Other Checks
Speed  Check non-reliance on mailto
 Access the site via a modem  Check no orphan page
 Check the image size specification
Accessibility
 Test accessibility
 View in text browser

W3C Validation
Most Web documents are written using markup
language, such as HTML or XHTML, which usually
include a machine-readable formal grammar The
act of checking a document against these
constraints is called validation, and this is what
the Markup validator does.

The markup validator is free service by W3C that helps to check
Markup Validators the validity of web documents.

Common markup validators
• Unicorn (W3C unified validator)
• Markup Validator (It checks document like HTML)
• Link Checker (checks hyperlinks, find broken links)
• CSS Validator (validate css stylesheets)
• Log validator (improve whole site step by step)
• mobileOk checker (check websites mobile friendliness)

Must For SEO Compliant HTML
Checklist for SEO compliant HTML document
 Validity
 Accessibility
 Content Behind Form
 Use CSS
 Heading Tags
 Links
 Images and Alt Tags

HTML Best Practices
Examine Your HTML Code
 Always Declare a Doctype
 Use Meaningful Title Tags
 Use Descriptive Meta Tags
 Always check your code for cross browser visibility
 Use Divs to Divide Your Layout into Major Sections
 Close Your Tags
 Validate Your Code
 Never Use Inline Javascript
 Use Firebug
 Choose a Great Code Editor

HTML Importance For Web Developers
• Knowing HTML will give you an understanding of how the Web works
• CSS determines how a page will look.
• Important to understand how JavaScript connects with website
• Medium of Appreciation
• It’s really not a rocket science
• Common Communication
• You will be a better asset

WEB DEVELOPER WEB DESIGNER
ASP/.NET Photoshop, Illustrator,
PHP, JavaScript, DHT (X)HTML Flash, Firework,
ML, Perl, SQL, MYSQL,Dreamweaver Typography, Color,
CSS
Theory, Web,
XML, XSL, AJAX, C++,C Accessibility and
#, C-Objective, Java Standards

Html goodies

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Html goodies

Similaire à Html goodies (20)

Dernier

Dernier (20)

Html goodies