HTML Syntax
HTML Elements
Structure
openning closing
tag content tag
┌┴┐┌────────────────┐┌─┴─┐
<p>Lorem ipsum dolor.</p>
└────────────────────────┘
Element
Nesting elements
<p>Lorem <strong>ipsum</strong> dolor.</p>
<p>Lorem <strong>ipsum dolor.</p></strong> 👎
Example
<html>
<head>
<title>Bem-vindos</title>
</head>
<body>
<h1>Olá, turma!</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
Output:
Olá, turma!
Meu primeiro parágrafo
References
- MDN, WP e W3C
- Title Element: (Description, Attributes, Usage, Example, Specifications, Browser compatibility)
- Comparison of elements: w3school, triin
- Obsolete and deprecated elements | MDN
- Dialog Element | Can I Use
- Elements:
<!DOCTYPE>,<html>,<head>,<title>,<body>,<h1>,<p>
HTML DOCTYPE
HTML5
<!DOCTYPE html>
<html>
<head>
<title>Bem-vindos</title>
</head>
<body>
<h1>Olá, turma!</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
References
- Recommended Doctype Declarations to use in your Web document | W3C
- Doctypes and markup styles | W3C
- Quirks Mode and Standards Mode | MDN
- DOCTYPE Examples
HTML Attributes
Structure
attribute
┌─────┴────┐
<p lang="pt-BR">Lorem ipsum dolor.</p>
Empty elements
<meta name="description" content="A description of the page">
Example
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Olá, turma!</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
Output:
Olá, turma!
Meu primeiro parágrafo
References
- HTML Attributes: MDN, WP e W3C
- Global Attributes | MDN
- Meta attributes | MDN
- HTML attributes | MDN
- Character Sets | IANA
- Language Subtag Registry | IANA
- Charset Guide
- Attributes:
HTML Entities
Entity Table
| Char | Description | Unicode | Entity Name | Entity Code (Hex) | Entity Code (Dec) |
|---|---|---|---|---|---|
| ! | EXCLAMATION MARK | U+00021 | ! | ! | ! |
| & | AMPERSAND | U+00026 | & & | & | & |
| < | LESS-THAN SIGN | U+0003C | < < | < | < |
| > | GREATER-THAN SIGN | U+0003E | > > | > | > |
| © | COPYRIGHT SIGN | U+000A9 | © © | © | © |
| á | LATIN SMALL LETTER A WITH ACUTE | U+000E1 | á | á | á |
Example
Para criar um parágrafo em HTML é necessário usar a tag <p>.
A entidade < no HTML cria o caracter <.
Para exibir o © no HTML usamos a entidade ©.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Para criar um parágrafo em HTML é necessário usar a tag <p>.</p>
<p>A entidade < no HTML cria o caracter <.</p>
<p>Para exibir o © no HTML usamos a entidade ©.</p>
</body>
</html>
Output:
Para criar um parágrafo em HTML é necessário usar a tag
.
A entidade < no HTML cria o caracter <.
Para exibir o © no HTML usamos a entidade ©.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Para criar um parágrafo em HTML é necessário usar a tag <p>.</p>
<p>A entidade &lt; no HTML cria o caracter <.</p>
<p>Para exibir o © no HTML usamos a entidade &copy;.</p>
</body>
</html>
Output:
Para criar um parágrafo em HTML é necessário usar a tag <p>.
A entidade < no HTML cria o caracter <.
Para exibir o © no HTML usamos a entidade ©.
References
HTML Comment
Structure
<!-- HTML Comment -->
Example
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Cabeçalho -->
<h1>Olá, turma!</h1>
<!-- Conteúdo -->
<p>Meu primeiro parágrafo</p>
</body>
</html>
Output:
Olá, turma!
Meu primeiro parágrafo