구인공고 볼때나 다른 퍼블리셔나 개발자들 이력서 볼때 많이 봤던 시멘틱 구조.
그래도 처음 html을 배울때 강사쌤이 잘 가르쳐줘서 스스로 나름 잘 하고 있다고 생각했는데(최소 div의 향연은 아니라ㅋㅋㅋ) 이번 영상을 보고 구조 짤때 좀 더 신경써야겠다는 생각이 들었다.
HTML 시멘틱 태그가 중요한 이유!?
· SEO 검색엔진 최적화 (Search-Engine Optimization)
검색엔진으로부터 어떤 웹사이트에 도달하는 트래픽의 양과 질을 개선하는 작업
처음 html을 가르쳐주셨던 강사님이 본문에 제목 태그를 쓸때면 항상 <h2>부터 쓰라고 하셨는데 그 이유는 <h1>은 그 웹사이트의 로고 담당(!?)이기 때문이었다. 나의 기억의 오류가 아니라면... 검색엔진에 쳤을때 가장 먼저 찾는게 <h1>이라고 하셨던 것 같다.
· Accessibility 접근성
이건 <img>태그를 쓸때 항상 들었던 말이다.
img태그의 alt속성은 없어도 화면에는 큰 영향이 없지만 접근성을 위해 웬만하면 꼭 써주라고 하셨었다. 특히 화면을 볼 수 없는 시각장애인의 경우 화면리더기가 읽어주는대로 받아들이게 되는데 화면리더기가 이 alt속성을 읽어주는 것이다. 또 사진 엑박뜰때도 alt가 뜨니 반드시 써주는 걸로!
· 유지 관리를 위해! Maintainability
말해 뭐해!
<article> vs <section>
<article>태그의 경우 한 페이지에서 다른 요소들과의 관계없이 독립적으로 다른페이지에 보여줬을때도 전혀 문제가 되지 않을때 사용한다. 예를들면 신문기사의 기사 한편, 한꼭지라고 보면 될 것 같다.
<section>의 경우 연관있는 내용들을 하나로 묶어줄때 사용한다.
예를 들면 뉴스 페이지에서 경제section, 사회section 등으로 묶어줄때 사용한다고 보면 될듯!
이텔릭체로 보여지는 <i> vs <em>
이 영상을 보니까 접근성이라는게 생각보다 굉장히 중요한것 같다.
이런 태그들의 차이점은 진짜 뭔지 전혀 알지도 못했고 솔직히 알려고 하지도 않았는데;; 이런 차이가 있는 줄 처음 알았다.
만약 <p> 슬기로운 의사생활 배우 <i>조정석</i> </p>라는 마크업을 웹페이지 리더기가 읽으면 강조 없이 "슬기로운 의사생활 배우 조정석"이라고 단조롭게 읽겠지만 이게 <p>슬기로운 의사생활 배우 <em>조정석</em></p> 일 경우 "슬기로운 의사생활 배우 조!정!석!" 이렇게 일게된다는 것이다. 와우....
굵은 글씨체의 <b> vs <strong>
위의 <em>태그와 <i>의 차이점과 마찬가지로 <b>태그과 <strong>태그의 차이점은 시각적으로만 볼드체인지 실제로 강조가 되는 볼드체인지의 차이라고 한다.
목록 태그의 종류!?
ol과 ul은 이름 자체가 order list, unorder list라 알았는데 <dl>은.... 쫌 낯서네.........
많이 안쓸거같기는하지만(아마도 거의 본적이 없는....;) 어쨋든 이번기회에 다시 한번 짚어보자
<dl> Description List
<dt> Description Term
<dd> Description Detail
버튼은 <button> vs <a>
이건 사실 살짝 습관이 돼서 자연스럽게 이렇게 사용하긴했던 것 같은데 그래도 가끔 의식의 흐름대로 구조짜다보면 꼬여있을때가 있긴하다.
<button>은 특정한 액션이 있는 경우에 사용!
<a>태그는 단순한 페이지 이동에 사용!
음... 생각해보니 버튼에 굳이 굳이 onClick="href='주소'" 이렇게 쓴적도 꽤 있던듯...............
테이블형 자료는<table> 대신 <css> flex와 grid를 활용
과거에 CSS가 지금처럼 화려하지 않았을때는 무조건 테이블형 자료는 <table>을 사용했다고 한다. 그치만 <table>은 예쁘게 꾸미는데(!?) 한계가 있고 이제 CSS로도 충분히 테이블형 뷰를 구현할 수 있으니 정말 엘셀처럼 엄청난 양의 데이터를 행*열로 나열하는게 아니라면 CSS flex와 grid를 사용한다
▼ 원본 영상