Język HTML zawiera szereg elementów. Należą do nich powszechnie używane komponenty strony internetowej jak akapity, nagłówki, linki i obrazy. Istnieje również wiele nowszych elementów, które zostały wprowadzone w HTML5, w tym nagłówek, nav, stopka i inne. Wszystkie te elementy HTML są używane do tworzenia struktury dokumentu i nadawania mu znaczenia. Aby nadać elementom jeszcze więcej znaczenia, możesz nadać im atrybuty.
Podstawowy znacznik otwierający HTML zaczyna się od znaku <. po nim nast nazwa znacznika a na ko uzupe znacznik znakiem>. Na przykład otwierający znacznik akapitu będzie napisany w ten sposób:
Aby dodać atrybut do swojego Znacznik HTML, najpierw wstawiasz spację po nazwie znacznika (w tym przypadku jest to „p”). Następnie możesz dodać nazwę atrybutu, którego chcesz użyć, a następnie znak równości. Na koniec wartość atrybutu zostanie umieszczona w cudzysłowie. Na przykład:
Tagi mogą mieć wiele atrybutów. Oddzielisz każdy atrybut od pozostałych spacją.
Elementy z wymaganymi atrybutami
Niektóre elementy HTML faktycznie wymagają atrybutów, jeśli chcesz, aby działały zgodnie z przeznaczeniem. Element obrazu i element link to dwa przykłady tego.
element obrazu wymaga atrybutu „src”. Atrybut ten informuje przeglądarkę, którego obrazu chcesz użyć w tej lokalizacji. Wartość atrybutu byłaby ścieżką do pliku obrazu. Na przykład:
Zauważysz, że dodaliśmy kolejny atrybut do tego elementu, „alt” lub atrybut tekstu alternatywnego. Nie jest to technicznie wymagany atrybut w przypadku obrazów, ale najlepiej jest zawsze uwzględniać tę treść w celu ułatwienia dostępu. Tekst wymieniony w wartości atrybutu alt jest tym, co zostanie wyświetlone, jeśli an obraz się nie ładuje z jakiegoś powodu.
Kolejnym elementem wymagającym określonych atrybutów jest znacznik kotwicy lub linku. Ten element musi zawierać atrybut „href”, który oznacza „odwołanie hipertekstowe”. Jest to wymyślny sposób na powiedzenie „gdzie ten link powinien przejść”. Podobnie jak element obrazu musi wiedzieć, który obraz ma zostać załadowany, tag linku musi wiedzieć, gdzie powinien się podobać do. Oto jak może wyglądać tag linku:
Ten link przeniesie teraz osobę do witryny określonej w wartości atrybutu. W tym przypadku jest to strona główna Dotdash.
Atrybuty jako hooki CSS
Innym zastosowaniem atrybutów jest użycie ich jako „haczyków” dla Style CSS. Ponieważ standardy internetowe nakazują, aby struktura strony (HTML) była oddzielona od jej stylów (CSS), używasz tych zaczepów atrybutów w CSS, aby dyktować, jak ustrukturyzowana strona będzie wyświetlana w sieci przeglądarka. Na przykład możesz mieć ten fragment znacznika w swoim dokumencie HTML.
Jeśli chciałbyś, aby ten podział miał kolor tła czarny (#000) i rozmiar czcionki 1,5 em, dodałbyś to do swojego CSS:
.featured { kolor tła: #000; rozmiar czcionki: 1.5em;}
Atrybut klasy „featured” działa jak haczyk, którego używamy w CSS, aby zastosować style do tego obszaru. Moglibyśmy również użyć tutaj atrybutu ID, jeśli chcielibyśmy. Zarówno klasy, jak i identyfikatory są atrybutami uniwersalnymi, co oznacza, że można je dodać do dowolnego elementu. Oba mogą być również kierowane za pomocą określonych stylów CSS, aby określić wizualny wygląd tego elementu.
Odnośnie JavaScript
Wreszcie, używanie atrybutów w niektórych elementach HTML jest również czymś, czego możesz użyć w JavaScript. Jeśli masz skrypt, który szuka elementu z określonym atrybutem ID, jest to kolejne zastosowanie tego wspólnego elementu języka HTML.