title

<태그 title="설명"></태그>

• 요소의 정보나 설명을 지정

<a href="http://naver.com" target="_blank" title="네이버로 이동">NAVER</a>

---

style

<태그 style="스타일"></태그>

• 요소에 적용할 스타일(CSS)을 지정

---

class

<태그 class="이름"></태그>

• 요소를 지칭하는 중복가능한 이름

---

id

<태그 id="이름"></태그>

• 요소를 지칭하는 고유한 이름

---

data-이름

<태그 data-이름="데이터"></태그>

• 요소에 데이터를 지정

HTML

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

JS

const els = document.querySelectorAll("div")
els.forEach(el => {
	console.log(el.dataset.fruitName)
})

참고로 script태그에 defer속성을 추가하면 head태그 안의 script태그도 정상적으로 작동한다.

<script defer src="js/main.js"></script>