본문 바로가기
html

HTML의미론적 태그

by Son 2021. 6. 11.

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
  <header><!--시각적으로는 아무런 의미가 없음 대신 이부분이 웹페이지의 정보를 담고 있는 곳이라는 것을 나타내는 것을 의미하는 태크-->
<h1><a href="index.html">HTML</a></h1>
  </header>
  <nav><!--많은 리스트들 중에서 어떤 것이 이 웹페이지를 탐색할때 사용하는 것인지를 의미적으로 정의하는 태그-->
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
</nav>
<article><!--본문임을 표시하는 태그-->
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</article>
<footer><!--가장 밑부분에 항목을 추가하는 tag-->
<ul>
<li><a href="privacy.html">개인보호정책</a></li> 

                                                 <!--1.클릭했을 때 링크를 걸 양끝에<a></a>를 입력한다
                                              2.hyper text의 첫자인 h와 참조라는 단어reference의 3글자를 따서 href를 입력한후 = 하고 ""를 하고 그 사이에 링크를 걸 사이트를 넣는다
                                                3.새로운 탭을 열지 않고 그 탭에서에서 다음탭으로 넘어감
                                                4.새로운 탭으로 링크 사이트를 열려고 한다면 </a>에 target="_blank"를 입력한-->
<li><a href="privacy.html">회사소개></a></li>
</ul>
</footer>
</body>
</html>


article 본문
aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들
details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure 삽화나 다이어그램과 같은 부가적인 요소를 정의
footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main 문서에서 가장 중심이 되는 컨텐츠를 정의
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav 문서의 네비게이션 항목을 정의
section 문서의 구획들을 정의 (참고)
time 시간을 정의

'html' 카테고리의 다른 글

html 실습1  (0) 2021.06.14
html 이미지 넣기와 이미지 화면 깨지기  (0) 2021.06.13
meta  (0) 2021.06.10
hidden  (0) 2021.06.08
html 버튼  (0) 2021.06.07