Sempre que visito um site bonito, não posso deixar de olhar o código-fonte. É como ter um par de óculos de raios X e poder ver qualquer pessoa - mesmo através da folha de figueira. Isto é simplesmente uma coisa natural! Mal posso esperar para descobrir se este lindo site foi escrito com o mesmo código lindo ou se é apenas uma beleza na beleza. Código? Beleza? certamente! Afinal, código é como poesia. (Nota de tradução: “Código é poesia” é o slogan do famoso sistema de blogs WordPress.) Este é apenas o HTML mais básico. Naturalmente, não é tão complexo e elegante quanto outras linguagens dinâmicas, mas ainda mantém o charme dado por seu. criador.
Isso me fez começar a pensar, como deixar o código bonito? Com HTML, tudo isso é trabalho manual. Vejamos como as linguagens de marcação podem atingir um estado de beleza.
A imagem é grande o suficiente (2.000x2.000) para que você possa imprimi-la e colá-la em seu armário pessoal e impressionar seus amigos. Dito isto, este é realmente um tamanho confuso. Vou liberar a imagem PSD original para que todos possam modificar.
HTML5 - HTML5 e seus novos elementos trazem uma beleza sem precedentes.
DOCTYPE-HTML5 tem o melhor tipo de documento .
Recuo - Tabulações e espaços são usados para recuar o código para mostrar corretamente o relacionamento pai-filho entre tags e enfatizar a estrutura hierárquica.
Charset - Uma declaração de charset deve ser feita no cabeçalho antes de todo o conteúdo.
Título – O título do site é simples e claro. Comece descrevendo a função da página, após o separador, e termine com o título do site.
CSS - usa apenas uma folha de estilos simples (os tipos de mídia são declarados na folha de estilos) e é direcionado apenas a bons navegadores. O IE6 e versões anteriores receberão uma folha de estilo genérica.
Corpo - Ao fornecer um ID ao corpo , você pode estilizá-lo exclusivamente para páginas diferentes, sem a necessidade de mais marcações.
JavaScript - Chamado de jQuery (a mais bela biblioteca de scripts JavaScript ) do Google. Apenas um único arquivo JavaScript é carregado. Cada script é referenciado na parte inferior da página.
Caminho do arquivo – Para maior eficiência, use caminhos relativos para recursos do site. Do ponto de vista da adaptação à reimpressão, os arquivos de conteúdo (como imagens) usam caminhos absolutos.
Atributos da imagem - A imagem contém texto alternativo, principalmente para o caso de falta da imagem, mas também pode ser utilizado para verificação. Para melhorar a eficiência da renderização, é melhor especificar a largura e a altura da imagem.
Conteúdo principal primeiro – O conteúdo principal da página deve vir depois da marcação e navegação básicas e antes de qualquer conteúdo auxiliar (como barras laterais).
Elementos descritivos apropriados em nível de bloco - HEADER, NAV, SECTION, ARTICLE, ASIDE - essas novas " seções de descrição " descreverão o conteúdo melhor do que o DIV anterior.
Hierarquia – Colocar tags de título em maiúscula será eficaz e seguirá uma “ hierarquia ” clara.
Tags descritivas apropriadas - As listas são marcadas de acordo com diferentes necessidades: listas não classificadas, classificadas e personalizadas que não são comumente usadas.
Conteúdo comum incluído – O mesmo conteúdo que aparece em páginas diferentes é melhor incluído na página pelo lado do servidor. (Por qualquer método, idioma, CMS, o que funcionar para você.)
Classes Semânticas - Não é apenas necessário configurar nomes de elementos corretos, mas também garantir que os nomes das classes e IDs sejam semânticos : eles podem desempenhar um papel descritivo mesmo sem instruções específicas. (Por exemplo, “col” é melhor que “esquerda”)
Classes – Quando vários elementos precisam usar estilos semelhantes, tente definir a mesma classe para eles. (Reutilização)
IDs – Quando o elemento aparece apenas uma vez na página, tente definir IDs para eles e não defina o mesmo ID para elementos diferentes.
Elementos Dinâmicos – Os efeitos dinâmicos são adicionados apenas quando realmente necessários.
Caracteres codificados – Quando caracteres especiais aparecerem, preste atenção à codificação dos caracteres .
Livre de estilo - tudo na página não tem nada a ver com estilo e você nem precisa especificar o estilo que deseja. Tudo na página está limitado aos três itens a seguir: recursos necessários do site, conteúdo, descrição.
Comentários - Ao analisar o código, conteúdo que não exija ênfase especial ou que não seja particularmente óbvio será incluído nos comentários .
Válido – a marcação em todo o site está em conformidade com a validação do W3C. Preste atenção ao fechamento das tags, garanta os atributos necessários, evite métodos obsoletos, etc.