valor semântico do span

Question

O elemento span parece ser exatamente como um div, mas a nível in-line em vez de no nível de bloco. No entanto, eu não consigo pensar em quaisquer divisões lógicas benéficos que o elemento span pode proporcionar.

A única frase ou palavra se não for contida em uma frase, parece ser a parte lógica menor. Ignorando CSS, já que CSS é apenas para layout e não para o significado semântico, quando é tempo de oferecer valor semântico adicional por cortar-se uma frase ou seqüência de palavras ?

Parece que em todos os casos, outros elementos são mais adequadas para agregar valor semântico, tornando período um elemento puramente layout. Isso é verdade?

Answer 1

Span pode ser usado para adicionar significado semântico que cai fora do âmbito do HTML. Isso pode ser feito usando classes que identificam determinados atributos. Por exemplo, se você estiver escrevendo um romance de ficção científica que você pode usar span para identificar palavras inventadas, porque você pode querer formatar os de forma diferente, ou porque você pode querer o corretor ortográfico para ignorá-los:

Em seguida, o assistente invocou o gravenwist e mandou-o atacar o exército que se aproximava. O gavenwist resistiu, mas do assistente wistwand era muito poderoso.

Esta poderia tornar como

Em seguida, o assistente invocou o gravenwist e mandou-o atacar o exército que se aproximava. O gavenwist resistiu, mas o mago wistwand era muito poderoso.

Outro bom exemplo deste tipo de coisa são microformatos , que permitem a criação de estrutura arbitrária dentro de HTML:

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

A vantagem de extensão, contra div, é que spans podem aparecer em quase toda parte, porque eles são conteúdo em linha, e divs são elementos de bloco, de modo que só pode ocorrer dentro de alguns outros elementos.

Answer 2

Um benefício muito útil seria alterações marca no idioma. Por exemplo.

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

Os leitores de tela com várias capacidades de linguagem poderia fazer uso deste.

Assim, eles não são de apresentação, apenas genérico. Na verdade, vãos são raramente apresentação, fornecendo um nome de classe semanticamente significativa é usado, como "ortografia-engano" e não "-vermelho-texto em negrito".

Answer 3

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

Ele depende completamente o que você quer expressar. Se marcar o primeiro nome é de valor semântico para você (seja ele só para ter um gancho para CSS para formatar primeiros nomes ou para extraí-los usando alguma linguagem de script), então você pode usar um palmo.

Answer 4

Eu uso SPAN muito quando eu quero ter o JavaScript analisar o elemento e inserir algum valor dentro da tag, por exemplo:

<span datafield="firstname"></span>

teria um valor inserido nele mais tarde, então, nesse caso, tem significado, embora apenas um significado que eu decidir dar-lhe. O fato de que espaço de outra forma não tem efeito sobre o layout é ideal nesse caso.

Answer 5

spans pode , na verdade, ser portadores de informação semântica em forma de atributos class. Isto é usado por microformatos.

Answer 6

tags span precisa de um atributo de classe ou id para dar-lhes significado.

por exemplo. 0123 456789

Answer 7

Ignorando CSS, uma vez que dará ao significado semântico, quando faz extensão fornecer valor adicional por semântica cortando-se uma frase ou seqüência de palavras?

Ignorando CSS (e outros não-HTML markup), nunca mais. A <span> 's único propósito na vida é a realização de marcação que você não pode expressar em HTML. Marcação, como <span style="dropCap">, que não tem um equivalente em HTML, mas tem existido na cópia da publicação de centenas de anos, e que é sempre aplicado a apenas um personagem - a primeira letra de um item (artigo, qualquer que seja), sem causando uma palavra-break (ou qualquer pausa maior).

Parece que em todos os casos, outra elementos são mais adequadas para a adição valor semântico, fazendo extensão puramente elemento de layout. Isso é verdade?

Sim e não. O único valor real do <span> é que é semanticamente neutro. Isto é, ao contrário, por exemplo, <p>, ele não faz nada que você pode querer ter não fazer quando você estiver usando-o para realizar outra marcação. E há momentos, como <span style="dropCap"> acima, quando você não quer quaisquer outros efeitos.

Answer 8

Se você quiser aplicar regras de formatação parte do conteúdo (por exemplo, uma única palavra ou frase) de um tag. Você pode usar a tag span. Às vezes é chamado tagless formatação.

Eu uso vãos na minha EBNF -> XHTML conversor para aplicar um formato diferente para literais e tokens

.

Answer 9

SPAN (e DIV) elementos por si só são geralmente considerados para ser semanticamente neutro. Uma boa abordagem é usar marcação semântica, tanto quanto possível de forma adequada, mas às vezes você correr em situações em que os elementos HTML existentes que fornecem significado semântico (EM, FORTE, ABBR, ACRONYM, etc, etc) não são o ajuste certo semanticamente para o seu conteúdo. Então, o próximo passo é usar um semanticamente neutro SPAN ou DIV com um id semanticamente significativa ou classe.

Answer 10

Eu acho que ele está perguntando sobre a diferença entre um div e de um palmo, e não há realmente um, diferente do comportamento padrão.

É uma questão de convenção. Ao usar styling, div é normalmente usado para divisões demarcar de conteúdo, enquanto span é utilizado para demarcar texto embutido. Você poderia facilmente usar div em todos os lugares ou utilização span em todos os lugares, mas é útil pensar neles como diferente, mesmo que seja apenas por convenção.

Answer 11

Em HTML poderia ser usado para microformatos. Mas desde que a especificação HTML real é X HTML, não há nenhum ponto. Em vez de:

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

Eu prefiro usar:

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

Answer 12

O significado de SPAN é "este é um período (genérico) do conteúdo (por exemplo, o texto)". Compare a DIV, que significa "esta é uma divisão lógica (isto é, uma seção do documento genérico)".

SPAN é principalmente um gancho para pendurar estilos fora de (assim você pode usar <span style='color:blue'> vez de <font color='blue'>).

A partir a especificação :

O DIV e elementos SPAN, em conjunto com os atributos id e class, oferecem um mecanismo genérico para adicionar estrutura para documentos. Estes elementos definem o conteúdo para ser embutido (SPAN) ou bloco de nível (DIV), mas não impor quaisquer outros idiomas de apresentação sobre o conteúdo. Assim, os autores podem usar estes elementos em conjunto com folhas de estilo, o atributo lang, etc., para HTML sob medida para suas próprias necessidades e gostos.

Suponha, por exemplo, que queríamos para gerar um documento HTML com base em um banco de dados de informações do cliente. Desde HTML não inclui elementos que identificam objetos, como "cliente", "número de telefone", "endereço de email", etc., usamos DIV e SPAN para alcançar os efeitos estruturais e de apresentação desejados. Podemos usar o elemento TABLE da seguinte forma para estruturar a informação:

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>