<br>, <wbr>
<br> 태그는 줄바꿈을 위한 태그입니다. <wbr> 태그도 간혹 사용하는데요. <wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것입니다.
<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>
<b>, <strong>
<b> 태그는 굵은 글꼴을 표현하고 싶을 때 사용합니다. 별 다른 의미는 없으며 오직 텍스트를 굵은 글씨로 표현하기 위한 용도이기 때문에 더 이상 사용하지 않는 요소입니다. <strong> 태그는 굵은 글꼴에 중요도를 더해
강조할 때 사용합니다. 중요도를 더 강조하고 싶을 때에는 strong을 중첩하기도 합니다.
<p> <strong>hello</strong> adipisicing <b>elit</b>. </p>
<i>, <em>
<i> 태그는 기울임 글꼴을 나타냅니다. HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주 언어가 한글이지만 영어로 표기되었을 경우), 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용합니다. <em> 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있습니다.
<p>시장안은 사람들의 활기로 가득차 있었다.</p> <p> 상인 : 이 상품은 현재 <em>30%</em> 할인중입니다! 나 : 아하 그렇군요! <i> '흠.. 왜 하필 지금 할인하는걸까?!' </i> 좀 더 구경하고 올게요! </p> <p>나는 상인의 의도를 의심할 수 밖에 없었다.</p>
<dfn>
현재 문맥에서 정의하고 있는 용어를 나타냅니다. dfn의 가장 가까운 부모가 <p> 혹은 <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>
<sup>, <sub>
<sup> 태그는 윗첨자, <sub> 태그는 아랫첨자를 나타냅니다. 작은 글자를 표현하는 용도로는 사용하지 않으며 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용합니다.
<p>H<sub>2</sub>0</p> <p>x<sup>2</sup>=4</p>
<span>
- 별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용합니다.
- 여러 요소를 묶어 컨트롤하기 위한 영역으로 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>