HTML이란?

HTML(Hyper Text Markup Language)이란??

• Hyper Text란?
  • text의 밑줄이 거지게되어 사용자가 이걸 눌르면 연결되어있는 링크로 연결된다.
• 구조를 설계할 때 사용되는 언어이며, 하이퍼링크 시스템으로 이루어져 있다.
• 확장자는 htm, html으로 가지며, 이 파일은 단순한 텍스트 파일에 불과하지만, 이 파일을 웹브라우져가 화면에 렌더링(그림을 그려준다라고 생각하면됨)을 통해 사용자가 볼수 있도록 해준다.

HTML 표준 기술 사양

HTML 문서 파일과 웹 브라우저의 해석 & 시멘틱 마크업

• 시멘틱 마크업(Semantic Markup)

  • HTML은 웹사이트 콘텐츠의 의미를 설명하는 유일한 목적을 가진다. 즉, 비주얼 디자인(모양, 색, 크기 등)이 아니라(이 요소들은 CSS나 Javascript의 목표) 전체적인 구조 설계(Structure Design)를 목표로 한다.
  • Semantic Markup은 종종 POSH(Plain Old Semantic HTML)라고도 불리우는데 해석 그대로 평범하고 오핸된 의미론적인 HTML이라는 뜻이다.

  • 적절한 HTML요소를 올바르게 사용하는 것에서 시작한다.

    $ <div id="heading" style="font-size: 300%; padding: 10px;">시멘틱 마크업이란?</div>

  • 위의 마크업은 확실히 제목같아 보이지만 의미와 용도면에서는 제목으로서의 기능은 없다.

  • 이것은 검색엔진의 최적화, 접근성, 개발면에서 다음과 같은 사항들을 고려해야된다.

    • 최적화 : 검색엔진을 최적화하는 것에서 매우 중요한 것은 headings 요소 안의 키워드이다.
    • 접근성 : 스크린리더기는 네비게이션 길잡이로 headings요소를 참고한다.
    • 개발 : 적절한 시멘틱 요소를 사용하지 않게 될시 스크립트와 스타일을 주기 위해 해당 요소를 설정하는데 많이 까다롭다.

  • 시멘틱 마크업은 가능한 가벼워야 하기에 중첩된 모든 div요소와 실타래 처럼 얽혀 있는 스파게티 코드는 제거되어야 파일 사이즈가 작아지고 코딩이 더 쉬워진다.

  • 결론적으로 HTML, CSS, Javascript는 각각 분리되어야 개발 및 유지 보수 측면에서 상당한 수고를 덜어 줄 수 있다.

    $ <h1>시멘틱 마크업이란?</h1>

  • 2005년 Andy Clark(세계적인 웹디자이너)도 데이터 구조, 스타일 정보, 그리고 스크립트 정보를 각각 분리시켜야 한다고 말한다.

    • 1) 시멘틱 HTML은 정확하고 접근이 용이한 컨텐츠의 데이타 구조를 형성한다. 바로 HTML5가 이런 부분을 잘 지원하고 있다. 그래서 우리는 어떠한 스크립트를 추가 하지 않고도 가능한 접근이 용이하며 쓸모있게 데이터 구조를 만들어 내야한다.
    • CSS는 스타일 정보를 제공한다. 즉, 데이터 구조에 우리가 원하는대로 시각적인 효과를 더해 주는 것이다. CSS3는 이전의 CSS2보다 더 강력한 툴이다.
    • HTML5와 그 외 다른 것에 정의되어진 스크립팅 APIs와 베이스언어를 포함한 자바스크립트는 우리가 제작하는 사이트에 풍부한 기능과 유용성의 증대를 더해 주는 스크립팅을 제공한다.

• 텍스트 에디터로 HTML 파일을 열어서 마크업 한 후에 HTML 파일울 웹 브라우저로 열어 새로고침하면 결과를 확인할 수 있다.

브라우저는 어떻게 동작하는가?