<br>vs<p>, semantic언어설명

요새 스크립트 언어들과 웹 서버 언어를 다 다시 배울려고 생활 코딩 강좌들을 보고 있어요 .

 

'줄바꿈'이 이 강의에 키워드였습니다. 

다음과 같이 정리할 수 있겠네요.

 

	장점	단점
<br>	-편하다.(태그를 감싸주지 않아도 됨) -원하는 만큼 줄바꿈 가능	- 단순 줄바뀜일 뿐 그 이상의 의미 없음
<p>	- <br> 보다 웹적으로 유의미하다.	- 줄바뀜에 대한 시각적인 제한 존재

 

참고로 2020.09 현재 tag의 빈도수는 다음과 같습니다.

 

https://www.advancedwebranking.com/html/ 

The average web page from top twenty Google results

 

강의에는 25개의 태그가 빈도가 높다고 했는데 28개인 걸 보니 과거보다는 좀 늘었다는 걸 알 수 있습니다. 

의미를 모르겠는 태그 <i> 가 있네요. 

확인해볼까요?

검색어는 다음과 같습니다. 

 

HTML i tag 

 

정의보다 먼저 예제를 확인해 추측해보겠습니다.

i 태그가 감싼 곳은 기울어져있네요! 

글자를 기우는 태그인가봅니다. 

이제 정의를 확인해볼까요?

 

 

Definition and Usage

The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Use the <i> element only when there is not a more appropriate semantic element, such as:

• <em> (emphasized text)
• <strong> (important text)
• <mark> (marked/highlighted text)
• <cite> (the title of a work)
• <dfn> (a definition term)

 

글씨를 강조하는 태그라고 합니다. 

즉 아이콘 요수를 만드는 태그인겁니다. 

 

그저 글씨를 강조할 뿐인데 왜 이리 많이 쓸까가 궁금해서 더 찾아봤습니다. 

참고로 <i> 와 유사한 <span> 이 있는데 요새는 <i> 가 많이 쓰인다고 합니다. 왜일까요?

 

<i> 태그의 장점은 다음과 같습니다. 

 

-단어 자체가 짧고 직관적이다. (icon의 i)

과거에는 html 이 디자인 요소와 분리되면서 i 태그의 쓰임이 감소됐는데 요새는 다시 올라가고 있다고 합니다. 

 

우려되는 부분은 시맨틱(semantic) 태그의 사용이 점점 중요해지면서 다른 의미의 태그를 다른 용도로 사용하는 것에 대한 이슈가 있다고 합니다. 그리고 i태그는 스타일 목적의 태그이고 시맨틱 목적을 위한 태그가 아니라고 하네요. 

 

초보인 저는 semantic 태그가 뭔지 몰라서 이에 대해도 찾아보았습니다. 

 

검색어는 semantic tag 였습니다. 

 

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements

Semantic elements = elements with a meaning.

---

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

 

보자하니 semantic 태그는 정확한 의미를 가지고 있다고 하네요. 이게 아닌 경우 내용에 대해 알 수 없는데 semantic 은 어떤 내용이 있을지 태그를 통해 나타낸다고 합니다. 

 

 

 

이 태그를 통해 웹페이지의 영역을 구분할 수 있다고 합니다. 

 

 

 

다음과 같은 내용이 있는 걸 보니 HTML 의 semantic 언어는 section 이 자주 쓰이는 거 같아요.(아닐 수도 있습니다.)

 

 

다음처럼 세션을 나눠줍니다. 

 

 

 

 

 

 

 

 

 

 

이렇게 오늘도 다양한 정보를 알아가네요! 옆집컴공생이었습니다.