Skip to content

Instantly share code, notes, and snippets.

@reginadiana

reginadiana/00_html.md

Last active May 15, 2023 23:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save reginadiana/aa0260084603bdb2ad941637da4fff5f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save reginadiana/aa0260084603bdb2ad941637da4fff5f to your computer and use it in GitHub Desktop.
Download ZIP
Anotações sobre HTML
Raw
01_patterns.md

Patterns

  1. Especifique o tamanho das imagens

Essa prática tem um grande impacto visual para o usuário. Quando não especificamos o tamanho da imagem, o navegador não reserva um espaço na página para ela. O efeito é que, quando a imagem chega, ela é posicionada em seu lugar empurrando o restante do conteúdo. Isso dá a sensação de que os elementos da página estão se movendo e que ela ainda não está carregada. É uma péssima prática de usabilidade e dá a sensação de mais lerdeza.

  1. Sempre use elementos semanticos como header, footer, ul, li, article, section, etc.

  2. Nunca use apenas caixa alta ou baixa na marcação de títulos, utilize a propriedade CSS text-transform para isso.

  3. Preferir a importação de font-family com @font-face e especificar cada uma das fontes.

  4. Todo conteúdo que for adicionado no content do :before e :after não tem valor semantico e não renderiza no HTML. Esse texto não será acessivel e por isso devemos usar essas pseudo classes apenas para complementos visuais.

  5. Podemos deixar elementos puramente visuais como icones invisiveis para leitores de telas usando aria-hidden="true"

  6. Podemos fazer uso da tag <noscript> para fornecer um feedback ao usuário caso o javascript não esteja disponível para ele.

  7. Usar a tag nav para todas as sessões do projeto que representem uma navegação, e não apenas para o menu do cabeçalho.

  8. A tag main deve ser usada apenas 1 vez no projeto para agrupar o conteúdo principal da página. Exemplo:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

  1. Existem cerca de 100 tags HTML. É bastante improvável que não exista uma que sirva exatamente para cada ocasião.

  2. i e em deixam o elemento itálico e ambos possuem carga semantica, sendo que o i costuma ser usado para coisas como expressões em outros idiomas e o em para indicar enfase no texto.

  3. Visualmente b e strong deixam o elemento negrito. A diferença é que o b não carrega qualquer semantica e o strong representa um texto importante.

Raw
02_resume_html.md

Anotações sobre HTML

Define o tipo de arquivo, assim é mais fácil para os navegadores fazerem o reconhecimento do tipo de arquivo que será processado.

<!DOCTYPE html>

Puxa um arquivo css para o html.

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

Define um titulo para a página. Também deve ser escrito com cautela, pois também será usado para ajudar nas buscas na internet.

<title>Music | Justin Bieber</title>

Ao passar o mouser por cima do elemento, um bloquinho com o texto definido em title será mostrado. Exemplo

<h1 title="Justin Bieber">Justin Bieber</h1>

Define a linguagem da página

<html lang="en">

Define um icon na aba na página:

<link rel="icon" href="assets/icons/music-note.svg" />

Ao usar as meta tag como configuradores do arquivo html, podemos usar:

Para aceitar e mostrar corretamente os diferentes tipos de caracteres:

<meta charset="UTF-8">

Para se adaptar aos dispositivos moveis:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Adicionar uma descrição e autor para a página. A descrição é útil para adicionar palavras chaves e ajudar nas buscas por aquele site no Google por exemplo.

<meta name="description" content="Justin Bieber clone website">
<meta name="author" content="Diana Regina">

Lista de tags

<div> representa uma caixa, uma box, que no entando não dá verdadeiro sentido aos elementos

<header> espaço para cabeçalho

<footer> espaço para rodapé

<section> espaço para sessão

<article> espaço para artigos de blog

<svg> imagens do tipo .svg

<img> imagens de todos os tipos

<pre> mostra o texto com o espaçamento exato ao que foi escrito no editor

<b> texto em negrito

<strong> texto em negrito, representando algo importante

<i> texto em italico, representa algo com enfase

<a> Gera uma ancora, link, url

<mark> texto marcado, como se tivessemos passado um marcatexto por cima

<small> texto menor

<del> texto com um risco no meio

<ins> texto com um risco em baixo

<sub> texto rebaixado

<sub> texto sobreposto

<blockquote> define um bloco com um espaçamento

<q> adiciona aspas em volta do texto

<abbr> define uma abreviação, pode vir acompanhada de um atributo title para mostrar o seu significado

<address> define uma informação para contato

<cite> define o titulo de um trabalho, obra, etc

<bdo dir="rtl"> deixa o texto invertido

Lista de atributos para tags

target especifica onde o link será aberto

alt adiciona um nome para imagem, que será mostrado na tela caso a imagem não puder ser renderizada e também será lido pelos leitores de tela

title

adiciona um texto para ser mostrado quando o usuário passar o mouse por cima do elemento

src define o caminho relativo para puxar a imagem, svg, giff, etc para o elemento

tabIndex com ele podemos definir um caminho de focus que o usuário irá seguir ao ficar clicando na tecla tab

Target para a tag ancora

_blank abre o link em outra aba

_self abre o link na mesma aba

_parent abre o link em outra aba

_top abre o link em outra aba

Fontes

Ao definir a fonte, podemos fazer uma lista de tipos, permitindo que sistemas operacionais que não possam a fonte principal definida (Lucida Grande) tentem aplicar a próxima (Lucida Sans Unicode) e assim sucessivamente. Isso é importamente porque nem todas as fontes estão disponíveis em todos os sistemas operacionais.

font-family: "Lucida Grande", "Lucida Sans Unicode", Verdada, sans-serif;

Por padrão, caso o navegagor não tenha suporte a um tipo novo de campo, o elemento será tratado como um campo de texto normal (text), para garantir o funcionamento básico dos formulários.

Raw
03_buttons.md

Diferentes tipos de botões

<button>Default</button>
<button className="btn-custom btn-large" type="button">
  Large Custom
</button>
<button>
 {/* Ignora o icone em screen-readers */}
 <span aria-hidden="true" data-icon="cloud"></span>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<input type="button" value="<input>" />
<input type="file" name="" id="" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment