[WEB] Basic HTML | Tags, Semantic Tags

Tay (Taewan) Ham·2024년 5월 22일

SeSAC front end web

Web

목록 보기

2/6

Intro

본격적으로 웹 개발을 배우기 시작했고 그 시작은 HTML이다. 리더님께서 요즘은 html을 하드코딩 하지는 않는다고 하셨지만, 그럴수록 기초를 아는 것이 중요한 것 같다!

HTML

HTML이란?

HTML은 HyperText Markup Language이다. 이 단어에서 유추할 수 있는 것은 HTML은 서로 다른 text를 연결해주고 (HyperText) 프로그래밍 언어가 아니라는 것(Markup Language)이다.

HTML은 웹사이트의 구조와 내용을 담고 있다. 즉, 웹사이트의 뼈대를 만드는 것이다. HTML의 기본적인 구조는 아래와 같다. closing tag가 필요한 element의 경우 이를 빼먹지 않도록 조심해야 한다! 모든 html element가 content가 필요한 것은 아니다. content가 없는 element의 경우는 void element라고 한다.

source: Mozilla Developer Network

source: Mozilla Developer Network

class가 attribute name이고 editor-note가 attribute value가 된다.

HTML에서 중요한 지점들

HTML에는 수많은 tag들이 있다. 이 모든 tag들을 하나하나 외우는 것은 그다지 현명한 전략은 아니다. 모르는 tag를 검색하거나 tag의 attribute를 찾고 싶을때는 Mozilla Developer Network (MDN)에서 검색하면 된다. 혹은, 구글에 "tag mdn"이라고 검색하면 된다.

inline / block

모든 html element에는 기본적으로 설정되어 있는 display value가 있다. 많은 display value들이 있는데, 가장 대표적인 것이 inline과 block이다.

Inline
source:w3schools.com

Block
source:w3schools.com

사진에서 볼 수 있듯이, inline과 block의 차이는 명확하다. block의 경우 줄바꿈을 하는 것을 볼 수 있다. inline의 경우 줄바꿈을 하지 않는다. 그렇기 때문에, inline에 width와 height를 주는 것은 의미가 없다. block은 화면 전체를 width로 갖지만 height를 줄 수 있다.

대표적으로, inline에는 <span>이 있고 block에는 <p>가 있다. 하지만 모든 tag에 대해서 inline/block을 외우는 것은 비효율적이다. 많이 접하면서 자연스럽게 익히는 것이 더 효율적이다.

form tag / input tag

form element의 경우, user로부터 데이터를 받는 element를 감싸는 element이다. form tag의 경우 화면에 드러나지 않는 추상적인 tag이다. form tag에는 input, textarea, select 등이 들어간다.

input의 type attribute에는 다양한 value가 가능하다. 너무나 많기에 자세한 종류는 MDN: input element에서 확인하면 된다. 하나만 짚고 넘어가자면, user로부터 항목을 입력 받을 때, checkbox와 radio를 사용할 수 있다. checkbox는 중복입력이 가능하고 radio는 하나만 입력할 수 있다.

<h5>Your Hobbies</h5>
        <input type="checkbox" name="interest" id="" value="book">Book
        <input type="checkbox" name="interest" id="" value="cinema" checked>Cinema
        <input type="checkbox" name="interest" id="" value="sleep">Sleep

        <h5>Your Gender</h5>
        <input type="radio" name="gender" value="female" id="female"><label for="female">Female</label>
        <input type="radio" name="gender" valeu="Male" id="male"><label for="male">Male</label>

위의 코드처럼, 같은 입력항목들끼리는 같은 name으로 카테고리화 해줘야 한다. 또한, value 값을 쓰는 것도 잊지 말아야 한다.

웹 접근성 (Web Accessibility)

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee

기술 문명의 혜택을 인류 보편에게 확대하는 것이 공학의 주요 목표임을 상기해보자면, 인종-장애-나이 등에 상관없이 모든 사람이 웹에 접근할 수 있도록 하는 것은 매우 중요하다고 할 수 있다.

웹 접근성을 향상시킬 수 있는 방법은 많다. 지금까지 배운 html 레벨에서도 웹 접근성을 높일 수도 있다.

<img> tag에서 alt attribute value 입력하기
* 시각장애인이 이미지를 인식하는 데 도움을 준다.
<label> tag 사용하기
- <label>의 for의 attribute value와 <input>의 id의 attribute value 일치시키기

Semantic Tags

Semantic tags를 사용하여 웹 접근성을 높일 수도 있다.

Semantics Tags란?

아무런 의미를 지니지 않는 <div>나 <span>과는 달리, semantic tags는 해당 내용의 의미를 담고 있다. 대표적으로, <header>, <article>, <footer> 등이 있다.

웹 페이지를 <div> 범벅으로 만드는 것보다 semantic tag를 활용하여 작성하는 것이 바람직하다.

source: CodingOn

왜 사용해야 하는가?

SEO (Search Engine Optimization)
- 크롤러가 웹 페이지의 키워드들을 쉽게 인식할 수 있어 검색 노출을 높일 수 있다.
웹 접근성 향상
- 시각장애인들이 스크린리더를 활용하여 쉽게 웹사이트 내의 내용들을 탐색할 수 있다.
유지보수
- <div>만으로 html을 작성한다면 가독성이 매우 떨어지기 때문에 유지보수에 불리하다.

Troubleshooting

이번 강의에서는 별다른 Troubleshooting이 없었다. 하지만 HTML을 작성할 때 조심한 점은, 브라우저는 html을 그대로 해석하기만 한다는 것이다. 즉, 개발자가 오타를 내도 브라우저는 별다른 오류메세지를 출력하지 않고 받은대로 그린다. 이를 최소화하기 위해서는 emmet 등을 이용하는 것도 하나의 해결방법인 것 같다.