HTML 첫걸음

HTML이란

컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다.

 

예를 들어 엑셀 프로그램으로 문서를 작성했다면 확장자가 .xlsx인 파일로 저장되죠. 한글의 확장자는 .hwp이구요. 웹의 경우도 마찬가지입니다. 웹 사이트에서 사용할 문서는 웹에 맞는 형식인 .html 확장자를 붙여 다른 문서와 구분하고 이 파일을 더블 클릭하면 웹 브라우저가 실행되면서 그 안의 내용이 표시됩니다.

하지만 일반 문서와 웹 문서는 큰 차이가 있습니다. 엑셀 문서를 비롯한 일반 문서는 내용을 입력하는 프로그램과 나중에 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다.

 

웹 문서를 작성하는 프로그램을 웹 편집기(Web Editor)라고 하고 웹 문서를 보는 프로그램을 웹 브라우저(Web Browser)라고 합니다.

 

• 웹 편집기 - 서브라임 텍스트3 / 아톰 / 브라켓 / 비주얼 스튜디오 코드 등
• 웹 브라우저 - 크롬 / 파이어폭스 / 인터넷 익스플로러 / 엣지 / 사파리 / 오페라 등

HTML이란 하이퍼텍스트 마크업 랭귀지(HuperText Markup Language)의 줄임말로 말 그대로 해석하면 하이퍼텍스트를 마크업하는 언어입니다.

 

'하이퍼텍스트'란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말하고 '마크업'이란 태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말합니다. 즉 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있습니다.

 

HTML을 HTML5라고 부르는 이유

인터넷 초창기의 HTML은 텍스트와 이미지를 한 줄씩 웹브라우저 화면에 표시하는 정도였습니다. 하지만 웹 사용자가 늘고 웹 브라우저들이 하나 둘 등장하면서 표준이 필요하게 되었습니다.

웹 창시자인 '팀 버너스리'가 'W3C(World Wide Web Consortium)'라는 단체를 설립하고 HTML 2.0과 HTML 3.2, 그리고 HTML 4.0을 차례로 발표합니다.

하지만 그 후로 인터넷은 점점 더 빨리 발전해 웹에서 처리해야 할 요구사항들이 더욱 많아졌습니다.
HTML4로는 웹의 흐름을 따라가기 어렵게 되었죠.

애플과 모질라. 오페라. 구글 등의 주요 브라우저 업체들은 기존 HTML 문서도 지원하면서 최신 웹 환경에 맞게 기존 HTML을 확장하려는 생각으로 WHATWG(Web Hypertext Application Technologies Working Group)를 구성했습니다.

 

처음에는 회의적이던 W3C도 2007년 결국 WHATWG를 받아들였고 'HTML5'라는 이름으로 부르게 되었습니다. 몇 년 동안의 논의 과정을 거쳐 2014년 11월 공식 표준이 발표되었습니다. 이때부터 HTML5를 'HTML'이라는 이름으로 사용하고 있습니다. HTML5와 후속표준안은 Http://www.w3c.org/TR/html에서 확인할 수 있습니다.

 

웹표준이란

웹표준은 말 그대로 웹상에서 지켜야 하는 표준적인 규칙이라고 할 수 있습니다. 좀 더 구체적으로 말하자면 국제 표준화 단체인 W3C(World Wide Web Consortium)가 지정한 표준안을 지켜 웹사이트를 제작하는 것입니다. 또한 그렇게 함으로써 어떤 운영체제나 웹브라우저 상에서도 비교적 동일한 디자인과 기능을 구현하는 데에 그 목적이 있다고 할 수 있습니다.

웹표준을 지킨다는 건 html, css, javascript 등 웹사이트 제작에 사용되는 언어들의 표준과 가이드라인을 따른다는 것입니다. 표준이란 건 모든 브라우저가 지원한다는 의미이므로 표준을 지킬 경우 액티브엑스처럼 어떤 브라우저에서는 되고 다른 브라우저는 안 되는 상황은 발생하지 않습니다. 웹표준을 지키면 브라우저간 호환성은 자동으로 이뤄진다고 보면 됩니다.

 

웹표준은 웹사이트의 효율적인 제작과 운영, 콘텐츠의 관리와 정확한 의미 전달, 사용자 편의성, 접근성, 보안 등 모든 면에서 가장 올바른 방식을 지정하고 공표한 것입니다.

 

웹표준의 장점

1. 수정 및 관리의 용이
웹표준을 준수하여 HTML과 CSS가 분리된 사이트를 만들 경우 수정사항이 있을 시 CSS의 수정만으로도 손쉽게 디자인의 수정이 가능해 집니다. 따라서 엄청난 시간, 비용절감의 효과를 누릴 수 있습니다.

 

1. 파일 사이즈의 감소를 통한 웹공간의 확보와 로딩 시간 감소
웹표준을 준수하여 코딩할 경우 필요없는 소스와 파일을 줄임으로서 웹 공간에 여유공간을 확보하고 페이지 로딩속도를 빠르게 함으로써 사용자에 더 나은 편의를 제공할 수 있습니다.

 

1. 미래에 나올 브라우저에 대한 상위 버전 호환성
웹표준을 이용하게 되면 컨텐츠와 CSS가 따로 분리 되어 있기 때문에 기존 브라우저에서는 물론, 향후 미래에 나올 스타일시트 기능을 지원하지 않는 브라우저에서 보더라도 문서를 이해하는데 아무런 문제가 없다는 장점을 지니고 잇습니다.

 

1. 검색 엔진에 대한 최적화 방안
웹표준을 이용하여 HTML 소스를 중요도에 맞게 구조화하고, 깨끗하게 정리된 소스를 만들어내면 검색 로봇이 올바르게 검색할 수 있습니다. 예를 들어 웹표준 태그인 (h1~h6)태그와 텍스트 강조 요소 등을 이용하면 검색엔진에 효율적으로 노출될 수 있도록 최적화 시킬 수 있습니다.

 

1. 웹 접근성 용이
웹표준을 이용해 작성한 문서는 거의 모든 브라우저, 휴대폰, PDA, 장애인 지원용 소프트웨어에서 쉽게 읽을 수 있습니다. 웹표준을 준수하면 장애인의 웹사이트 이용에도 도움이 되며, 대체 텍스트 지원으로 이미지 링크 등이 변경이 되어도 문서를 이해하는 있어서 무리가 없게 됩니다.

웹접근성이란

W3C의 정의에 의하면 웹 표준성은 접근성, 사생활 보호, 보안, 국제화의 측면을 고려해야 합니다. 이 중에 접근성을 흔히 '웹접근성'이라고 하고 웹 표준성과 함께 많이 언급되는 개념입니다.

 

웹접근성은 장애 여부에 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미합니다. 예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 그렇지 않은 사람과 같은 방식으로는 웹페이지를 이용할 수 없습니다.

그래서 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치해서 인터넷을 이용합니다. 스크린 리더는 모니터에 비춰지는 내용을 인식해서 음성, 점자로 출력해주는 역할을 합니다. 예를 들어 화면에 '메뉴'라는 텍스트가 있으면 이를 인식해서 '메뉴'라는 음성이 나오는 방식입니다.

 

시각장애인은 이를 이용해 눈으로 보는 대신 소리로 들으면서 웹페이지에 담긴 정보를 이해할 수 있습니다. 하지만 스크린 리더는 소프트웨어에 불과하므로 스스로 웹페이지의 내용을 분석해서 이건 무슨 내용이고 저건 무슨 내용이다라는 걸 이해할 수 없습니다.

특히 이미지의 경우가 그렇습니다. '메뉴'라고 텍스트로 집어 넣지 않고 메뉴라고 그려진 이미지를 사용하면 비 시각 장애인의 눈에는 똑같이 메뉴라고 보이지만 소프트웨어 입장에서는 그저 이미지일 뿐입니다. 그 이미지 안에 그려진 내용을 인식하는 것은 불가능합니다. 그래서 되도록이면 이미지를 사용하지 말고 소스 코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이 이미지가 어떤 내용인지 설명을 추가해야 합니다.

 

 

 

참고 - HTML5+CSS3 웹 표준의 정석