Do it! HTML 웹 표준의 정석

HTML and Semantic tag

lshjju 2025. 11. 6. 16:21

Keyword overview


HTML

Semantic tag



The Code Card


HTML structure and comment

https://lshjju.tistory.com/789

 

HTML structure and comment

웹의 가장 기본이 되는 언어인 HTML의 정의부터 작성 규칙까지, 표준 가이드에 따라 하나씩 짚어보겠습니다.1. HTML의 정의**HTML(HyperText Markup Language)**은 웹페이지의 뼈대를 만드는 마크업 언어입니

lshjju.tistory.com


Semantic tag

https://lshjju.tistory.com/791

 

Semantic tag

시맨틱 태그(Semantic Tag)란 브라우저와 개발자에게 그 **의미(Semantic)**를 명확히 설명해 주는 태그를 말합니다.단순히 구역을 나누는 나 은 그 안에 무엇이 들었는지 알 수 없지만, 시맨틱 태그를

lshjju.tistory.com



Code training



03-1 HTML과 첫 만남



HTML 이란?


 


03-2 HTML의 구조 파악하기



실습 - HTML 파일 살펴보기


1단계 웹브라우저로 HTML 파일 실행하기

2단계 VS CODE에서 예제 파일 불러오기

 

예제

https://github.com/lshjju/doit-hcj-new/blob/main/03/index.html



HTML 문서의 기본 구조 살펴 보기



웹 문서의 유형을 지정하는 <!DOCTYPE html> 태그



웹 문서의 시작을 알리는 <html> 태그



웹 브라우저에 문서 정보를 알려주는 <head> 태그



문자 세트를 비롯해 문서 정보가 들어있는 <meta>태그



문서 제목을 나타내는 <title> 태그



웹브라우저에 내용을 표시하는 <body> 태그



03-3 HTML 파일 만들기



실습 - VS code에서 새로운 HTML 파일 만들기


1단계 선택한 폴더에 새 파일 만들기

2단계 새파일 이름 입력하기

3단계 새파일 확인하기



실습 - VS code를 활용하여 HTML 파일 완성하기


1단계 기본코드 입력하기

2단계 문서 언어와 제목 바꾸기

3단계 문서 내용 입력하기

4단계 웹 문서 확인하기

5단계 수정한 후 확인하기

 

결과

https://github.com/lshjju/doit-hcj-new/blob/main/03/results/my-1.html



실습 - 라이브 서버 설치하고 수정 결과 바로 확인하기


1단계 라이브 서버 설치하기

2단계 편집 창에서 라이브 서버 실행하기

3단계 수정 결과 즉시 확인하기

 

결과

https://github.com/lshjju/doit-hcj-new/blob/main/03/results/my-2.html



태그, 이건 꼭 알아두세요.



태그는 소문자로 씁니다.


여는 태그와 닫는 태그를 정확히 입력 합니다.


적당하게 들여쓰기를 합니다.


일부 태그는 속성과 함께 사용합니다.




03-4 웹 문서의 구조를 만드는 시맨틱 태그



시맨틱 태그가 왜 필요할까요?



웹 문서의 구조를 만드는 주요 시맨틱 태그



헤더 영역을 나타내는 <header> 태그


네비게이션 영역을 나타내는 <nav> 태그

 

로고와 네비게이션이 있는 헤더

https://github.com/lshjju/doit-hcj-new/blob/main/03/structure.html



핵심 콘텐츠를 담는 <main> 태그


독립적인 콘텐츠를 담는 <article> 태그


콘텐츠 영역을 나타내는 <section> 태그

 

<section> 태그 2개로 구성한 본문 

https://github.com/lshjju/doit-hcj-new/blob/main/03/structure.html



사이드바 영역을 나타내는 <aside> 태그


푸터영역을 나타내는 <footer> 태그


여러 코드를 묶는 <div> 태그

 

<div> 태그로 코드 묶기

https://github.com/lshjju/doit-hcj-new/blob/main/03/structure.html





HTML에서 주석 달기




Copyright

이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB

 


'Do it! HTML 웹 표준의 정석' 카테고리의 다른 글

Form and input tag  (0) 2025.11.06
text / list / table / image / multi media / hyper link  (0) 2025.11.06
Web Development setting  (0) 2025.11.06
About Web  (0) 2025.11.06