HTML tags

dev-april·2023년 6월 25일

html

목록 보기

2/2

HTML tags

Clone-coding을 하다가 새롭게 알게된 HTML 태그들을 정리 해보려고 한다. Clone-coding으로 퍼블리싱만 할 때에는 굳이 가져오지 않아도 되는 태그들도 있다(aria-label, data-label).

aria-label

The aria-label attribute defines a string value that labels an interactive element.

Description

Sometimes the default accessible name of an element is missing, or does not accurately describe its contents, and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example is a button containing an SVG or icon font (which you shouldn't be using) without any text.

In cases where an interactive element has no accessible name, or an accessible name that isn't accurate, and there is no content visible in the DOM that can be referenced via the aria-labelledby attribute, the aria-label attribute can be used to define a string that labels the interactive element on which it is set. This provides the element with its accessible name.

Example

<button aria-label="Close" onclick="myDialog.close()">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="#000" />
  </svg>
</button>

✔ Note: aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations, when there is no appropriate text visible in the DOM that could be referenced as a label

defs

The 'defs' element is used to store graphical objects that will be used at a later time. Objects created inside a 'defs' element are not rendered directly. To display them you have to reference them (with a 'use' element for example).

Graphical objects can be referenced from anywhere, however, defining these objects inside of a 'defs' element promotes understandability of the SVG content and is beneficial to the overall accessibility of the document.

Example

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!-- Some graphical objects to use -->
<defs>
  <circle id="myCircle" cx="0" cy="0" r="5" />

  <linearGradient id="myGradient" gradientTransform="rotate(90)">
    <stop offset="20%" stop-color="gold" />
    <stop offset="90%" stop-color="red" />
  </linearGradient>
</defs>

<!-- using my graphical objects -->
<use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>

g

The 'g' SVG element is a container used to group other SVG elements.

Transformations applied to the 'g' element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the 'use' element.

Example

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Using g to inherit presentation attributes -->
  <g fill="white" stroke="green" stroke-width="5">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>

use

The element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the use element is, much like cloned template elements.

Example

The following example shows how to use the use element to draw a circle with a different fill and stroke color. In the last circle, stroke="red" will be ignored because stroke was already set on myCircle.

  <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>