A - kotwica (odnośnik)
Polecenie definiuje kotwicę.
(A - anchor)
Atrybuty kotwicy:
- Specyficzne atrybuty
-
- href - odsyłacz do dokumentu (niewymagany)
- media
- określa, dla jakich mediów/urządzeń linkowany dokument jest optymalizowany - rel - określa relację między bieżącym dokumentem a kotwicą opisaną przez href (niewymagany)
- target - określa miejsce otwarcia przywoływanego dokumentu (niewymagany, przestarzały, zaniechany w XHTML 1.1)
- type - określa typ MIME linkowanego dokumentu
- Atrybuty niewspierane w HTML5
- charset - określa kodowanie znaków zasobu docelowego (niewymagany)
- coords - określa współrzędne obszaru w mapie odsyłaczy po stronie klienta (niewymagany); wartości: x,y,z
- name - nazwa etykiety (niewymagany, zaniechany w XHTML 1.1 na rzecz ID)
- rev - określa relację między kotwicą opisaną przez href a bieżącym dokumentem (niewymagany)
- shape - określa kształt obszaru w mapie odsyłaczy po stronie klienta (niewymagany); wartości: default, rect, circle, poly
- Standardowe atrybuty: id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
- Atrybuty zdarzeń: onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Znacznik zamykający: wymagany
Wyświetlanie: liniowe
Może być zawarty wewnątrz innych elementów: abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, object, p, pre, q, rb, rt, samp, small, span, strong, sub, sup, td, th, tt, var
Może zawierać w swoim obrębie inne elementy: abbr, acronym, b, bdo, big, br, button, cite, code, del, dfn, em, i, img, input, ins, kbd, label, map, noscript, object, q, ruby, samp, script, select, small, span, strong, sub, sup, textarea, tt, var
Odnośnik w praktyce
Odwiedzamy portal ABC
a.hej {
text-decoration: none;
position: relative;
color: #3366FF;
}
a.hej:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid #3366FF;
transition: 0.4s;
}
a.hej:hover:after {
width: 100%;
}