7. Text-level semantics

, <a href="경로">, , <dfn><abbr>, 소스코드

` `, ``

태그는 줄바꿈을 위한 태그입니다. 태그도 간혹 사용하는데요. 은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것입니다.


<p>
    <!-- 공백병합 -->
    Lorem 
            
            
            
    ipsum <br> 
    <br> 
    <br> 
    dolor sit amet
    <p>풀밭에 같지 전인 노년에게서 청춘의 방지. <wbr> 전인 열락의 풀이 것이다.</p>
</p>

`<a href="경로">`

<a> 요소는 HTML의 핵심적인 요소로써 하이퍼 텍스트 즉, 링크를 만들 때 사용합니다.

href 속성을 통해 경로를 지정할 수 있습니다. href 속성을 사용하지 않고 자바스크립트로 경로를 지정할 수도 있지만 이는 웹 접근성에 위배됨으로 href 속성을 사용해주는게 좋습니다.

html 문법상 블록레벨 요소는 인라인 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 블록 레벨 요소를 자식으로 하는것이 허용됩니다.

또한 a 요소안의 자식으로는 a 요소나 button 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요합니다.

💡

Internet Explorer 는 download 속성을 지원하지 않습니다.


<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>  
<a href="./index.html">click</a>
<a href="#three">click</a> <!-- 해쉬 링크 -->
<a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<a href="./hello.pdf">pdf click</a>
<a href="./hello.pdf" download="a.pdf">pdf download click</a>

`, `

태그는 굵은 글꼴을 표현하고 싶을 때 사용합니다. 별 다른 의미는 없으며 오직 텍스트를 굵은 글씨로 표현하기 위한 용도이기 때문에 더 이상 사용하지 않는 요소입니다. 태그는 굵은 글꼴에 중요도를 더해 강조할 때 사용합니다. 중요도를 더 강조하고 싶을 때에는 strong을 중첩하기도 합니다.


<p>
    <strong>hello</strong> 
    adipisicing <b>elit</b>. 
</p>

`, `

태그는 기울임 글꼴을 나타냅니다. HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주 언어가 한글이지만 영어로 표기되었을 경우), 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용합니다. 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있습니다.


<p>시장안은 사람들의 활기로 가득차 있었다.</p>
<p>
    상인 : 이 상품은 현재 <em>30%</em> 할인중입니다!
    나 : 아하 그렇군요! <i> '흠.. 왜 하필 지금 할인하는걸까?!' </i> 좀 더 구경하고 올게요!
</p>
<p>나는 상인의 의도를 의심할 수 밖에 없었다.</p>

`<dfn>`

현재 문맥에서 정의하고 있는 용어를 나타냅니다. dfn의 가장 가까운 부모가 혹은 <dt><dd> 쌍, <section> 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주합니다. 문서에서 최초로 나타났을 때 사용합니다.


<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn>WWW</dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

`<abbr>`

<abbr> 태그는 준말, 약자를 나타내고 싶을 때 사용합니다. 보통은 홀로 쓰이고 dfn 태그로 으로 감싸주기도 합니다.


<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn><abbr title="World Wide Web">WWW</abbr></dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

`, `

태그는 윗첨자, 태그는 아랫첨자를 나타냅니다. 작은 글자를 표현하는 용도로는 사용하지 않으며 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용합니다.


<p>H<sub>2</sub>0</p>
<p>x<sup>2</sup>=4</p>

``

별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용합니다.

여러 요소를 묶어 컨트롤하기 위한 영역으로 id를 주거나 클래스를 사용하기도 합니다.

div와 마찬가지로 최후 수단으로 사용하세요.


...중략...
<style>
#명언 {
    color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>

소스코드


<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <!-- 
            1. 시멘틱한 HTML 강조(기계가 이해할 수 있는 언어, SEO, 유지보수, 협업 등)
            2. HTML Living Standard
        -->
        <h1>hello world</h1>
        <h2>hello world</h2>
        <h3>hello world</h3>
        <h4>hello world</h4>
        <h5>hello world</h5>
        <h6>hello world</h6>
        <p>H<sub>2</sub>0</p>
        <p>x<sup>2</sup>=4</p>
        <p>
            <!-- 공백병합 -->
            Lorem 
            
            
            
            ipsum <br> 
            <br> 
            <br> 
            dolor sit amet 

            <a href="https://www.naver.com">click</a>
            <a href="https://www.naver.com" target="_blank">click</a>  
            <a href="./test.html">click</a>
            <a href="#move">click</a>
            <a href="./test.png" download>click</a>
        
            <strong>hello</strong> 
            adipisicing <b>elit</b>. 
            Quae <em>quisquam </em> 
            aperiam, <i> autem </i>, excepturi 
            <mark> corrupti </mark> architecto facilis saepe voluptatum, sit nulla quia voluptate at laudantium cupiditate iusto minima tempore consequatur!
        </p>
				<hr>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione accusantium inventore, quia, nisi natus necessitatibus, delectus consequatur eum vitae architecto numquam esse quae quasi consectetur debitis voluptatem nulla. Vero, consequatur?</p>
				<hr>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione accusantium inventore, quia, nisi natus necessitatibus, delectus consequatur eum vitae architecto numquam esse quae quasi consectetur debitis voluptatem nulla. Vero, consequatur?</p>
        <p id="move">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione accusantium inventore, quia, nisi natus necessitatibus, delectus consequatur eum vitae architecto numquam esse quae quasi consectetur debitis voluptatem nulla. Vero, consequatur?</p>
        <!-- 
            abbr : 준말 표현(NASA)
            kbd : 키보드
            pre : 있는 그대로
            code : 코드블록
            cite : 인용(q는 인용구, cite는 인용블록)
        -->
        <!-- 참고문서 1 : https://developer.mozilla.org/ko/docs/Web/HTML/Element -->
        <!-- 참고문서 2 : html.spec.whatwg.org, multipage -->
    </body>
</html>

7. Text-level semantics

`<br>`, `<wbr>`

`<a href="경로">`

`<b>, <strong>`

`<i>, <em>`

`<dfn>`

`<abbr>`

`<sup>, <sub>`

`<span>`

소스코드

7. Text-level semantics

<br>, <wbr>

<a href="경로">

<b>, <strong>

<i>, <em>

<dfn>

<abbr>

<sup>, <sub>

<span>

소스코드

`<br>`, `<wbr>`

`<a href="경로">`

`<b>, <strong>`

`<i>, <em>`

`<dfn>`

`<abbr>`

`<sup>, <sub>`

`<span>`