티스토리 뷰

기초부터 탄탄하게 공부시작! 

 


DOCTYPE


문서의 유형을 정의하기 위하여 사용하는 선언문 

  • 웹 문서의 시작을 알리며, <html> 태그 보다 먼저 선언한다.
  • DDCTYPE은 웹브라우저에서 처리할 문서가 HTML이며, 이러한 버전을 사용했으니 해당 코드로 해석하라 의미를 가진다.
  • HTML5이전에는 DOCTYPE선언이 길고 복잡했으나, HTML5이후는 비교적 간단하다.

HTML : HypeTextMarkupLanguage


HTML은 웹페이지를 기술하기 위한 마크업 언어이다. 

웹페이지의 내용과 구조를 담당하는 언어. => 태그를 통해 정보를 구조화 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>안녕하세요! HTML5</p>
  </body>
</html>

HTML5은 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정한다.

실제적인 HTML은 2행붜시작한다. <html></html> 부터 시작.

<head></head> 사이에는 메타데이터와 title등이 들어간다.

출력되는 모든 요소는 <body></body> 사이에 들어간다.

 


기본문법


1. 요소

 

출처:&nbsp;https://poiemaweb.com/html5-syntax

 

시작태그와 종료태그 그리고 콘텐츠로 구성된다.

 

2. 요소의 중첩

 

요소는 다른 요소를 포함 할 수 있다. 즉 부모 자식 관계가 형성되어 이러한 정보로,  정보를 구조화한다.

 

3. 빈요소 (empty content)

 

컨텐츠를 가질 수 없는 요소를 빈요소라고한다.

attribute만 가질 수 있다.

 

  • br
  • hr
  • img
  • input
  • link
  • meta

4. 속성 (attribute)

 

요소의 성질 특징을 정의하는 명세이다.

attribute는 시작태그에 위치하며 이름과 값의 쌍을 이룬다.

출처:&nbsp;https://poiemaweb.com/html5-syntax

5. 주석

 

주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.

 


시맨틱 웹(Semantic Web)


웹사이트는 검색엔진이 매우 중요하다.

당연한 말이 검색엔진에 노출되지 않는 웹사이트에는 유저들이 접속할 일이 없기때문이다.

검색엔진은 이 시대의 강력한 권력중 하나라고 생각해도 무관하다.

 

SEO(Search Engine Optimization) : 검색엔진 최적화 - 마케팅 도구의 일종

본인의 웹사이트를 검색하기 알맞은 조건으로 웹사이트를 조정하기도 한다. ==> 이말은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

 

검색엔진은 로봇이라는 엔진을 통하여 전세계의 정보를 수집한다.이것이 크롤링!! 검색엔진의 크롤러가 이를 수행한다.

검색사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어낸다. 이것을 인덱싱이라고하며 검색엔진의 인덱서가 이를 수행한다.

 

 

인덱서를 생성할때 사용되는 정보? from 검색 로봇이 수집한 정보 결국 웹사이트의 HTML코드 

검색엔진은 HTML코드로로 만으로도 의미를 인지해야하는데 이때 시멘틱 요소를 해석하기된다.

 

HTML문서 = (인간)자연어 + (컴퓨터해석)메타데이터

 

 

 

아래 두코드의 외형은 같다? 그럼 뭐가 다르까

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

1행 => 아무 의미 없다. 개발자가 의도한 요소를 명확하게 나타내지않고 폰트크기와 볼드체만을 지정하는 메타데이터만을 브라우저에게 알림

 

반면

 

2행 h1태그를 이용하여, header중 가장 상위 레벨임을 알린다.

 

즉.시민틱태그를 사용하면

 

개발자가 의도한 요소의 의미가 명확히 코드에 드러난다. =>    코드의 가독성⬆️ 유지보수가 쉽다.

브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 설명 하는 역할을 한다.

 

시맨틱 태그를 통하여 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

 

시멘틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이였던 웹페이지를  의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다 

 

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함