HTML 특징 정복하기

2022.08.05

 

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 4

     : 05 HTML 특징 정복하기

 

 

 

---

 

 

Review

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 4

 

: 아직 무슨 말인지 잘 모르겠긴 한데 HTML은 뼈대라고 외우라고 한 말이 이제 무슨 말인지는 대충

알겠다. 웹 사이트를 만들 때 필요한 태그를 천천히 외워야 할 것 같다.

제품 상세 페이지를 네이버 스토어에 올려 본 경험을 예로 들어 설명해주셔서 이해가 쉽게 됐다.

웹 페이지를 만들 때는 페이지가 잘 검색되도록 고려해 HTML 코드를 작성해야 한다.

 

어제 공부했던 ol 태그는 ordered list의 약자로, 순서를 부여하는 태그이다.

ol 태그는 li 태그와 함께 쓰일 때, ol 태그는 부모이고 li 태그는 자식이라 부른다고 한다.

부모가 자식에게 영향을 주기 때문이다. 

 

검색 엔진이란 여러 웹 사이트나 웹 페이지 등을 검색해주는 시스템이나 프로그램 등을

통칭한다. 예를 들어, 네이버 스토어에서 샤워기 필터를 사려고 하면 우리는 검색창에

'샤워기 필터' 라고 검색할 것이다. 그러면 검색 엔진은 웹에서 원하는 정보를 찾는 데

걸리는 시간을 최소화해준다.

 

 

 

<검색 엔진 동작 원리>

: 수많은 정보  → 크롤링 → 미리 정리하기 → 사용자 검색 → 사용자에게 보여주기

*크롤러 or 봇 : 수많은 정보를 미리 정리해 놓는 과정을 자동으로 데이터베이스화 시키는 프로그램

 

검색 엔진 최적화(SEO)란 Search Engine Optimization의 약자로 검색이 잘되도록 설계하는 일이다. 

HTML로 웹 페이지를 만들면서 검색 엔진 최적화를 하는 두가지 방법이 있는데, 바로 메타 태그와

시맨틱 태그가 웹 페이지 정보를 검색 엔진에 제공하는 태그이다.

-메타 태그 : 검색 엔진에 정보를 제공할 목적의 태그

-시맨틱 태그 : 웹 페이지 구조를 구성하는 태그. 브라우저, 검색 엔진, 개발자 모두에게 요소 의미를 

 명확히 설명하는 역할을 한다.

 시맨틱 태그와 비시맨틱 태그로 구분할 수 있다. 

  1. 시맨틱 태그 : 검색 엔진 봇이 읽을 수 있는 문서 구조를 작성하는 데 사용. form, label 등 지금까지

      배운 대부분 태그가 여기 해당한다.

  2. 비시맨틱 태그 : 요소에 대해 어떤 설명도 하지 않는 태그. div, span 등이 있다.

---

메타 태그 예제

 

-charset을 uf-8로 설정하면 모든 언어를 지원한다.

-meta 태그에 이름(name)과 요소(content)를 작성해 웹 페이지를 설명한다.

-title 태그로 웹 페이지 제목을 알려준다.

→head 태그에는 메타 데이터가 들어가고 이 메타 데이터는 추후 검색 엔진이 웹 페이지를 읽을 때 

   사용된다.

 

---

시맨틱 태그로 구분지어본 HTML 문서의 레이아웃

 

 

레이아웃용 시맨틱 태그별 의미

 

---

 

 

웹 사이트를 만들 때 반드시 검색 엔진 최적화를 고려해야 하는데, 이때 메타 태그와 시맨틱 태그를 사용하면

검색에서 우위를 차지할 수 있다.

하지만 비시맨틱 태그를 무시해선 안 된다고 한다. 

시맨틱 태그가 많으면 페이지 구조가 복잡해져서 페이지를 읽기 어려워 적절하게 잘 사용해야 한다고 한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*이미지 출처

instagram : @inmyflora