semantic

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

semantic 본문

web/HTML5

semantic

scarecrow1992 2020. 10. 1. 21:05

www.w3schools.com/html/html5_semantic_elements.asp

opentutorials.org/module/1892/10954

웹에서 정보로서의 가치가 중요해지면서 사람과 검색엔진 등 다방면 활용하기 좋게 하기 위한 여러 시도가 있었으며 semantic tag(의미론적 태그)는 그 시도들 중 제일 유의미한 결과를 가저다 주었다.

semantic은 굉장히 추상적이고 광범위 하기에 한마디로 표현하기가 힘들다. 그렇기에 여기서는 HTML tag 를 의미에 맞게 잘 쓰기 위한 방법론이라 이해하면 된다.

가령 대표적인 semantic으론 tag의 이름만으로 웹의 상단,중단,하단, 제목등을 구분하게끔 하기 위한것이 있다.

가령 아래와 같은 HTML 코드를 보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<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>
 
<h2>선행학습</h2>
 
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 
</body>
</html>
Colored by Color Scripter

cs

당장은 코드 길이가 짧아서 해석에 큰 어려움이 없지만 웹페이지의 규모가 커질수록 읽는데 어려움이 따를 수 있다.

그렇기 때문에 아래처럼 semantic tag를 쓰면 각 tag들의 의미를 분명하게 할 수 있다.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
</head>
<body>
    <!--header태그로 제목부분을 꾸며줌으로써 타인에게 HTML 문장의 기능을 분명하게 인식하도록 해준다.-->
    <header>
        <h1><a href="index.html">HTML</a></h1>
    </header>
 
    <!--nav 태그로 해당 내용이 네비게이션 역할을 함을 명시-->
    <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>
 
    <!--section 태그로 본문을 나타냄을 명시-->
    <section>
        <!--article태그로 각 본문의 내용을 구분함을 명시-->
        <article>
            <h2>선행학습</h2>    
            본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.     
        </article>    
        <article>
            <h2>선행학습2</h2>    
            본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.     
        </article>
        <article>
            <h2>선행학습3</h2>    
            본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.     
        </article>
    </section>
 
    <!--footer 태그로 웹페이지 하단에 존재함을 명시-->
    <footer>        
        <ul>
            <li><a href="privacy.html">개인보호정책</a></li>
            <li><a href="about.html">회사소개</a></li>    
        </ul>        
    </footer>
</body>
</html>
Colored by Color Scripter

cs