해보자고

[견고한 기본기 HTML&CSS] Text-level semantics 본문

프로그래밍/html & css

[견고한 기본기 HTML&CSS] Text-level semantics

초코맛동산 2024. 12. 31. 12:42

Text-level semantics

:  HTML 요소를 사용하여 텍스트 레벨에서 의미를 정의하는 것. 아래는 다양한 Text-level semantics 들을 나타낸다.

 

출처: https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html

 

1. <a>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grouping</title>
</head>
<body>
<!--하이퍼 텍스트 즉 링크를 만들 때 사용하는 요소. 자바스크립트로 링크로의 동작을 구현할 수는 있으나, 웹 접근성에 위배됨으로 href 사용 권장-->
<!--<a> 요소 안에는 <a>나 <button> 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않음을 주의-->
<a href="https://www.naver.com">click1</a> <!--click1은 naver로 이동.-->
<a href="https://www.naver.com" target="_blank">click2</a> <!--click2는 _blank 속성 때문에 새 창으로 naver 이동.-->
<a href="./index.html">click3</a> <!--click3은 해당 파일의 index.html로 이동.-->
<a href="#three">click4</a> <!-- 해쉬 링크, id가 three인 요소가 보이도록 이동.-->
<a href="./index.html" download>click5</a> <!--index.html 파일 다운로드-->
<a href="./hello.hwp">hwp click6</a> <!--hello.hwp 파일 다운로드-->
<a href="./hello.hwp" download="a.hwp">hwp download click7</a><!--hello.hwp 파일 다운로드할 때 파일명을 a.hwp로 저장-->
<a href="./hello.pdf">pdf click8</a>
<a href="./hello.pdf" download="a.pdf">pdf download click9</a>


<p id="three" style = "margin-top: 1000px;">Hello.</p> <!--id가 three인 p태그 생성.-->
</body>
</html>

 

1.1 click1 

<a href="https://www.naver.com">click1</a> <!--click1은 naver로 이동.-->

 

1.2 click3 

<a href="./index.html">click3</a> <!--click3은 해당 파일의 index.html로 이동.-->
<!--index.html 파일-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>이것은 index.html 파일입니다.</h1>
</body>
</html>

 

1.3 click4

<a href="#three">click4</a> <!-- 해쉬 링크, id가 three인 요소가 보이도록 이동.-->

(하단 생략)

<p id="three" style = "margin-top: 1000px;">Hello.</p> <!--id가 three인 p태그 생성.-->

 

1.4 click5 

<a href="./index.html" download>click5</a> <!--index.html 파일 다운로드-->

 

 

2. <br>, <wbr>

  • <br> : 줄바꿈을 위한 태그
  • <wbr> 텍스트 박스(텍스트가 한 화면에 표시되는 영역)에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 태그
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione asperiores velit veniam. Iste dolor nulla esse fuga impedit odio, 
<br>assumenda praesentium totam necessitatibus voluptas officia delectus facere maiores reprehenderit officiis.</p>
</body>

<!--수정 후-->

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione asperiores velit veniam. Iste dolor nulla esse fuga impedit odio, 
<br>assumenda praesentium totam necessitatibus voluptas officia delectus facere maiores reprehenderit officiis.</p>
</body>

 

(수정 전 출력 화면)

 

 

(수정 후 출력 화면)

 

 

3. <b>, <strong>

<body>
<p><b>Hello world</b> <!--굵은 글자를 표현, 그러나 CSS로 스타일링을 주로 하여 잘 사용X-->
<br><strong>This is our first time meeting.</strong> <!--굵은 글자를 표현 + 중요함의 의미를 더욱 강조-->
</p>
<p>Hello world
<br>This is our first time meeting.
</p>
</body>

 

 

<body>
    <p>스터디 카페 안은 유독 조용했다.</p>
    <p>
        단짝 친구 : 오늘 따라 사람이 적네? 아마 다들 <em>중간고사</em> 를 보고 있나봐. <!--<em>은 기울임 글꼴 + 강조의 의미-->
        나 : 오 그러게. <i> '우리는 왜 시험도 못 보고 여기에 와 있는걸까...' </i> 어? 우리 학교는?
    </p> <!--<i>는 기울임 글꼴을 나타내지만, CSS를 통한 스타일링에 따라 잘 사용되지 않는다. 그러나 HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분, 어떤 이유로 주위와 구분해야 하는 부분을 표현-->
    <p>나의 말에 단짝 친구는 입을 벌린 채 굳어졌다.</p>
</body>

 

 

'프로그래밍 > html & css' 카테고리의 다른 글

[견고한 기본기 HTML&CSS] Grouping tag  (0) 2024.12.13
[견고한 기본기 HTML&CSS] document element, metadata  (1) 2024.12.10
'프로그래밍/html & css' Related Articles more