Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 29
  1. #1

    Html Semantica di una news

    Ciao a tutti.
    Domanda secca e diretta:
    come scrivereste semanticamente una news? o una lista di news in anteprima?

    es:

    Codice PHP:
    <div class="news">
        <
    h3>Titolo della news</h3>
        <
    class="newsdata">20 November 2010</p>
        <
    class="newscontent">
            
    Descrizione news....
        </
    p>
        <
    class="newsAuthor">
            
    Mario Rossi
        
    </p>
        [
    url="#"]Clicca per dettagli[/url]
    </
    div
    O utilizzereste gli h4 per la data? o un div o uno span?

  2. #2
    Un elenco di notizie è semanticamente una lista di definizioni e come tale va marcata in HTML.
    Esempio:
    codice:
    <dl>
         <dt>Titolo della news</dt> 
         <dd>
              <p class="newsdata">20 November 2010</p>
              <p class="newscontent">
                  Descrizione news....
              </p>
              <p class="newsAuthor">
                  Mario Rossi
              </p>
              Clicca per dettagli
         </dd>
    </dl>
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  3. #3
    Ottimo grazie.
    Avevo in effetti pensato di interpretarlo come lista, ma una lista di news non mi convinceva semanticamente. Specie perché in genere vengono visualizzate le ultime due, tre massimo ed era forse pretenzioso definirle come lista.

  4. #4
    Rimarco comunque il fatto che dl (definition list) è una lista, una lista di definizioni ma pur sempre una lista. Adatta, appunto, al caso delle news o simili.
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  5. #5
    Originariamente inviato da codencode
    Rimarco comunque il fatto che dl (definition list) è una lista, una lista di definizioni ma pur sempre una lista. Adatta, appunto, al caso delle news o simili.
    Curiosità: perchè lista di definizioni?
    Quando si dice "definizioni" mi viene a mente più un "vocabolario" che una news... Mentre la news mi rammenta una struttura che dia importanza al titolo e una gerarchia di informazioni. Un po' l'"article" dell'html5 ... dov'è che mi confondo?
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  6. #6
    Una lista di definizioni (dl) è composta di item ciascuno dei quali è formato da due parti:
    - un titolo (dt);
    - una definizione (dd).
    La definizione, a sua volta, può contenere informazioni strutturate in vario modo: paragrafi, sottoelenchi, dati tabellari, altre liste di definizioni, ecc.
    La struttura di un insieme di news si presta ad essere marcata con il tag dl (definition list) proprio perchè si tratta di un insieme di voci ciascuna delle quali ha un titolo ed un corpo che può contenere diversi tipi di contenuti.
    Alcuni rappresentano le news ricorrendo a tag h1...h6 per il titolo e tag p (o altro per il corpo. Semanticamente non è corretto perchè una struttura del genere non comunica il significato di elenco che un insieme di news (o cose simili) rappresenta. Per le tecnologie assistive (come screen reader o altro) capire che il contenuto che si sta per fruire è un elenco di voci è importante perchè fa comprendere la struttura (ovvero il fatto che non sto leggendo un titolo seguito da un paragrafo ma un elenco di notizie) e chiarisce quanti elementi ha l'elenco.
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  7. #7
    Non sono d'accordo sull'uso delle definition list in questo caso. Una definition list si usa quando hai coppie di "termine/descrizione", cioe' presenti una lista di termini a cui abbinare un'estensiva spiegazione, supponendo che i termini siano (o quantomeno possano essere) ignoti all'utente che ne vuole conoscere il significato.

    Un elenco di news non mi sembra ricadere in questa definizione, il titolo non e' un termine da definire, ma solo il riassunto del contenuto dell'articolo, quindi un'intestazione (con tag h) seguita dal testo il tutto racchiuso un una lista (ordinata o no a seconda dei casi). Gli heading tag sono fatti apposta per questo.

  8. #8
    Originariamente inviato da codencode
    Alcuni rappresentano le news ricorrendo a tag h1...h6 per il titolo e tag p (o altro per il corpo. Semanticamente non è corretto perchè una struttura del genere non comunica il significato di elenco che un insieme di news (o cose simili) rappresenta. Per le tecnologie assistive (come screen reader o altro) capire che il contenuto che si sta per fruire è un elenco di voci è importante perchè fa comprendere la struttura (ovvero il fatto che non sto leggendo un titolo seguito da un paragrafo ma un elenco di notizie) e chiarisce quanti elementi ha l'elenco.
    codice:
    <ul>[*]...[*]...[*]...[*]...[/list]
    e' perfettamente comprensibile da qualsiasi reader, e corretto semanticamente.

  9. #9
    Originariamente inviato da k.b
    codice:
    <ul>[*]...[*]...[*]...[*]...[/list]
    e' perfettamente comprensibile da qualsiasi reader, e corretto semanticamente.
    Mi fai un esempio di elenco di news con la struttura da te indicata?
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  10. #10
    Originariamente inviato da codencode
    Mi fai un esempio di elenco di news con la struttura da te indicata?
    codice:
    <ul>[*]
            <h3>Titolo</h3>
            
    
    
                testo testo testo testo testo testo
                testo testo testo testo testo testo
                testo testo testo testo testo testo
                testo testo testo testo testo testo
            </p>
        [*]
            <h3>Titolo</h3>
            
    
    
                testo testo testo testo testo testo
                testo testo testo testo testo testo
                testo testo testo testo testo testo
                testo testo testo testo testo testo
            </p>
        [/list]
    Il fatto che sia un elenco e' identificato dalla lista non ordinata, e i titoli sono identificati dagli heading tag.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.