HTML5 Tutorial Básico

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Armazenamento do Cliente HTML5 Atributos do Formulário

HTML5 elemento semântico

Semantic elements are those that you can understand the meaning of the content they represent just by looking at the element name. For example, for articles <article>, there are headers <header>, catalogs <catalog>, contents <content>, and footers <footer>.

What are semantic elements?

A semantic element can clearly describe its meaning to browsers and developers.

Examples of non-semantic elements: <div> and <span>. - Without considering the content.

Examples of semantic elements: <form>, <table>, and <img>. - Clearly defines its content.

Browser support

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support semantic elements.

Note: Internet Explorer 8 And earlier versions do not support this element. However, a compatible solution is provided at the bottom of the article.

HTML5New semantic elements in HTML5

Many existing websites contain the following HTML code:

, <div id="nav">, <div>, or <div id="footer">. To indicate navigation links, headers, and footers.

HTML5 It provides new semantic elements to clarify different parts of a web page:

<header>
<nav>
<section>
<article>
<aside>
Element <figcaption>.
<figura>
<footer>

HTML5 Element <section>.

A tag <section> define sections (section, area) in a document. For example, chapters, headers, footers, or other parts of a document.

According to W3C HTML5Document: 　section contains a set of content and its title.

Exemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>site de tutoriais básicos (oldtoolbag.com)</title>　
</head>
<corpo>
<section>
　　<h1>HTML5</h1>
　　<p>It is a new version of　HTML　language that includes new elements, attributes, and behaviors, and includes a series of technologies that can be used to make　Web　sites and applications more diverse and powerful.　This set of technologies is often referred to as　HTML5　and its friends, usually abbreviated as　HTML5。</p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>A major change in the evolution of CSS is W3C decided to divide CSS3分成一系列模块。Browser vendors innovate quickly according to the CSS rhythm, so by adopting the modular approach, CSS3The elements in the specification can develop at different speeds because different browser vendors only support given features. But different browsers support different features at different times, which also makes cross-browser development complex./p>
</section>
</body>
</html>

Teste e veja ‹/›

HTML5 <article> 元素

<article> 标签定义独立的内容。

<article> 元素使用示例:

Forum post
Blog post
News story
Comment

Exemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>site de tutoriais básicos (oldtoolbag.com)</title>　
</head>
<corpo>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001ano5mês23日W3C completed CSS3的工作草案，
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块　。/p>
</article>
</body>
</html>

Teste e veja ‹/›

HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

Exemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>site de tutoriais básicos (oldtoolbag.com)</title>　
</head>
<corpo>
<nav>
　　　　<a href="/html/">HTML</a>　|
　　　　<a href="/css/">CSS</a>　|
　　　　<a href="/js/">JavaScript</a>　|
　　　　<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

Teste e veja ‹/›

HTML5 <aside> 元素

<aside> 　tag defines content outside the main area of the page (such as sidebars).

The content of the aside tag should be related to the main content.

Exemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Exemplo por pt.oldtoolbag.com</title>
</head>
<corpo>
<article>
　　<h1>Título do artigo</h1>
　　<p>Texto que aparece sob o artigo</p>
</article>
<aside>
　　<p>Text that appears under aside</p>
</aside>
</body>
</html>

Teste e veja ‹/›

HTML5 <header> 元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下示例定义了文章的头部:

Exemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Exemplo por pt.oldtoolbag.com</title>
</head>
<corpo>
<header>
　　<img src="/static/images/logo-n.png" alt="Logo">
</header>
<article>
　　<h1>Título do artigo</h1>
　　<p>Texto que aparece sob o artigo</p>
</article>
</body>
</html>

Teste e veja ‹/›

HTML5 <footer> elemento

O elemento <footer> descreve a área inferior do documento.

O elemento <footer> deve incluir seu elemento contido

Um rodapé geralmente contém o autor do documento, informações de direitos autorais, termos de uso de links, informações de contato, etc.

Você pode usar múltiplos elementos <footer> no documento.

Exemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　Exemplo por pt.oldtoolbag.com</title>
</head>
<corpo>
<article>
　　<h1>Título do artigo</h1>
　　<p>Texto que aparece sob o artigo</p>
</article>
<footer>
　　<p>Direitos autorais ©2013</p>
</footer>
</body>
</html>

Teste e veja ‹/›

HTML5 Elementos <figura> e <figcap>

O elemento <figura> especifica conteúdo fluído independente (imagens, gráficos, fotos, código, etc.).

O conteúdo do elemento <figura> deve estar relacionado ao conteúdo principal, mas, se removido, não deve afetar o fluxo do documento.

O elemento <figcap> define o título do elemento <figura>.

O elemento <figcap> deve ser colocado na primeira ou última posição dos filhos do elemento <figura>.

Exemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>site de tutoriais básicos (oldtoolbag.com)</title>　
</head>
<corpo>
<figura>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcap>venglobe venglobe venglobe.</figcap>
</figura>
</body>
</html>

Teste e veja ‹/›

　HTML5exemplo de resumo de elementos semânticos online

Exemplo

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>elemento semântico</title>
</head>
<corpo>
　　　　<!--elemento estrutural-->
　　　　<header>cabecalho</header>
　　　　<section>indica um parágrafo: usado para descrever capítulos de áreas</section>
　　　　<footer>parte inferior da área</footer>
　　　　<nav>menu - navegação</nav>
　　　　<article>indica o conteúdo principal do artigo</article>
　　　　<!--elemento bloco - usado para dividir áreas-->
　　　　<aside></aside>
　　　　<figura>
　　　　　　　　<figcap></figcap>
　　　　</figura>
　　　　<code>indica um trecho de código</code>
　　　　<dialog>indica uma conversa
　　　　　　　　<dt>persona que fala</dt><dd>conteúdo</dd>
　　　　</dialog>
　　　　<!--elemento semântico-->
　　　　<mtter>um valor em um determinado intervalo</mtter>
　　　　<time></time>
　　　　<progress>Barra de progresso</progress>
　　　　<video> Vídeo</video>
　　　　<audio>Áudio</audio>
　　　　<!--Elementos de interação-->
　　　　<details>Um conteúdo específico por algum método de exibição</details>
　　　　<datagrid>Usado para controlar a exibição de dados do cliente</datagrid>
　　　　<menu>Menu de interação dinâmica</menu>
　　　　<command>Nome</command>
　　　　<!--Exibir exemplo de artigo-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>Rótulos no cabeçalho HTML head</h1>
　　　　　　　　　　　　<time>2015ano12mês12dia</time>
　　　　　　　　</header>
　　　　　　　　<p>Os rótulos e elementos no cabeçalho HTML head são muitos, envolvendo a renderização da página pelo navegador, SEO, etc., e cada motor de navegador e fabricante de navegadores domésticos têm seus próprios rótulos e elementos. Isso cria muitas diferenças. Na era da mobilidade, a estrutura do cabeçalho head e os elementos meta no dispositivo móvel são ainda mais importantes. Entender o significado de cada rótulo e escrever rótulos de cabeçalho que atendam às suas necessidades é o objetivo deste artigo. Este artigo se baseia no artigo de Yi Si para expandir e resumir a introdução dos significados e cenários de uso dos rótulos e elementos comuns no cabeçalho head.</p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--Comentário-->
　　　　<section>
　　　　<h2>Comentário</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>Uma hora atrás</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Comentário</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>Li Si</h3>
　　　　　　　　　　　　　　　　<p><time pubdata datatime="2013-09-23　10:00　-　11:00>Uma hora atrás</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>Comentário</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

Teste e veja ‹/›

Podemos começar a usar esses elementos semânticos?

Esses elementos são todos elementos de bloco (exceto <figcaption>).

Para que esses blocos e elementos funcionem em todas as versões dos navegadores, você precisa configurar algumas propriedades no arquivo de estilo (o seguinte código de estilo permite que navegadores de versões antigas suportem os elementos de bloco descritos neste capítulo):

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Internet Explorer 8 e problemas em versões mais antigas do IE

IE8 Versões mais antigas do IE não conseguem renderizar efeitos CSS nestes elementos, o que impede o uso de <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, ou outros HTML5 elements.

Solução: Você pode usar HTML5 Shiv Javascript script para resolver problemas de compatibilidade do IE.

HTML5 Endereço de download do Shiv:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

Após o download, insira o seguinte código na página da web:

O código acima no navegador menor que IE9Versão será carregada html5arquivo shiv.js. Você deve colocá-lo dentro do elemento <head>, pois o navegador IE precisa carregar no cabeçalho antes de renderizar esses HTML5dos Novos Elementos

HTML5 Armazenamento do Cliente HTML5 Atributos do Formulário