Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Semantic Markup

Semantic markup (or Semantic coding) is about writing HTML code that is easy for search engines to understand.It is also used for Accessibility. Semantic markup assists screen readers which use audio for the visually impaired.

Semantic is defined as “relating to meaning in language,” and it is used in HTML coding to mean that the code you use should describe the content it contains. For example:

<h1>My Page Title</h1>

It is best practice to use semantic markup for your HTML web pages and use Cascading Style Sheets (CSS) to apply the design and style to the elements. This practice keeps the code separate from the graphic design of the web page and it improves how easy it is to change the look of your web pages.

Using Semantic for Search Engine Optimization (SEO)

Semantic coding helps Search Engines find and index your website.

• Improves how easily search engine crawlers can discern the meaning of your web page from the parts of your web page are readable to humans.
• Google, Yahoo, and MSN search engines algorithms apply a higher importance to the text contained within the following tags:
  • <title> </title>
  • <h1> </h1> - use once on each page - it should contain the most important description of the content on the page.
  • <strong> </strong> - bold
  • <em></em> - italics

These tags should also be used:

• Unordered list
  <ul>
  <li>Item</li>
  <li>Item</li>
  </ul>
• Ordered list
  <ol>
  <li>First item</li>
  <li>Second item</li>
  </ol>
• Definition list
  <dl>
  <dt>First term</dt>
  <dd>Definition</dd>
  <dt>Next term</dt>
  <dd>Definition</dd>
  </dl>
• Acronym
  <acronym title="A Safer Company">ASC</acronym>
• Abbreviation
  <abbr title="cup">c</abbr>
• Contact information for the author/owner of a document
  <address>
  A Safer Company<br />
  <a href="mailto:us@asafercompany.com">Email us</a><br />
  Address: 123 Main St<br />
  Phone: +123 456 7899
  </address>
• Phrase tags
  • <cite>: Citation, used to cite a source of information.
  • <code> Computer or Programming code.
  • <dfn> Definition
  • <kbd> Keyboard instructions.
  • <samp> Sample output, used to show sample output from programming code.
  • <var> Variable, used to represent a variable in programming code. 

Tags like <div> and <span> are generic elements and don’t represent any inherent meaning.

Semantic Markup Extractor

• Semantic Data Extractor

Quiz

Highlight or select the black blocks to reveal the answer.

• What tag should you used for:
  • a heading? Answer: <h1></h1>tag
  • a list? Answer: <ol> or <ul>tag
  • a paragraph? Answer: <p> tag
• How many <h1> tags should a web page have? Answer: 1

top of page

Page last updated: May 31, 2012 14:30 PM