내용강조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 정의 요소들</title>
</head>
<body>
<h1>텍스트 정의 요소들</h1>
<p>문단중 일부를 <b>강조</b>하고자 할 때 사용하는 <i>태그들</i></p>
</body>
</html>b 태그는 볼드체(굵은 글씨체)로 꾸며주고 i 태그는 이탤릭체로 보이게 해준다. 하지만 강조의 의미는 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 정의 요소들</title>
</head>
<body>
<h1>텍스트 정의 요소들</h1>
<p>문단중 일부를 <b>강조</b>하고자 할 때 사용하는 <i>태그들</i></p>
<p>문단중 일부를 <strong>강조</strong>하고자 할 때 사용하는 <em>태그들</em></p>
</body>
</html>strong, em 태그도 b, i 태그와 화면에서는 동일하게 보이지만 실제로 강조의 의미를 전달하는 태그이다. 강조의 의미가 있다는 것은 해당 페이지가 검색엔진에 검색될 확률이 높다는 것이다. 검색엔진에 노출이 잘 되는 웹사이트를 만드려면 태그의 쓰임새에 맞도록 작성하는 것이 좋다.
약어
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 정의 요소들</title>
</head>
<body>
<h1>텍스트 정의 요소들</h1>
<p>문단중 일부를 <b>강조</b>하고자 할 때 사용하는 <i>태그들</i></p>
<p>문단중 일부를 <strong>강조</strong>하고자 할 때 사용하는 <em>태그들</em></p>
<hr/>
<p><abbr title="HyperText Markup Language">HTML</abbr>은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.</p>
</body>
</html>약어를 사용할때는 abbr 태그를 사용한다. 약어에 대한 풀이는 title 속성의 값으로 설정하면 된다. title 속성값은 화면에 보이지는 않지만 HTML 글자 위에 마우스를 올리면 title 속성에 설정한 텍스트가 보인다. 화면에 보이지도 않는데 굳이 abbr 태그를 사용하여 약어를 기술한 이유는 검색엔진에 노출될 확률을 높이는 것이다. 그냥 HTML 이라는 텍스트만 있는것보다 abbr 태그를 사용하여 약어를 사용하면 HyperText 라는 키워드로 검색하는 사용자도 해당 웹페이지가 노출되게 하기 위함이다.
용어의 정의
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 정의 요소들</title>
</head>
<body>
<h1>텍스트 정의 요소들</h1>
<p>문단중 일부를 <b>강조</b>하고자 할 때 사용하는 <i>태그들</i></p>
<p>문단중 일부를 <strong>강조</strong>하고자 할 때 사용하는 <em>태그들</em></p>
<hr/>
<p><abbr title="HyperText Markup Language">HTML</abbr>은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.</p>
<hr/>
<p><dfn title="텍스트 대신에 그 자리에 이미지를 보여지도록 하는 기법">IR 기법</dfn>을 사용하면 검색에 용이합니다.</p>
</body>
</html>전문용어를 풀어서 설명할때 dfn 태그를 사용하고 해당 용어의 설명은 title 속성의 값으로 작성한다. dfn 태그도 title 속성에 있는 설명을 이용하여 검색에 용이하게 하기 위함이다. abbr 태그와 마찬가지로 화면에 보이지는 않고 마우스를 갖다대면 설명이 나타난다.
인용문
<blockquote cite="https://www.wah.or.kr:444/Accessibility/define.asp">
<p>월드 와이드 웹 (World Wide Web) 을 창시한 팀 버너스리(Tim Berners-Lee)는 웹이란 장애에 구애 없이
모든 사람들이 손쉽게 정보를 공유할 수 있는 공간이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이
누구나 접근할 수 있도록 제작하여야 한다고 하였다.</p>
<cite>팀 버너스 리</cite>
</blockquote>내가 직접 작성한 것이 아니라 타 사이트나 외부의 소스와 같은 인용문을 가지고 올때는 출처를 남겨주는 것이 좋다. 이때 blockquote 태그를 사용하면 된다. blockquote 의 cite 속성값으로 출처를 적어주고 cite 태그에는 이름, 작품명 등을 명시해준다. cite 속성값을 설정하더라도 눈에 보이는 변화는 없지만 검색엔진이 해당 출처 정보를 검색에 사용할 수 있다.
<q cite="https://www.wah.or.kr">
장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간
</q>짧은 문장을 인용하는 경우에는 q 태그를 사용하고 출처는 cite 속성에 명시하면 된다.
'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글
| 6. 제목, 문단, 구분선, 정형화된 텍스트 (0) | 2023.06.08 |
|---|---|
| 5. HTML5 섹셔닝 (시맨틱 태그) (0) | 2023.06.07 |
| 4. div 요소로 작성하는 문서의 그룹화 (0) | 2023.06.07 |
| 2. 블록 및 인라인 레벨 요소 (0) | 2023.06.04 |
| 1. HTML 의 구조 (0) | 2023.06.03 |