Escrevendo HTML
| English | Português |
|---|---|
| HTML/ˌeɪtʃ tiː em ˈel/ | HTML |
| attribute/ˈætrɪbjuːt/ | atributo |
| element/ˈelɪmənt/ | elemento |
| semantic elements/səˈmæntɪk ˈelɪmənts/ | elementos semânticos |
It looks like a link, but Tab skips it
- A styled rectangle saying “Join” is not automatically a working link. A real anchor with a destination has browser behaviour that styling alone does not supply.
- HTML 超文本标记语言 gives content structure and meaning. CSS controls presentation; choosing meaningful HTML also supports keyboard and assistive-technology use.
Por que usar um elemento de título real para um cabeçalho de página?
Um cabeçalho descreve a estrutura do documento. A aparência pode ser controlada com CSS.
Read the tag and its attributes
- An element 元素 often has a start tag, content and an end tag:
<p>Meet on Thursday.</p>. An attribute 属性 supplies information in the start tag:<a href="join.html">Join</a>. - An HTML void element such as
imghas no end tag or child content. It does not “close itself”; a trailing slash is unnecessary in HTML. Nest paired tags without crossing them.
Qual atributo define o destino de navegação de um âncora?
Uma âncora como Como ingressar usa href.
Mark the page regions by purpose
- Semantic elements 语义化元素 include
navfor major navigation andmainfor the page's main content. Use headings to describe sections anddivfor a generic grouping when no more specific element fits. - A native
awithhrefnavigates; a nativebuttonperforms an action. Semantic markup helps, but labels, behaviour and focus still need testing.
Quais elementos têm esses significados HTML específicos? Selecione todos os que se aplicam.
div é genérico. Use um elemento mais específico quando seu propósito definido for adequado.
Correlacione o propósito pretendido a um elemento nativo adequado.
Elementos nativos fornecem significado e comportamento padrão, que ainda precisam de rótulos utilizáveis e testes.
Build a small complete page
- Save this example as
index.htmlbeside a realjoin.html. Open it in a browser and follow the link using Tab and Enter. langidentifies the page language;titlenames the browser tab. The viewport setting lets responsive styles use the device width.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robotics club</title>
</head>
<body>
<nav aria-label="Main"><a href="join.html">How to join</a></nav>
<main>
<h1>Robotics club</h1>
<p>Meet Thursday at 4 pm in room 12.</p>
</main>
</body>
</html>
<a href="join.html">How to join</a> combines a destination and a useful label. <div class="link">Click here</div> provides neither native navigation nor a destination.
Choose alternatives by the image's purpose
- An informative image needs an alternative conveying its relevant meaning. A purely decorative image normally uses
alt=""so assistive technology can skip it. - For an image used as a link, describe the link's function when that information is not otherwise supplied. A complex chart also needs its important data explained in text.
Do not use headings merely to enlarge text, or repeat “image” as every alternative. Equally, do not give decorative images lengthy descriptions that interrupt the page.
alt="imagem" é uma alternativa útil para um gráfico informativo.
A alternativa deve transmitir as informações relevantes. Um gráfico complexo também precisa ter seus dados importantes em texto.
Uma notícia de clube usa uma fotografia para mostrar alunos plantando árvores no pátio da escola. Escreva um texto alternativo útil.
Exemplo: “Alunos plantando árvores no pátio da escola.” Não invente uma contagem que não foi fornecida.
Um pequeno ornamento ao lado de um cabeçalho não adiciona informação. Qual alternativa de imagem normalmente se encaixa?
Uma alternativa vazia permite que tecnologias assistivas pulsem uma imagem puramente decorativa.
Verify structure and behaviour
- Check the heading order, meaningful link labels, keyboard use and image alternatives. An HTML validator can detect markup errors, but cannot judge whether your wording is useful.
- Make the meeting page usable with styles turned off. Then style the content without changing headings into appearance-only shortcuts.
Choose HTML by purpose. Use native links and buttons, valid nesting and image alternatives that match the image's role.
Sources: HTML syntax and W3C decorative images.
Em HTML, img é um elemento vazio e não deve ter tag de fechamento.
Elementos vazios não têm conteúdo filho ou tag de fechamento. Uma barra final é desnecessária; ela não confere comportamento de auto-fechamento aos elementos HTML.