Semantics

 

Semantics code

What is semantic code?

HTML was originally intended as a means of describing the content of a document, not as a means to make it appear visually pleasing. Semantic code returns to this original concept and encourages web designers to write code that describes the content rather than how that content should look.

Why is semantic code important?

  • Many visually impaired people rely on speech browsers to read pages back to them. These programs cannot interpret pages very well unless they are clearly explained. In other words semantic code aids accessibility
  • Search engines need to understand what your content is about in order to rank you properly on search engines. Semantic code tends to improve your placement on search engines, as it is easier for the "search engine spiders" to understand.

How to ensure a site uses semantic code?

There is no tool that can check for semantic code. It is a matter of looking at the code and seeing if it refers to colours, fonts or layout instead of describing what the content is.

SEO friendly

Some aspects to remember during writing SEO friendly code

  • Title tag
  • Meta description
  • SEO friendly markup
  • Breadcrumbs

What should remember while tags / title tag

  • Do not use stop keywords ('as', 'but', 'am' etc);
  • Do not put too many words;
  • Title texts should contain less than 69 characters;
  • Hyphens(-) or pipes(|) both will make it easier for users to scan the content of title tag;
  • Key-phrases should be used instead of keywords. It will attain a higher ranking in search engines;
  • Avoid commas(,) and special characters.

Breadcrumbs

Breadcrumbs present an important role to make website more search engine optimized.

  • Compact and easily gettable keywords
  • Categorize pages
  • Help SEO to trail results

SEO friendly markup

Search results of correctly optimized site that have SEO friendly markup, work on its popularity much better than an advertisement, of cause, in a search results such sites are among first in the list.

Code style

Always declare the document type as the first line in your document:

  <!DOCTYPE html>

   If you want consistently with lower case tags, you can use:

  <!doctype html>

Use Correct Document Type

  • Mixing uppercase and lowercase names is bad
  • Developers are used to use lowercase names
  • Lowercase look cleaner
  • Lowercase are easier to write

Use Lower Case Element Names

Looking bad:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Close All HTML Elements

Close Empty HTML Elements

Looking good:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

The slash (/) is required in XHTML and XML.

If you expect XML software to access your page, it might be a good idea to keep it.

Looking bad:

 <div CLASS="menu">

Use Lower Case Attribute Names

Quote Attribute Values

Looking good:

 <div class="menu">

This will not work, because the value contains spaces:

  <table class=table striped>

This will work:

  <table class="table striped">

Always use the alt attribute with images. It is important when the image cannot be viewed. Also always define image size. It reduces flickering because the browser can reserve space for images before they are loaded.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Image Attributes

Spaces and Equal Signs. Blank Lines and Identation. Avoid Long Code Lines. 

Short comments should be written on one line, with a space after <!-- and a space before -->:

<!-- This is a comment -->

 

But long comments, spanning many lines, should be written with <!-- and --> on separate lines:

<!-- 
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

HTML Comments

Use simple syntax for linking style sheets (the type attribute is not necessary):

<link rel="stylesheet" href="styles.css">

 

Short rules can be written compressed, on one line, like this:

p.into {font-family:"Verdana"; font-size:16em;}

 

Long rules should be written over multiple lines:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

Style Sheets

Style Sheets

  • Place the opening bracket on the same line as the selector.
  • Use one space before the opening bracket.
  • Use 2 spaces of indentation.
  • Use colon plus one space between each property and its value.
  • Use space after each comma or semicolon.
  • Use semicolon after each property-value pair, including the last.
  • Only use quotes around values if the value contains spaces.
  • Place the closing bracket on a new line, without leading spaces.
  • Avoid lines over 80 characters.
Made with Slides.com