[UX/UI] HTML - 문장을 구성하는 태그

자주 사용하는 기호

 

문장을 강조

<!-- 주관적인 내용 강조 -->
<em>맛있었다</em>

<!-- 객관적인 사실 강조 -->
<strong>20,000원이다</strong>

<!-- 핵심내용 강조 -->
<mark>피자를 먹었다</mark>

 

단어의 정의

세계무역기구

<dfn title="마라케시 선언을 채택하고 WTO 설립협정 등에 서명함으로써 출범한 세계무역기구이다.">세계무역기구</dfn>

 

용어의 축약

WTO

<abbr title="World Trade Organization">WTO</abbr>

 

노래, 영화, 그림 등의 제목

다음은 소설 <cite>대도시의 사랑법</cite>의 한 부분입니다.

 

앞에있는 내용의 부가설명

가격 : 200,000원 (부가세 별도)

가격 : 200,000원 <small>(부가세 별도)</small>

 

루비주석

Hello안녕

<!-- 단어 또는 문장 위에 표시하기 -->
<ruby>Hello<rt>안녕</rt></ruby>

水수魚어之지交교

<!-- 글자마다 위에 표시하기 -->
<ruby>
水<rt>수</rt>
魚<rt>어</rt>
之<rt>지</rt>
交<rt>교</rt>
</ruby>

 

시간

<!-- 
  오늘, 내일, 2017년 1월 등 정규화되어있는 날짜 표현식 yyyy-mm-dd ... 이 아닌 경우에는 
  time 태그로 감싸준 후에 datetime에 정규화된 표현식을 작성해줍니다.
-->
<time datetime="2019-08-05">오늘</time>은 일요일입니다
<time datetime="2000-01-01">2000년 01월 01일</time>에 나무를 심었습니다

 

제목

h1~h6 태그 안에는 p 태그가 들어갈 수 없습니다

<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>

 

단락

p 태그 안에는 h1~h6 태그가 들어갈 수 없습니다

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type 
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including 
versions of Lorem Ipsum.</p>

 

구분선

이전 내용과 다른 내용이 등장할 때 두 내용을 서로 구분하기 위해 사용합니다

<hr>

 

주소, 연락처, 이메일주소

<address>서울시 서초구 효령로</address>
<address>010-0000-0000</address>
<address>know-one-by-one@gmail.com</address>

 

프로그래밍 코드

<pre>
  public class People {
      private final String name;

      People(String name){
          this.name = name;
      }
  }
</pre>

 

인용문장

안에 p 태그가 들어갈 수 있습니다

<blockquote 
cite="https://sports.news.naver.com/kfootball/news/read.nhn?oid=468&aid=0000544461" 
title="'호날두 노쇼' 관련, 경기 주최사 로빈장 대표 출국금지">
[스포츠서울 도영인기자] 이탈리아 세리에A 유벤투스 초청 친선경기를 주최한 더 페스타의 로빈 장 대표가 
출국금지 조치를 당했다. 서울지방경찰청 관계자는 5일 서울 종로구 청사에서 열린 기자간담회에서 “(호날
두 노쇼 논란과 관련한) 고발 건, 국민체육진흥공단에서 수사 의뢰온 사안에 대해 수사에 착수해 1명을 출
국 금지 조치했다”고 밝혔다. 경찰은 출국금지 대상자를 공개하지 않았지만 핵심 관계자인 주최사의 로빈 
장 대표로 알려졌다. 
지난달 26일 열린 유벤투스와 팀 K리그의 친선경기에서는 최소 45분 출전을 약속한 크리스티아누 호날두가 
결장해 ‘노쇼 논란’에 휩싸였다. 그로 인해 검찰 출신 변호사가 이번 경기를 총괄한 더 페스타와 유벤투스, 
호날두를 사기 혐의로 서울청 사이버수사대에 고발했다. 또한 경기 당시 해외 스포츠베팅업체 A보드 광고가
지상파 중계를 통해 방송된 것도 국민체육진흥공단이 서울청에 수사를 의뢰한 상태다.
<footer>출처 : <cite>네이버스포츠 &gt; 스포츠뉴스</cite></footer>
</blockquote>

 

출처 : know-one-by-one.tistory.com/20