posh-gl

Esta páxina é unha traducción parcial do artigo orixinal (en inglés) POSH

Plain Old Semantic HTML (POSH)

Benvido á páxina de POSH.

Orixes

O acrónimo 'POSH foi acuñado o 6 de April 2007 no canal de IRC de microformatos por <kwijibo>, coma unha abreviatura para "plain old semantic HTML". Unha discusión entre John Allsopp, Tantek Çelik, Jeremy Keith, and Chris Messina no Microformats Dinner 2007 April 18 following Web 2.0 Expo relanzou a idea de POSH e a importancia de promover os obxetivos de POSH, do que están feitos os microformatos e son un subconxunto propio del. Para máis información ler [posh-gl#Historia|Historia]]

Por qué

The term semantic-html is a mouthful, and belies both how simple it is, how well established it is among modern web designers, and the fact that it has benefits far beyond the obvious doing the right thing for the Web by using semantic markup. We need a simple short mnemonic term that captures the essence of the concept, and is easily verbed (to posh, poshify, poshed up).

O termo html semántico é un, e ademáis oculta o simple que é, o ben asentado que está entre os deseñadores web modernos e o feito de que aporta beneficios máis aló do obvio de facer o correcto para a Web usando marcado semántico. Precisamos un un curto termo nemotécnico que capture a esencia do concepto e sexa facilmente conxugable ( to posh, poshify, poshed up).

What

POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it. Pick a page on your web site to begin with, and apply the POSH Checklist to it. Continue with the POSH Process. Read POSH Resources to learn more about POSH.

POSH recolle as mellores prácticas do uso de HTML semántico para os autores de páxinas web. O HTML semántico é un subconxunto de elementos e atributos HTML 4.01 (ou XHTML 1.0) que son semánticos máis ca de presentación. A mellor maneira para aprender e entender POSH e facelo. Colle unha páxina do seu sitio web para comezar, e aplicalle a lista de control POSH. Continúa co POSH Process. Le POSH Resources para aprender máis sobre POSH.

The POSH Process

What can you do to be POSH and to make your websites POSH? Que podes facer para ser POSH e facer os seus sitios web POSH?

1. Publish POSH content. Read POSH resources and make sure your website publishes valid semantic (X)HTML, and uses semantic-class-names accordingly.
2. Publica contido POSH. Le os resources sobre POSH, asegúrate de que o teu sitio web valida semantic (X)HTML e usa semantic-class-names coma corresponde.
3. Spread POSH. Encourage others to be POSH and POSHify their websites by linking to this page.
4. Difunde POSH. Anima a outros a ser POSH e POSHisifica os seus sitios web enlazandoos a esta páxina.
5. Improve POSH. Help us gather resources to enable more people to easily POSHify their websites.
6. Mellora POSH. Axudanos reunindo recursos que permitan a mais xente POSHificar os seus sitios web de xeito sinxelo.

The POSH Checklist

• The first rule of POSH is that you must validate your POSH.
• A primeira regla de POSH é que debes validar o teu POSH.
• Second, drop the use of TABLEs for purely presentational purposes, spacer GIFs, and presentational-html in general.
• A segunda, abandona o uso de taboas para intencións puramente de presentación, GIFs separadores e html de presentación en xeral.
• Next, fix your Bed and BReakfast markup.
• O seguinte, reparar o teu marcado Bed and BReakfast.
• Eliminate Anorexic Anchors.
• Elimina os puntos de ancla anoréxicos
• Use good semantic-class-names.
• Utiliza bos nomes de clase semñanticos
• ...

Recursos

Tutoriais de POSH

Step by step tutorials to create POSH content or upgrade existing content to POSH. Tutoriais pasao a pasao para crear contido POSH ou actualizar contido que xa existe a POSH.

• Validating your css and html Unha sinxela guía paso a pasa sobre cómo e por qué debes validar o teu marcado
• ...

Marcadores sobre POSH

• Comproba o Grupo de POSH en Ma.gnolia
• Mira as páxinas etiquetadas con POSH e microformatos en de.icio.us

POSH Presentations

Presentations which explain and advocate concepts and techniques for utilizing semantic HTML. If/when this section gets too big, we can move it to posh-presentations.

• CSS: Between the Style Sheets by Tantek Çelik (2003-03), specifically, see slides 3-4,6 starting with "Leaving the <B>ed & <BR>eakfast", and slide 9 "CSS & the Semantic Spectrum" which provides an overview of the semantic spectrum of (X)HTML tags.
• real world semantics (2004-02-11)
• Semantic XHTML: Can your website be your API? - Using semantic XHTML to show what you mean (2004-09-28)
• The Elements of Meaningful XHTML (2005-09-29, first version: 2005-03-13 at SXSW Interactive).
• ...
• See also more microformats presentations in general.

POSH Books

Modern web design books which document good semantic HTML practices.

• Web Design in a Nutshell, Third Edition by Jennifer Niederst Robbins See Jenville.
• Microformats empowering your markup for Web 2.0 by John Allsopp. Chapter 3 is a detailed and practical overview of the appropriate use of structural, valid and semantic HTML.
• Semantics, Standards and Styling by Paul Haine.
• Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd.

POSH Magazines

Online (and off) magazines which frequently publish articles about semantic HTML. If/when this section gets too big, we can move it to posh-magazines.

• A List Apart: For People Making Websites (see in particular HTML and XHTML Articles)
• Digital Web Magazine

POSH Blogs

Blogs that with some regularity post high quality discussions, insights, and in general have advanced the state of the art of POSH. If/when this section gets too big, we can move it to posh-blogs.

• David Baron's weblog
• Jeffrey Zeldman Presents
• meyerweb.com - Eric Meyer
• Microformatique - John Allsopp
• SimpleBits - Dan Cederholm (see in particular SimpleQuiz)
• Tantek Çelik
• ...

POSH Blog posts

Blog posts that provide specific, modern, guidance, techniques and tips for using more and better semantic HTML. This list is incomplete. We know there are lots more blog posts out there that fit the aforementioned description - please add them! If/when this section gets too big, we can move it to posh-blog-posts.

• The Sandbox theme for WordPress readme.html discusses what POSH is and how the theme helps users use it.
• Bed and BReakfast markup (B&BR) (2002-10-22) - avoiding nonsemantic uses of <b>old and <br>eak tags and using <h3>adings and <p>aragraphs instead.
• <A>norexic </A>nchors (2002-11-28) - use the "id" attribute on existing elements instead of adding empty <a name="foo"></a> elements. Use rel-bookmark for post permalinks within the document.
• A Touch of Class (2002-12-16) - introduction to proper use of the HTML 'class' attribute.
• Dive into Semantic MARKup (2002-12-31)
• Comment markup, presentation and plumbing (2003-01-04) - how to markup a list of comments, including example use of the rare "hreflang" attribute.
• Competent Classing by Eric Meyer (2004-07-18)
• More about the 'class' attribute (2004-07-20)
• Web Standards in the Real World: An Interview with Molly Holzschlag (2005-06-01)
• Webpatterns and websemantics (2005-11-18)
• Writing Semantic HTML by Jesse Skinner (2006-02-22)
• Who will read your Semantic HTML? by Jesse Skinner (2007-01-04)
• Semantics in HTML by John Allsopp (2007-01-08 - 2007-03-12)
  • Part I - Traditional HTML Semantics (2007-01-08)
  • Part II - standardizing vocabularies (2007-02-20)
  • Part III - Towards a semantic web (2007-03-12)
• Built in HTML semantics A list of the semantic elements and attributes of HTML by John Allsopp (2007-01-08)
• The Importance of Being POSH by Tantek Çelik (2007-04-20)
• Getting back to POSH (Plain ol’ Semantic HTML) by Chris Messina (2007-04-21)
• I’m POSH - are you? (2007-04-23)
• The Internet’s Upper Class Or Why Your Site Should Be POSH (2007-04-24)
• On Appropriate Use of DIVs, or When Divitis Doesn’t Apply by Nate Koechley, 2006-12-15
• Quick Comment: Choose Class/ID Names Based on Semantic and/or Structural Meaning by Nate Koechley, 2006-12-22
• SEEing is believing - using standards and efficient design, coding, maintenance, and marketing to produce a search-engine-efficient site by Richard Leland (2006-07-31)
• ...

See more blogs talking about "semantic HTML" and POSH.

POSH Podcasts

• A talk about POSH in the .Net magazine podcast episode 8 (56 minutes; 26 Mb. Relevant section 30:10-42:40)

Hidden POSH Treasures

The following sites have POSH related articles, tutorials etc. on them, but you have to dig for them from the home page. Help find the hidden POSH treasures in these sites and add direct links to POSH related articles, tutorials etc. to the specific sections above. You can leave the top level site links here until/unless you have dug thru the entire site and found all the treasures.

• W3Schools Online Web Tutorials
• Dev.Opera

POSH Bling for your Blog

If you want to improve your existing blog, there are some pretty simple things you can do:

WordPress

• Use the Sandbox or K2 themes that already support hAtom and hCard
• Add the hCard About Widget to your site

Spread POSH

Now that you've poshified your website(s), what next? Well, help spread POSH to other websites!

• Promote POSH. Make a POSH button (perhaps using semantic HTML and CSS ;) linking to this page and put it on your site, in your blogroll, in your footer, etc. Maybe even come up with a nice POSH button graphic and share it with the microformats community with a liberal license (public domain, CC-by-3.0, MIT, etc.) Like these:
  • - CC-by-3.0
  • - CC-by-3.0
  • — CC-by-3.0
  • — CC-by-3.0
• Tell a friend. Talk to web design friends about POSH and convince and help them to poshify both their personal websites, and the websites they build for others. Blog about your experience with poshification and what steps you went through to poshify your websites. Write a posh-testimonial!
• Come up with more ideas to help spread POSH. Here are a few.
  • Hold a PoshPit - a one or half day marathon session mixing semantic HTML experts with folks who maintain/run web sites in general and see how many websites you can collectively upgrade to POSH during the course of the day.
  • ...

Improve POSH

As you read the POSH resources documented here, what other POSH resources did you find? Add them to this page.

With your experience with both poshifying your sites and helping others do so, what have you learned? What kind of issues did you run into? What questions were commonly asked? What do you feel like you need to more easily and quickly help more people poshify their content?

History

A brief history of references to "POSH" in this context and "plain old semantic HTML".

plain old semantic HTML

The earliest references to "plain old semantic HTML" that have been found so far are:

• 1998-05-01: Kirrily 'Skud' Robert on comp.infosystems.www.authoring.site-design - "The site is implemented in HTML 4.0 Transitional with style sheets; this means that anyone with an older browser won't get presentational markup, just plain old semantic HTML. "
• 2006-09-21 Drew's comment by on "Tables and SEO": "I’d say it’s well worth it for a variety of reasons to only use tables when you’re presenting tabular data, and use plain old semantic HTML to mark up your content in all other cases." (retrieved by Tantek 08:20, 20 Apr 2007 (PDT))

If you can find earlier references, please add them and include a brief quotation of the context of the reference to "plain old semantic HTML".