Bom, primeiramente preciso definir o que exatamente quis dizer com "âncoras HTML"... eu chamo de âncora HTML aqueles "links falsos" que servem para você subir ou descer pra determinado lugar de uma página (como na demonstração). Enfim, vamos la.
Conceito
Vamos entender como funcionam esses links. Comecemos pelo básico.. seu layout é dividido em três partes, certo(sendo elas Header, Outer e Footer)? Para que possamos fazer um link direcioná-lo para determinada parte de uma página usamos o seguinte código:Vejamos que antes do nome do lugar que você será levado ao clicar no link é antecedido por "#". Exemplificando:
<a href='#outer'>Texto do link</a>
<a href='#footer'>Texto do link</a>
Para direcionamento de partes do layout é apenas isso, agora vamos ao estilo mais "avançado", que são os links para ser direcionado para a parte exata que desejar. Relembrando: para que funcione o direcionamento é preciso que coloquemos o nome de determinada parte a ser direcionada, certo? E como faremos então pra que isso funcione no mesmo esquema daquela lista da demonstração? Calma que eu explico... vamos precisar nomear o link que representa cada letra:
<a name='#B'>Letra B</a>
[...]
Note que mudamos de propriedade HTML para esta ação.. usamos name ao invés de href. Vejamos que novamente eles são antecedidos por "#". Agora vamos ao link que irá direcionar para cada parte:
<a href='#B'>A</a>
Pronto, é só isso... gostou? Então COMENTE!