href 속성을 사용하여 다른 페이지나 같은 페이지의 위치와 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.

속성

href 는 꼭 http일 필요는 없고 브라우저가 지원하는 모든 스킴을 사용할 수 있다. 예) tel: , mailto:

referrerpolicy URL을 가져올 때 사용할 리퍼러. 쿠키 referer말하는건가?

onClick

click 이벤트처리기를 등록해서 가짜 버튼을 만다는 방식을 남용하는 경우가 있다. 그리고 href 를 # 이나 javascript:void(0) 으로 지정해 페이지 새로고침을 막는 경우가 있다. → 난데 .. ?

이런것들은 예측하지 못한 동작을 유발한다. button 태그를 사용하고 하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해라

접근성

접근성 강한 링크 텍스트

<p>
	저희 제품을 더 알아보시려면 <a href="products">여기</a>를 클릭하세요.
</p>

접근성 약한 링크 텍스트

링크가 상품들을 나타내는 것이므로 태그안에 상품 키워드가 들어가는게 좋다.

<p>
	저희 <a href="products">제품을 더 알아보세요.</a>
</p>

area

이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있다. map 요소 안에서만 사용가능

개꿀…?

article

문서, 페이지, 애플리케이션, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.

예)게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.

음 …. 내 이해로는 걍 한 페이지 내에 독립적으로 있을 수 있는 것 네이버페이지에서의 날씨 정보? 음 .. 아티클만으로 하나의 페이지? 를 이룰 수 있는 것 header, footer등 있는거임

aside

문서의 주요 내용과 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스로 표현한다.

흐으으응ㅁ … 예를들면 컴퓨터에 관한것을 아티클로 설명하고 있는데… 그 안에 aside로 맥북 설명 나온다던가 그런건가?

코드 예 코드보면 이해감 ㅇㅇㅇㅇㅇㅇ

<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

b

사용하지마 하지마 하지마 아무 의미 없어 !!!! 사용할바에 [<strong>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/strong) 요소는 중요한 글을, [<em>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/em) 요소는 약간의 강조가 필요한 글을, [<mark>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/mark) 요소는 관련성이 있는 글을 나타내는 걸 사용해라

body

HTML 문서의 내용을 나타낸다. 한 문서에 하나의 body만 존재

button

클릭 가능한 버튼이다. 버튼 기능이 필요한 곳엔 어디든 배치 가능

아이콘 버튼일 경우 접근성 고려하여 버튼 태그 안에 버튼의 설명을 넣어준다. 설명 숨기려면 css숨기셈

caption

표의 설명 또는 제목을 나타낸다. 테이블 컬럼 제목 음 …. 테이블 제목도 되나?

colgroup, col

colgroup - 표의 열을 묶는 역할을 함.

col - 표의 열을 나타내며 열에 속하는 칸의 공통 의미? 속성을 부여할 때 사용

div

그냥 아무것도 아닌 박스태그 ‘순수’ 컨테이너이다. 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽게해주거나 문서의 특정 구역이 다른 언어임을 표시(lang)하는 용도로 사용하면 됨

다른 article, nav 등 적절하지 않을 때 사용

section

HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아니다.

아 article vs section 그럼 … 적합한 의미를 갖는 요소가 없는 상황에서 독립적이지 않을때 div, 독릭접일때 section?

사용 예

• 각각의 <section>을 식별할 수단이 필요합니다. 주로 제목([<h1>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements)``[<h6>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements)) 요소를 <section>의 자식으로 포함하는 방법을 사용합니다.
• 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 [<article>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/article) 요소를 고려하세요.
• <section> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 [<div>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/div) 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택입니다.

아 ,, 스타일링 안하고 문소 요약 + 독립적이면서 뭔가 나타내면 article 하면 되는거 아님?

span

그냥 p태그안에서 스타일링 하거나 서로 공유하는 어떤 특성의 값 때문에 묶을 때 사용한다. 적절한 요소 없을 때사용 div랑 비슷하지만 다른점은 div는 블록 레벨 요소 span은 인라인 요소

p

<p> 요소는 하나의 문단을 나타낸다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다.

문단은 블록 레벨 요소이며, 자신의 닫는 태그(</p>) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힘.

접근성

콘텐츠를 문단으로 나누면 페이지의 접근성을 높여준다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있다.

빈 <p> 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있다. 그러니까 여백이 필요하면 css margin속성 이용해서 문단 여백 늘리자

article vs section

경계선이 명확하진 않지만 주제가 있고 해당 주제에 연관성이 없다면 section 쓰고 … 연관성이 있다면 article?… 쓰면 되는 것 같다 …