HTML 태그 살펴보기 (feat.Semantic)

---

🔔 HTML

1) 시맨틱 마크업 이란?

Semantic은 사전적으로 의미의, 의미론의 뜻을 가지고 있다. 여기에 Markup은 HTML 태그로 문서를 작성하는 것을 말하기 때문에, 시맨틱 마크업이란 의미를 잘 전달 할 수 있는 문서를 말한다.

시맨틱 마크업은 웹 접근성을 향상시켜 정보격차를 해소하는데 도움을 준다.

+ 왜 시맨틱한 마크업을 해야할까?
https://www.youtube.com/watch?v=OM6XIICm_qo&t=332s

2) 웹 에이전트

• 서치 엔진의 데이터 베이스를 구축하기 위해 사용자를 대신하여 정보자원을 수집 / 검색하고 추론하여, 다른 에이전트와 상호 정보 교환 등의 일을 수행하는 지능형 에이전트
• 지능형 에이전트는 시맨틱 웹 기반 응용 서비스의 핵심 요소라 할 수 있다.
• 올바른 앵커 텍스트는 사용자와 검색 엔진이 링크된 페이지를 쉽게 이해하는 데 도움이 된다.

3) Text-level semantics

• <br>, <wbr>

  • <br> : 줄바꿈을 위한 태그

  • <wbr> : 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 내가 지정한 곳에서 줄바꿈이 일어나게 함

    • HTML은 공백을 기준으로 문자인지 단어인지 구분

    • word-brak

    • non-CJK : 공백기준

    • CJK (Chinese, Japanes, Korean) : 음절기준

• <a>

  • html 문법상 sections, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 하는것이 허용

  • <a> 요소안의 자식으로는 <a> 요소나 <button> 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요

    <a href="https://www.naver.com">click</a>
    : 절대경로 / 링크 직접 설정

    <a href="https://www.naver.com" target="_blank">click</a>
    : 절대경로 / 새창으로 열기

    <a href="./index.html">click</a>
    : 상대경로
    <a href="#three">click</a> <!-- 해쉬 링크 -->
    : 내부 이동에 주로 사용 / id만 사용 가능

    <a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
    : 파일 download

    <a href="./hello.hwp" download="a.hwp">hwp download click</a>
    : a라는 이름으로 hwp파일을 download

    <a href="./hello.pdf">pdf click</a>
    : pdf파일 열기

    <a href="./hello.pdf" download="a.pdf">pdf download click</a>
    : a라는 이름으로 pdf파일을 download

    <a href="tel:+82027777777">(02)777-7777</a>
    : 전화 app 연결

    <a href="mailto:hello@gmail.com">hello@gmail.com</a>
    : 메일 app 연결
    
    

• <b>, <strong>

  • <b> : 굵은 글꼴 표현 / 의미 X / 사용 X
  • <strong> : 굵은 글꼴 표현 / 중요도를 더해 강조 / 중첩가능
    
    

• <i>, <em>

  • <i> : 기울임 글꼴 / 주위와 구분해야 하는 부분을 표현 / ex) 등장인물의 생각
  • <em> : 기울임 글꼴 / 강조 (emphasize)
    
    

• <dfn>

  • 현재 문맥에서 정의하고 있는 용어를 나타냄 / 문서에서 최초로 나타났을 때 사용
    
    

• <abbr>

  • 준말, 약자를 나타내고 싶을 때 사용 / abbreviation
    ex) <abbr title="World Wide Web">WWW</abbr>
    
    

• <sup>, <sub>

  • <sup> : 윗첨자
  • <sub> : 아래첨자
    
    

• <span>

  • 의미 X / 줄 바꿈 없이 영역을 묶는 용도
  • <div> 와 마찬가지로 최후 수단 / <div> 는 줄 바꿈 가능
    
    

4) Embedded content

• <img>

  • 이미지 삽입할 때 사용

    <img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구">

  • art

    • 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 이미지 대신 보여줌
    • 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용
    • 브라우저에 이미지에 대한 정보를 전달함으로써 SEO(Search Engine Optimization)에 도움을 주기도 함
      
      

• <picture>

  • source 요소와 img 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소
    
    

• <iframe>

  • 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용
  • width 혹은 height 속성으로 크기를 조절
  • 따로 값을 설정하지 않는다면 height는 150px, width는 300px을 기본값으로 함
    
    

• <audio>

  • 음악 컨텐츠를 재생하기 위한 태그

  <audio src="폴더/파일명" controls autoplay loop ></audio>

  • src : 브라우저에게 오디오 파일의 위치 및 파일명을 알려줌
  • controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러옴
  • autoplay : 로딩이 완료된 파일을 자동으로 재생
  • loop : 음악을 반복합니다.
  • autoplay & mute 같이 있어야 자동재생
  • 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원할 수 있음
    
    

• <video>

  <video src="batman.mp4" controls autoplay loop width="450" height="300"></video>

  • src : 브라우저에게 비디오 파일의 위치 및 파일명을 알려줌
  • controls : 영상 파일을 재생하는데 필요한 컨트롤러를 불러옴
  • autoplay : 로딩이 완료된 파일을 자동으로 재생
  • loop : 영상이 종료되면 다시 반복해서 재생

---

🔔 마무리

• 반드시 코드 한 줄 한 줄에 의도가 명확하게 드러나야 한다
• 필요 없는 마크업이 나오면 안 된다
• <section> 큰 덩어리를 만들 때만 사용하며, 비슷한 형제 요소들과 함께 여러 <section> 으로 나눌 수 있는지 고민하기
• <a> 요소안의 자식으로는 <a> 요소나 <button> 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요
• 폰트는 용량이 크기 때문에 사용시 고민이 필요
• 강조가 되어있다고 해서 무조건 제목은 아니다