[HTML/CSS] HTML에 대해서(1)

Kimseongeun·2022년 4월 2일

CS공부

목록 보기

2/9

HTML (HyperText Markup Language) HTML은 기본적으로 문서를 구조화해주는 지극히 간단한 언어, 웹사이트를 만드는 데에 있어서 여러 요소들이 모여 하나의 웹페이지를 구성하게된다

말 그대로 하이퍼텍스트를 마크업하는 언어.
- 하이퍼텍스트란?
  
  웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말한다.
- 마크업이란?
  
  태그를 사용해서 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말한다.
  
  결론적으로 웹에서 자유롭게 오갈 수 있느는 웹 문서를 만드는 언어가 HTML!이라고 정리할 수 있다.
- 왜 HTML을 HTML5라고 하는가?(HTML 간략한 역사)
  
  인터넷 초창기의 HTML은 텍스트와 이미지를 한 줄씩 웹브라우저 화면에 표시하는 정도였다. 하지만 웹사용자가 늘고 웹 브라우저들이 하나 둘 등장하면서 표준이 필요하게 되었다. 웹 창시자인 ‘팀버너스 리’ 가 ‘W3C(World Wide Web Consortium)’라는 단체를 설립하고 HTML 2.0과 HTML 3.2 그리고 HTML 4.0을 차례로 발표, 그 후로 인터넷은 점점 더 빨리 발전해 웹에서 처리해야할 요구사항들이 더 많아졌다. 그래서 애플, 모질라, 오페라, 구글 등의 주요 브라우저 업체들은 기존 HTML문서도 지원하면서 최신 웹 환경에 맞게 기존 HTML을 확장하려는 생각으로 WHATWG(Web Hypertext Application Technology Working Group) 를 구성했다. 이것이 HTML5로 받아들여졌고 HTML이라고 부르면 그건 HTML5라고 보면 되는 것이다.
  
  HTML의 기본 구조
doctype이란?
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
HTML이 어떤 버전으로 작성되었는지 알려주어 해당 버전으로 파싱해서 웹 브라우저가 내용을 올바르게 표시하게 해준다. 문서형은 XHTML, HTML5, HTML 세가지가 존재한다. 이렇게 마크업 문서의 요소와 속성들을 처리하는 기준이 되고(파싱) 유효성 검사에 사용된다.
- 유효성 검사란? : 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 크로스 브라우징, 사용성과 접근성, SEO 최적화 개선에도 도움이 된다.
- 즉, 웹표준을 지키는것
  
  이전 버전의 HTML은 SGML에 기반을 두고 만들어졌기 때문에 DTD가 필요하다.
- SGML이란? : Standard Generalized Markup Language, 즉, 표준 마크업 언어 규약이다. 컴퓨터에서 쓰이는 문서를 작성할때 어떠한 시스템 환경에서도 정보의 손실 없이 전송,저장이 가능하도록 국제 표준화 기구에서 정한것이다.
- DTD란? : 문서별로 해당 문서에 대한 태그 정보가 다르면 가독성이 어렵고 파악하기 힘들기에, 공통 규칙에 따라 문서를 작성하게 한다. 따라서 어떤 요소의 값이 어떤 값을 나타내고 있는지 명확하게 알 수 있다. 또한 프로그램 등에서 문서 처리할때도 사용되는 태그가 알고 있기 때문에 처리하기 쉽다. 즉, 문서 구조를 정의하기 위한 언어이다.
  
  💡팁 : HTML5는 이것을 설정하지 않아도 되지만 혹시모를 하위 호환을 위해 설정한다.
HTML의 head
```
<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>
```
태그는 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용한다. 이 태그 안에 있는 것들은 브라우저 상에서 나타나지 않는다. 다음과 같은 요소들은 head 요소에 포함되어야 한다.
- title
- style
- base
- link
- meta
- script
- noscript
  
  💣주의 : 이 중에서 script 요소와 noscript 요소는 head 요소뿐만 아니라 body 요소에 포함될 수도 있다.
HTML5에서 변경된 사항
HTML 4.01에서는 HTML 문서가 head 요소를 반드시 포함해야 했지만, HTML5에서는 생략할 수 있도록 변경되었다.
HTML의 meta

HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 [<title>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/title)같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함한다.

여기서 메타데이터!

HTML 문서가 어떤 내용을 담고 있고, 키워드는 무엇이며, 누가 만들었는지에 대한 정보를 담고있는 태그이다. 즉, 메타데이터는 데이터를 설명하는 데이터이다.

charset (문서의 character 인코딩을 특정하기)

  <meta charset="utf-8" />

charset요소는 문서에서 허용하는 문자 집합에 대해서 간단히 표시한다.

utf-8은 전셰계적인 character 집합으로 많은 언어의 문자들을 포함한다.

웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 포함한다.

name

name 요소는 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다.

content 요소는 실제 메타 데이터의 컨텐츠입니다. 머릿말을 요약하는데 유용한다.

   <meta name="author" content="Chris Mills" />
   
   <meta
     name="description"
     content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
   />

시멘틱 태그란?
시멘틱 마크업?
시멘틱 마크업은 적절한 의미 요소를 사용하여 웹 컨텐츠의 구조를 표시하는 것이다. 시각적으로만 나타나는 방식이 아니라 그 의미에 따라 사용한다는 것이다. 여기에는 콘텐츠의 의미를 이해하는 데 있어 서로 다른 역할을 명시적으로 나타내는 작업이 포함된다. 단락, 헤더, 강조된 텍스트 등의 내용 특성을 고려하여 모두 시멘틱 마크업 방식으로 나타내어야한다. div태그로만으로도 모든 마크업을 할수 있지만 시각적으로만 보이는것이 아닌 의미론적으로 마크업을 하여 의미있는 태그를 그 내용요소에 맞게 사용하는 것이 중요하다.
왜 시멘틱 마크업이 중요한가?
- SEO(Search Engine Optimization) 검색 엔진 최적화.
  
  인터넷에서 페이지를 찾을 때, 검색 엔진은 스타일 없이 페이지를 보기 만한다. 그래서 어떤 컨텐츠,요소가 더 중요한지 검색엔진이 결정,보는 방법은 시멘틱 마크업으로 적절한 태그를 표시하는 것이다.
  
  예를들어 페이지 이름을 '<p>(문단) 태그 안에 넣으면 내용에 대한것에 대한 중요도를 잃어버리거나 검색 엔진 결과에 나타나지 않을 가능성이 높다. 하지만 우리가 그것을 <h1> (헤더 1) 태그 안에 넣으면, 검색 엔진은 더 중요하게 여겨야 한다는 것을 알고 있다. 따라서, 검색 엔진 최적화는 시멘틱 마크업을 사용하는 매우 좋은 이유이다.
- 코드를 유지 보수 하기쉽다.
  
  의미없이 div 또는 p태그를 쓰는 것보다 연관성있는 내용을 묶어서 쓸때ul 태그로 li로 묶어서 쓰면 확실히 이후에 코드를 보수할때도 한눈에 파악하기 쉽다.
- Accessibility(접근성).
  
  The power of the Web is in its universality.
  
  웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근하는 것은 필수적인 요소이다.
  
  Tim Berners-Lee,
  
  예를들어, 컨텐츠 제목을 <p> 안에 있을때 , 스크린 리더 사용자들이 들었을시에 컨텐츠 제목과 그다음 내용들이 연달아 들리게 되어 구분이 되지않게된다.
  
  또한 빠르게 접근하기위해 제목만을 읽으려고 했을때도 검색되지 않는다.
  
  컨텐츠 제목을 <h>으로 하였을 경우, 스크린 리더 사용자들이 들리게 되는 내용은(보조 장비마다 다르겠지만) heading level 이라고 명시적으로 읽어준다.
  
  또한 빠르게 접근하기 위해 스크린리더 단축키중 H을 사용하여 제목만 읽게도 해줄수 있다.
  
  정말 일부분인 예시지만 정말 많은 부분에서 접근성을 고려하기 위해 여러 방법이 있다. ARIA(Accessible Rich Internet Applications) 속성에도 굉장히 많은 접근성을 고려 할수 있게해준다.

시멘틱 태그 종류(요소)

<section> 태그
```
HTML에서 단순히 레이아웃의 디자인을 위한 용도가 아닌, **특정한 의미들이 뭉쳐져 있는 독립적인 구획을** 나타낸다.
   
```
저 적합한 의미를 가진 태그(요소)가 없을 때 사용한다.

보통 section 태그는 heading 태그를 통해 제목을 포함해서, 해당 구획에 대한 의미를 보여준다.

<header> 태그
```
문서나 특정 **섹션(section)**의 **헤더(header)**를 정의할 때 사용합니다.
   
헤더(header)는 보통 **도입부에 해당하는 콘텐츠**나 **네비게이션 링크의 집합** 등과 같은 정보를 포함하게 됩니다.
   
- 하나 이상의 제목 요소(h1 ~ h6)
- 로고(logo)나 아이콘(icon)
- 저자(author) 정보
   
```html
   <header>
           <h3>날씨 정보</h4>
           <h4>2월 19일</h4>
           <p>- 기상청 제공 -</p>
   </header>
```
   
```
<nav> 태그

네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현

다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다.

<nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.
```
      <nav>
          <a href="/html/intro">HTML</a> |
          <a href="/css/intro">CSS</a> |
          <a href="/javascript/intro">JavaScript</a>
      </nav>
```
<aside> 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그

<article> 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.

<footer> 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그

<address> 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능

<hgroup> 제목과 관련된 부제목을 묶는 태그

<main> 이름처럼 문서 의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.

details 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.

figure 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용

figcaption <figure> 요소의 설명 캔션(caption) 정의

mark 현재 맥락에 관련이 깊거나 중요한 부분 강조

time 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

summary details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힘

Kimseongeun

김성은입니다.

이전 포스트

[프론트엔드] CORS의 유래 및 특징, 활용

다음 포스트

[HTML/CSS] HTML에 대해서(1)

CS공부

HTML의 기본 구조

HTML5에서 변경된 사항

charset (문서의 character 인코딩을 특정하기)

name

시멘틱 마크업?

왜 시멘틱 마크업이 중요한가?

`<section>` 태그

`<header>` 태그

`<nav>` 태그

[프론트엔드] CORS의 유래 및 특징, 활용

[프론트엔드] 웹접근성, SEO(검색 최적화)

0개의 댓글

[HTML/CSS] HTML에 대해서(1)

CS공부

HTML의 기본 구조

HTML5에서 변경된 사항

charset (문서의 character 인코딩을 특정하기)

name

시멘틱 마크업?

왜 시멘틱 마크업이 중요한가?

<section> 태그

<header> 태그

<nav> 태그

[프론트엔드] CORS의 유래 및 특징, 활용

[프론트엔드] 웹접근성, SEO(검색 최적화)

0개의 댓글

`<section>` 태그

`<header>` 태그

`<nav>` 태그