본문 바로가기
생활코딩 HTML + CSS + 자바스크립트/HTML 이론

10 HTML이 중요한 이유

by Hwanii_ 2023. 6. 25.
728x90

1.

 

 

coding 이라는 단어가 2개 있다.

 

위의 coding은 글씨 크기를 직접 선택해서 키우고, B 버튼을 눌러서 BOLD 처리를 한다.

 

아래의 coding은 본문 이라고 적혀있는 메뉴를 클릭해서, 크기와 글씨 굵기를 키우는 처리를 한다.

 

 

보면 보기에는 크기도 비슷하고,

겉보기에는 큰 차이가 없어서, 아무렇게나 해서 사용해도 괜찮은 느낌이 든다.

 

 

하지만 소스 버튼을 클릭해서 내부적으로 어떤 차이가 있는지를 확인해 보자.

 

예전에는 저게 무엇인지 잘 몰랐고, 소스코드가 있는지 개념 조차도 몰랐겠지만,

이제는 알고 있다.

 

편집기를 이용해서 글을 쓴다는 것 자체가 내부적으로 HTML 코드를 생산하는 행위 라는 것을.

 

그동안 HTML이 뭔지는 몰라도 우리는 편집기를 통해 HTML을 만들어 내고 있었다.

 

위의 소스를 해석해보면,

 

아래의 coding 글자는 <h3> 태그를 사용해서 글씨의 크기를 조정한것이고,

 

위의 coding 글자는 p태그와 span 태그로 둘러 쌓여 있는것을 확인할 수 있다.

span 태그 내부에 style 속성을 사용해서 font 크기를 지정해줬고,

strong 태그를 통해 coding 글자를 굵게 강조해 줬다.

 

2.

검색 엔진 개념

 

검색 엔진은 전 세계의 모든 웹 페이지를 내려받아, 그 웹 페이지에 담긴

HTML 코드를 분석 한다.

 

그리고 그 코드에 있는 내용에서 이 웹페이지의 제목은 무엇이구나,

이 웹 페이지는 어떤 내용을 담고 있구나

라는 것을 태그에 근거해서 정리 정돈 한다.

 

사용자가 만약에 coding 이라는 단어를 검색했을 때

검색 엔진은 일반인이 만든 웹 페이지 1억 개에 대해서도 알고 있고,

HTML 지식이 있는 지식인이 만든 웹 페이지 1억 개에 대해서도 알고 있다.

 

제목이 그냥 단순 coding인 사이트와,

시각적으로 제목처럼 보이는 coding 이라는 정보를 가진 사이트 중에

누구의 편을 들어줄지는 당연히 제목 자체가 단순하게 coding 인 사이트 이다.

 

다시 말해, 제목이 coding인 지식인의 사이트가 좀 더 위쪽에 올라오고,

일반인의 사이트는 100페이지 뒤에서나 보이게 될것이다.

 

<span style = "font-size : 22px"> coding </span>

 

vs

 

<h3>coding</h3>

 

>> 딱 그냥 제목이 coding 이라는것을 알려주는 코드가 win

 

왜 ?

 

검색 엔진은 웹 페이지에 담긴 HTML 코드를 분석하니까 ~

 

3.

경우에 따라서는 문서를 예쁘게 보이게 하고 싶어서, 글씨로 쓰지않고

이미지로 글을 쓰는 경우가 많다.

 

(나도 내 티스토리 블로그에 이미지로 글 많이 올려뒀음)

 

근데, 이미지로 글을 쓰게 되면, 검색 엔진에게는 존재하지 않는 페이지가 된다.

 

그래서 HTML의 의미에 맞게 정확하게 사용한다는 것이 중요하다는 말이 된다.

 

4.

뿐만아니라, HTML이 중요한 이유가 또 있다.

웹에서 핵심적인 철학은 접근성 이다.

 

웹은 모든 운영체제에서 동작하고 웹 페이지의 소스코드는 누구나 볼 수 있다.

웹은 저작권이 없는 순수한 공동재 이다.

 

이러한 개방성 또는 접근성을 accessibility 라고 한다.

 

이러한 접근성 중에서 중요한 개념중에 하나가

신체적인 장애가 있는 사람들도 정보로부터 소외당하지 않도록 노력 하기 이다.

 

시각 장애가 있는 사람은 시각적인 정보를 청각화 해서 얻게 된다.

이때 스크린 리더와 같은 프로그램이나 각종 보조장치를 이용해 정보를 접한다.

 

그런데 웹 페이지를 만들 때 웹 페이지를 예쁘게 만들고 싶다는 생각에

문자를 이미지로 만든다면, 시각 장애가 있는 사람에게는 존재하지 않는 정보가 된다.

 

따라서, HTML은 비즈니스 측면뿐만 아니라, 휴머니즘 측면에서도 매우 중요한 기술이다.

반응형