10 HTML erori pe care nu trebuie sa le comitem

Acest articol este dedicat erorilor HTML pe care deseori incepatorii le admit la crearea template-uri HTML. Recunosc si eu deseori am admis asemenea erori care nu sunt binevenite pentru semancitatea si validitatea codului HTML.
1. HTML eroare. Plasarea Block Elements in cadrul Inline Elements


HTML elementele pot fi vizualizate in doua moduri: block sau inline. Fiecare tag implicit este de natura: block sau inline. Block elements includ in ele div sau paragraf, cu ajutorul lor putem face structura template-ului. Inline elements, pe de alta parte, trebuie sa fie pozitionate in interiorul elementelor bloc si sa urmeze amplasarea acestora in HTML document. Inline elementele trebuie tot timpul sa fie amplasate in blocuri, si niciodata invers!
2. HTML eroare. Nu includem atributul ALT pentru imagini
Atributul ALT este necesar pentru toate imaginile vizualizate in HTML template. El ajuta utilizatorul sa inteleaga ce imagine este atunci cind conexiunea este lenta sau imagine nu s-a incarcat in pagina din anumite cauze. Atributul ALT trebuie sa descrie cit mai bine imaginea, iar descrierile de tipul ...alt="imagine" nu este binevenita, daca imagine este folosita in pagina HTML, doar pentru scopuri pur decorative atunci putem sa includem atributul alt fara nici o informatie: alt="".
3. HTML eroare. Nu folosim listele UL si OL atunci cind e necesar.
Tagul UL (si OL) are un set de intrebuintari destul de larg si este extrem de versatil pentru afisarea tuturor tipurilor  de componente ale paginii. Deci, daca cu ajutorul tagului pentru liste neordonate UL putem afisa foarte usor o lista de informatie in documentul HTML, atunci de ce sa nu il folosim? :)
4. HTML eroare. Folosirea <b> si <i> pentru a sublinia importanta unui cuvint in HTML template

Tag-urile <b> si <i> fac ca textul din document sa apara bold si respectiv italic, dar din punct de vedere semantic ele sunt clasate ca tag-uri de prezentare. Prin urmare aceste efect se poate usor de facut cu ajutorul CSS proprietatilor font-weight si font-style. Daca fragmentul de text dorim sa-l sugeram ca important atunci cel mai bine e sa folosim tag-urile <strong> si <em> care indeplinesc acelasi lucru in plus ofera importanta nu doar vizual dar si la nivel de cod HTML.
5. HTML eroare. Utilizarea excesiva de <br/>
Tagul <br/> se foloseste pentru a intrerupe un fragment de text pentru un rind mai jos intr-un paragraf, nu trebuie de folosit pentru a crea un spatiu mai mare intre rinduri, pentru asta se poate de taiat fragmentul de text in mai multe paragrafe., sau sa ajustam spatiile dintre rinduri prin intermediul CSS.
6. HTML eroare. Uilizarea tagurilor gresite de taiere a cuvintului
Cindva, demult <s> si <strike> erau folosite pentru a reda vizual un text taiat, acuma aceste doua taguri se considera invechite, inca lucreaza destul de bine (pentru regimul Transitional), dar la moment sunt alte HTML tag-uri pentru acest lucru, si anume: <del> si <ins>. Ele se folosesc impreuna pentru a reda un text taiat si ulterior introdus in HTML template.
7. HTML eroare. Folosirea stilurilor in HTML taguri
Cred ca ati auzit asta de mii de ori :) Nu bagati stiluri in tag, sau Do not use inline styling. cel mai important lucru pentru un HTML semantic si CSS este de a separa structura documentului de stiluri, deci nu are sens sa punem stiluril direct in HTML elemente. Tine-ti mereu structura template-ului despartita de stiluri.
8. HTML eroare. Adaugarea sau stergerea border-elor in HTML
Atributul border este si el prezentational si deci e posibil de adaugat in CSS, chiar daca are o valoare implicita, e posibil cu ajutorul stilurilor sa-l stergem.



9. HTML eroare. Neutilizarea tag-ului <h> header
Tag-urile heading sunt de la <h1> la <h6> pentru a reprezenta titlurile dintr-un document HTML. Daca doriti sa afisati o propozitie sau un fragment de text ca pe un titlu nu ezitati sa folositi aceste tag-uri.

10. HTML eroare. Utilizare celor mai "urite" tag-uri <blink> si <marquee>
In afara de lucrul ceia ca nu sunt tag-uri oficiale aprobate de W3C mai au o trasatura, sunt cele mai urite tag-uri HTML, sunt sigur ca puteti sa atrageti mai bineatentia unui utilizator cu o functie JavaScript sau un Flash, decit folosind aceste doua tag-uri.
Articolul original

30 CSS Selectors pentru o viata mai usoara. Partea II

16. CSS Selector [foo~="bar"]
a[data-info~="external"] { 
    color: red; 

  
a[data-info~="image"] { 
    border: 1px solid black; 
}

Acest selector este unul mai special, care cu siguranta o sa va impresioneze prietenii :). Nu prea multi web developeri stiu de acest truc. Tilda (~) ne permite sa vizam un atribut care are o lista de valori separata prin spatiu. Daca ne vom conduce dupa selectorul 15 descris in articolul precedent., putem crea un atribut personal, data-info de exemplu, care ne poate avea valori separate prin spatiu. In acest caz vom face un set de link-uri externe catre imagini, doar pentru exemplu.
<a href="path/to/image.jpg" data-info="external image"> Click Me, Imagine </a>
Avind acest cod HTML, putem sa vizam orice tag care are oricare dintre aceste valori, utilizind (~).
a[data-info~="external"] { 
    color: red; 

  
a[data-info~="image"] { 
    border: 1px solid black; 
}

Browser Compatibility

  • IE 9+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
17. CSS Selector checked
input[type=radio]:checked { 
    border: 1px solid black; 

Aceasta pseudo-clasa va formata un element din interfata utilizatorului care a fost checked (activat), cum ar fi un HTML radio button sau HTML checkbox. Destul de simplu.

Browser Compatibility

  • IE 9+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
18. CSS Selector after
Pseudo elementele before si after sunt destul de stranii. In fiecare zi, web developerii gasesc noi modalitati de intrebuintare efectiva a acestor selectore. Ele simplu genereaza content in jurul elementului selectat. Multe au fost introduse spre aceste clase cind au intilnit clear-fix hack.
.clearfix:after { 
     content: ""; 
     display: block; 
     clear: both; 
     visibility: hidden; 
     font-size: 0; 
     height: 0; 

  
.clearfix { 
    *display: inline-block; 
    _height: 1%; 

Acest hack foloseste :after pentru a aduaga un spatiu dupa element, iar apoi pentru al sterge. Este un truc bun in cazul cind metoda overflow:hidden nu este posibil de aplicat.

Browser Compatibility

  • IE 8+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
19. CSS Selector hover
div:hover { 
   background: #e3e3e3; 
}

Cu siguranta stiati de el. Termenul oficial este: user action pseudo class. Suna cam confuz, dar in realitate este destul de simplu. Daca doriti sa aplicati un stil CSS atunci cind utilizatorul duce mouse pe un HTML element, cu hover puteti sa faceti acest lucru. De exemplu pentru a aplica un un border-bottom unei HTML ancore atunci cind userul duce mouse deasupra, e suficient de a scrie urmatorul cod:
a:hover { 
  border-bottom: 1px solid black; 
}

Browser Compatibility

  • IE 6+(in IE6 :hover trebuie sa fie folosit doar pentru HTML ancore!)
  • Firefox
  • Google Chrome
  • Safari
  • Opera
20. CSS Selector not (negatie) 
div:not(#container) { 
   color: blue; 
Pseudo clasa negatie este foarte ajutatoare in cazuri particulare. Sa spunem ca e nevoie de a selecta toate div-urile dintr-un HTML template in afara de div-ul care are ID="container". Fragmentul de cod de mai sus ne ajuta sa facem acest lucru.

Sau, dorim sa selectionam toate elementele unice din HTML template, in afara de tag-urile <p>:
*:not(p) { 
   color: green; 
}


Browser Compatibility

  • IE 9+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
21. CSS Selector ::pseudoElement
p::first-line { 
    font-weight: bold; 
    font-size: 1.2em; 
}

Putem utiliza pseudo elemente (::) pentru a stiliza fragmente a unui element din pagina, cum ar fi prima linie dintr-un paragraf.
Browser Compatibility

  • IE 6+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
22. CSS Selector nth-child(n)
li:nth-child(3) { 
   color: red; 
}

Va mai aduceti aminte zilele cind ne intrebam cum de selectat un element intr-o lista? Ei bine, selectorul nth-child rezolva aceasta problema. De notat ca nth-child accepta ca parametru un numar de tip integer. Pentru a selecta al doilea element din lista folosim li:nth-child(2).
Se poate de utilizat in modul in care sa selectam un numar variabil de elemente dintr-o lista :). Pentru a alege fiecare al 4-lea element e nevoie de scris li:nth-child(4n).
Browser Compatibility

  • IE 9+
  • Firefox 3.5+
  • Google Chrome
  • Safari
  • Opera
23. CSS Selector nth-last-child(n)
li:nth-last-child(3) {
    color: olive;
}
Pentru cazurile cind avem o lista enorma de elemente intr-un ul iar noi avem nevoie sa alegem al treilea element de la urma ne vine in ajutor nth-last-child. In loc sa scriem li:nth-child(397), putem sa scrim li:nth-last-child(3) (lista noastra are 400 elemente).
Browser Compatibility

  • IE 9+
  • Firefox 3.5+
  • Google Chrome
  • Safari
  • Opera
24. CSS Selector nth-of-type(n)
ul:nth-of-type(3) { 
    border: 1px solid black; 
}

Sunt momente cind selectorii de mai sus nu putem sa-i folosim. De exemplu avem un template HTML in care se contin 5 liste neordonate ul iar noi dorim sa formatam al 3-lea ul.In CSS exemplul de mai sus e demonstrat cum de adaugat CSS border pentru al treilea HTML ul din template.

Browser Compatibility

  • IE 9+
  • Firefox 3.5+
  • Google Chrome
  • Safari
  • Opera
25. CSS Selector nth-last-of-type(n)
ul:nth-last-of-type(3) { 
    border: 1px solid black; 
}

Si pentru a adauga un selector care functioneaza invers celui precedent, avem nth-last-of-type.

Browser Compatibility

  • IE 9+
  • Firefox 3.5+
  • Google Chrome
  • Safari
  • Opera
26. CSS Selector first-child
ul li:first-child { 
    border-top: none; 
}

Aceasta pseudo clasa structurala ne permite sa vizam numai primul copil al elementului dorit. In CSS exemplul scris in antet, am aratat cum de sters border-top pentru primul item din lista.
Browser Compatibility

  • IE 9+
  • Firefox 3.5+
  • Google Chrome
  • Safari
  • Opera
27. CSS Selector last-child
ul > li:last-child { 
    color: green; 
}

Spre deosebire de first-child, last-child va viza doar ultimul element al elementului parinte.

Browser Compatibility

  • IE 9+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
28. CSS Selector only-child
div p:only-child { 
    color: red; 
}

Sincer, nu cred ca prea multi dintre noi o sa gaseasca intrebuintare acestei pseudo clase. Cu toate acestea o descriu, poate cuiva o sa ii fie de ajutor.
Deci, only-child, permite sa selectam elementele care sunt UNICUL copil al printelui sau. In cazul nostru, va stiliza doar paragrafele p, care sunt unicii copii ai elementului div din HTML template.
Browser Compatibility

  • IE 9+
  • Firefox
  • Google Chrome
  • Safari
  • Opera
 29. CSS Selector only-of-type
li:only-of-type { 
    font-weight: bold; 
}
Aceasta pseudo clasa CSS poate fi folosita in citeva moduri. Va viza elementele care nu au "frati" in containerul parinte. Spre exemplu, sa selectam toate listele ul care au doar un singur item.
Mai intii trebuie sa ne intrebam, cum se poate de realizat acest task. Se poate de folosit ul li dar atunci se vor selecta toate elementele. Unica iesire din situatie este only-of-type
ul > li:only-of-type { 
    font-weight: bold; 
}

Browser Compatibility

  • IE 9+
  • Firefox 3.5+
  • Google Chrome
  • Safari
  • Opera 
Articol preluat si tradus de aici

    30 CSS Selectors pentru o viata mai usoara. Partea I

    La fel ca si majoritatea incepatorilor in domeniul crearii CSS layouturilor, la inceput stiam de class, id si descendants selectors pe care ii foloseam toata ziua :)
    Dar cu timpul am inteles ca sunt o sumedenie de selectori CSS pentru a face viata mai usoara creatorilor de layouturi, si markup-uri. Acesti selectori ofera un grad inalt de flxeibilitate si sunt suportate de majoritate browserelor moderne.
    Mai jos o sa descriu 30 din acesti selectori, sper cuiva sa fei de ajutor, eu personal ii folosesc la putere maximala.

    1. Selectorul * 
    * { 
      margin: 0; 
      padding: 0; 
    }  
     
    Sa incepem cu un selector mai simplu, pentru inceput. Simbolul * se foloseste pentru a viza orice element unic din pagina. Multi web developeri folosesc acest selector pentru a face nule toate margin si padding care au valori implicite ce difera de la browser la browser. Cu toate ca acest lucru este cu siguranta bun pentru a face careva teste rapide, totusi nu este de dorit de a folosi acest truc in productie, deoarece incarca mult browserul. Se mai poate de utilizat si impreuna cu child selectors:
    #container * { 
          border: 1px solid black; 
    }

    In exemplul de mai sus, se va viza toti copiii HTML elementului cu ID-ul "container".
    Browser Compatibility
    • IE 6+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    2.  Selectorul #(ID)
    #container {
    width: 960px;
    margin: auto;
    }

    Simbolul # in CSS ne permite de accesa un element HTML dupa ID. Este foarte folosit pentru crearea layouturilor, dar, ID selectors sunt destul de rigide si nu permit reutilizarea pentru alt element, deoarece ID-ul intr-un HTML document trebuie sa fie unic. Folositi pe cit posibil un tag, sau unul dintre elementele HTML5, sau o pseudo clasa CSS, pentru a evita selectorul ID.

    Browser Compatibility
    • IE 6+
    • Firefox
    • Google Chrome
    • Safari
    • Opera

    3. Selectorul .(CLASS)

    .eroare { 
       color: red; 
    }
    Acest este selectorul class. Diferenta dintre id si class este: cu class putem viza mai multe elemente intro pagina HTML. Folositi class atunci cind aveti de stilizaat in acelasi mod un grup de elemente HTML.
    Browser Compatibility
    • IE 6+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    4. Selectorul (descendants)
    li a { 
       text-decoration: none; 
    }

    Selectorul descendants se foloseste atunci cind dorim sa specificam mai precis ce element dorim sa stilizam. De exemplul, fie ca e nevoie sa stilizam doar ancorele dintr-o lista neordonata, atunci folosim descendants, la fel ca in exemplul de mai sus.
    Browser Compatibility
    • IE 6+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    5. Selectorul  (type)
    a { color: red; }
    ul { margin-left: 0; }
    Atunci cind avem de stilizat toate elementele de un anumit tip intr-o pagina, folosim selectorul de tip. Daca dorim ca toate elementele din pagina de tip <a> sa aiba textul de culoare rosie, atunci folosim selectorul type.

    Browser Compatibility
    • IE 6+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
     6. Selectorul X:visited si X:link
    a:link { color: red; } 
    a:visted { color: purple; }
     
    Utilizam pseuodo-class :link atunci cind vrem sa decoram ancorele care trebuie sa fie apasate.
    Alternativ, mai avem si pseudo-clasa :visited pentru a stiliza ancorele sau linkurile care au fost apasate, vizitate.
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    7. Selectorul (+)
    ul + p { 
        color: red; 

    Se refera la slesctorul de adiacenta. Cu ajutorul sau se selecteaza DOAR primul element vecin de elementul de referinta. In cazul nostru numai primul paragraf <p>dupa fiece <ul> va avea culoare rosie.

    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    8. CSS Selectorul (>)
    div#container > ul { 
       border: 1px solid red; 
    }

    Diferenta dintre > si descendants este: cu ajutorul ">" se pot selecta doar copii directi. de exemplu avem urmatorul fragment de markup:
    <div id="container"> 
        <ul> 
           <li> Item 
             <ul> 
                <li> Child </li> 
             </ul> 
           </li> 
           <li> Item </li> 
           <li> Item </li> 
           <li> Item </li> 
        </ul> 
    </div>

    Selectorul #container > ul va viza doar ulurile care sunt copii directi ai divului cu idul "container".
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    9. CSS Selecotorul ~
    l ~ p { 
        color: red; 
    }

    Acest sibling selector este similar selectorului + dar mai putin strict. In timp ce cu + se poate de selectat doar elementul imediat dupa itemul de baza, acesta din urma este unul mult mai general. Cu ajutorul sau se selecteaza toate elementele ce urmeaza dupa elementul de baza in toata pagina HTML.
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    10. CSS Selector [title]
    a[title] { 
        color: green; 
    }

    Face referinta la un attribute selector, adica, vor fi selectate toate elementele care au un anumit atribut, in cazul nostru atribut title.
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    11. CSS Selector [href="foo"]
    a[href="http://google.com"] { 
      color: olive;
    }

    In fragmentul descris de mai sus e demonstrat cum de stilizat o ancora care face referinta spre un anumit site.
    Acest tip de selectare este destul de rigida, dar uneori se poate de folosit.
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    12. CSS Selector [href*="foo"]
    a[href*="google"] { 
      color: olive;
    }

    Este asemanator cu selectorul precedent, doar ca, va formata toate elementele pentru care exista in atribut numele descris. In exemplul nostru, va formata toate ancorele in care va gasi pentru atributul href numele "google". De notat ca este o astfel de selectare trebuie folosita cu atentie, deoarece se poate intimpla ca un link de exemplu, sa nu fie: mySubdomain.google.com ci de tipul http://mysite.com/google-page/ si in asa caz el la fel va fi stilizat, deoarece selectorul nostru este general si lui nui pasa unde gaseste cuvintul cheie in link.
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    13. CSS Selector [href^="http"]
    a[href^="http"] { 
       background: url(path/to/external/icon.png) no-repeat; 
       padding-left: 15px; 
    }

    V-ati intrebat vreodata cum unele site-uri sunt capabile sa afiseze o pictograma mica de linga link-urile externe? Sunt sigur ca ati vazut, aceste pictograme sunt un indiciu excelent ca link-ul dat ne va directiona spre un alt site. Cu ajutorul slectorului [href^="http"] acest lucru este o floare la ureche :). Este cel mai frecvent utilizat pentru a desemna inceputul unui sir. Daca dorim sa vizam toate ancorele HTML care au un atribut href, al carui valoare se incepe cu http, atunci e posibil de realizat in exemplul de mai sus.

    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    14. CSS Selector [href$=".jpg"] 
    a[href$=".jpg"] { 
        color: red; 
    }

    Acum, si daca dorim sa selectam sfirsitul unui sir(lucru foarte util atunci cind dorim sa stilizam imaginile de pe o pagina)? Ei bine pentru acest caz avem la dispozitie selectorul $ care ne face referinta la sfirsitul sirului dintr-un atribut. In exemplu se vor formata toate ancorele care sunt legate la o imagine .jpg.
    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera
    15. CSS Selectors [data-*="foo"]
    a[data-filetype="image"] { 
        color: red; 
    }
    Dar daca dorim sa selectam toate tipurile de imagini? Am putea sa folosim selctorul din punctul 14:
    a[href$=".jpg"], 
    a[href$=".jpeg"], 
    a[href$=".png"], 
    a[href$=".gif"] { 
            color: red; 
    }
     
    Insa nu este foarte comod acest tip de selectare, si ne complica destul de mult codul CSS. O solutie mai convenabila ar fi sa folosim atribute personalizate, cum ar fi sa adaugam atributul nostru data-filetype pentru fiecare ancora care ne indica un link catre o imagine
    <a href="path/to/myImage.jpg" data-filetype="image"> Image Link </a> 
    Apoi, avind acest atribut, putem sa folosim o regula care sa vizeze doar acele ancore
    a[data-filetype="image"] { 
        color: red; 
    }

    Browser Compatibility
    • IE 7+
    • Firefox
    • Google Chrome
    • Safari
    • Opera