[HTML] HTML의 모든 것 - (4)Semantic element, Encoding, URL, HTML vs XHTML

• Semantic Elements
• HTML Encoding (Character Sets)
• HTML URL(Uniform Resource Locators)
• HTML vs XHTML

Semantic Elements

Semantic 요소는 의미가 있는 요소를 말한다.

Semantic 요소는 브라우저와 개발자 모두에게 명확하게 의미를 묘사하는 element이다.

Semantic 요소들을 사용해야하는 이유는, Semantic 웹을 사용하면 어플리케이션이나 기업, 커뮤니티간 데이터를 공유하고 재사용할 수 있게 해주기 때문이다.

 

Non -Semantic 요소의 예는 <div>, <span> 등이다. 이 태그만 보고서는 아무런 정보를 얻을 수 없다.

Semantic 요소는 <form>,<table>, <article> 등이 있다. 이러한 태그들은 태그의 이름만 보고 어떤 태그들인지 알 수 있다.

 

 

많은 웹 페이지는 <div id="nav">, <div class="header"> 등의 코드를 네비게이션이나 헤더, footer를 정의하기 위해 사용한다. HTML에서는 웹 페이지의 각기 다른 부분을 정의하는데 사용되는 Semantic 요소들이 있다.

 

<article> , <aside>, <details> ,<figcaption>, <figure>, <footer>, <header>,

<main>,<mark>,<nav>,<section>,<summary>,<time>

 

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

1. <section> Element

<section> element는 문서에서 구역을 정의한다.

섹션은 일반적으로 제목이 있는 주제별 콘텐츠 그룹이다.

웹 페이지에서는 일반적으로 구역을 "introduction", " content", "contant information"으로 구분한다.

 

<section>
	<h1>WWF</h1>
    <p> Contents,,,,,,,</p>
</section>

 

2. <article> Element

<article> element는 해당 문서나 페이지와는 완전히 독립적으로 구성할 수 있는 요소들을 정의할 때 사용한다.

포럼의 포스트, 블로그 포스트, 보도 기사, 논평 등이 포함될 수 있다.

<article>
	<h2>Title of new</h2>
    <p> Cotents,,, </p>
</article>

 

 

<article>, <section>을 서로 중첩시키는 방법이 정해져있지 않다!

그래서 우리는 <article>안에 <section>이 중첩되어있는 웹 페이지도 볼 수 있고, <section> 안에 <article>이 포함되어있는 웹 페이지도 볼수 있다.

 

3. <header> Element

<header> element는 문서나 특정 섹션의 헤더를 정의할 때 사용한다.

<header>에는 heading 요소들(<h1>~<h6>), 로고나 아이콘, 작성자 정보 등이 들어간다.

 

<header> 태그는 하나의 HTML 문서에 여러개가 들어가도 된다.
하지만, <footer>, <address>,또다른 <header> 내부에 위치하면 안된다!!!

 

<article>
	<header>
    	<h1> Title </h1>
        <p> Message.. </p>
    </header>
</article>

 

4. <footer> Element

<footer> element는 문서의 특정 세션의 footer를 정의할 때 사용된다.

<footer>에는 주로 작성자 정보, 저작권 정보, 내용 정보, 사이트맵, 맨 위로 올라가는 링크, 그 밖의 문서와 관련된 정보들이 들어간다.

 

<footer>
	<p> Author : 김크크 </p>
	<p> <a href="rlazmzm@example.com"> rlazmzm@example.com </a></p>
</footer>

 

5. <nav> Element

<nav> 태그는 네비게이션 링크들의 집합을 정의할 때 사용된다. 

<nav>안에는 메뉴, 목차, 인덱스 등이 일반적으로 포함된다.

 

스크린 리더는 <nav> 태그를 사용해 콘텐츠의 초기 렌더링을 생략할지 정한다.

 

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

 

6. <aside> Element

<aside> element는  페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의할 때 사용한다.

 

<h2>과메기</h2>
<p>과메기는 경상북도 포항 지역의 특산물로 청어나 꽁치를 추운 겨울 동안 얼렸다 녹였다를 반복하여 반건조시킨 음식이다.</p>
<aside>
    <h4>포항</h4>
    <p>포항시는 대한민국 경상북도 동해안에 위치하고 있으며, 포항시 중심을 관통하는 형산강이 영일만에 유입되면서 
        넓은 충적평야를 형성하고 있다.</p>
</aside>

<aside>에 css 적용

7. <figure> & <figcaption>

<figure>은 그림, 다이어그램, 사진, 코드 등 자체에 포함된 내용이 있는 것들을 표현할때 사용한다.

<figcaption>은 <figure>에 포함되는 그림 등의 제목을 정의하는데 사용된다. <figure> 내부에 포함되어야 한다!

<figure>
	<img src="pic.jpg" alt="Trulli">
    <figcaption> pic title </figcaption>
</figure>

---

HTML Entities

일부 문자는 HTML에 예약되어 있다.

 

예를 들어, 어떤 것 보다 크고 작음을 표시하는 의미로 '<'나 '>' 를 사용하면, HTML에서는 이를 태그 (<tag>) 와 혼동할 수 있기 때문에, HTML 에서는 대소를 표현하는 문자를 따로 정해두었다.

작음을 표시하는 '<' 는  &lt; 혹은 &#60; 로 써야한다.

&lt; 로 표시한 것을 entity name이라고 한다. entity 이름을 사용하는 것은 장단점이 존재한다.

 

장점은 외우기 쉽다는 것이고, 단점은 브라우저가 모든 entity 이름을 지원하는 것은 아니기에, 특정 entity 이름은 원하는대로 브라우저에 표시되지 않을 수 있다.

 

 

HTML에서는 공백 문자도 한 개 이상은 표현하지 않는다.

공백 문자를 여러개 표현하고 싶다면 &nbsp; 를 사용하면 된다.

 

이외에도 HTML에서는 다양한 기호와 이모티콘들도 entity로 제공한다. 자세한 내용은 이곳을 참고하자.

 

---

 

HTML Encoding (Character Sets)

HTML 페이지를 정확하게 표시하기 위해선 브라우저는 사용할 character set을 알아야한다.

Character set에는 ASCII부터 UTF-8까지 여러가지의 character set이 존재한다.

 

ASCII는 최초의 문자 인코딩 standard였다. 아스키는 인터넷에서 사용할 수 있는 128개의 문자를 정의했다.

숫자 (0~9), 영문자 (AZ), ! $ +-() @ <>

 

ISO-8859-1는 HTML4의 default character set이었다. 이 character set은 256개의 문자를 지원했고, UTF-8을 지원한다.

 

ANSI는 윈도우의 오리지널 character set이었다. ISO-8859-1보다 32개의 문자가 더 있다는 사실말고는 동일하다.

 

UTF-8은 거의 전세계의 모든 언어와 기호들을 지원하는 character set이다. HTML5도 웹 개발자들에게 UTF-8 character set을 사용할 것을 권장한다.

 

 

---

HTML URL(Uniform Resource Locators)

URL은 웹 주소의 다른 말이다. URL은 단어(e.g. w3schools.com)나 IP 주소(e.g. 192.68.20.50) 로 표현될 수 있다.

대부분의 사용자들은 이름으로 된 주소를 검색에 사용한다. 이유는 기억하기 쉽기 때문이다.

 

URL - Uniform Resource Locator

URL은 웹 상에서 문서나 데이터의 주소로 사용된다.

웹 브라우저는 이러한 URL을 사용해서 웹 서버에 페이지를 요청한다. 

 

URL이 따르는 syntax 규칙은 아래와 같다.

scheme://prefix.domain:port/path/filename

• scheme - 인터넷 서비스의 타입을 정의한다. (http 혹은 https를 주로 사용)
• prefix - 도메인의 prefix를 정의한다. (http의 default는 www)
• domain - 도메인의 이름을 정의한다. (e.g w3school.com)
• port - 호스트의 포트 번호를 정의한다. (http default는 80)
• path - 서버의 path를 정의한다. (생략된 경우는 root directory)
• filename - 자원이나 문서의 이름을 정의한다.

 

URL Schemes

Scheme	Short for	Used for
http	HyperText Transfer Protocol	Common web pages. Not encrypted(암호화)
https	Secure HyperText Transfer Protocol	Secure web pages. Encrypted
ftp	File Transfer Protocol	Downloading or uploading files
file		A file on your computer

 

URL Encoding

URL은 ASCII character set을 이용해서만 보낼 수 있다. 따라서 URL이 ASCII 가 지원하지 않는 문자를 포함한 경우 다른 문자로 변경해야한다.

 

URL 인코딩은 ASCII가 아닌 문자를 인터넷을 통해 전달할 수 있는 방식으로 변경한다. ASCII가 아닌 문자를 %뒤에 16진수로 변환한다. 또한 URL은 공백을 포함할 수 없기 때문에, URL 인코딩은 공백을 +기호 또는 %20으로 대체한다.

 

Hello Günter를 URL에 붙여서 보내려고하면, URL 인코딩이 이런식으로 변경한다.  text=Hello+G%C3%BCnter

 

 

---

HTML vs XHTML

 

What is XHTML?

XHTML은 EXtensible HyperText Markup Language의 약자이다. 더 엄격하고, 조금더 XML 기반의 HTML 버전이다.

또한 XHTML은 xml 애플리케이션으로 정의된 HTML이고, 모든 메이저 브라우저에서 지원한다.

 

Why XHTML?

XML은 모든 문서가 알맞은 형식으로 작성되어야하는 마크업 언어이다. XTHML은 HTML이 XML처럼 다른 데이터 포맷들에 대해 더 유연하고 더 확장 가능하도록 개발되었다. 

브라우저는 문서의 markup에 에러가 있더라도 이를 무시하고 웹 사이트에 화면을 표시하려고 한다. 이에 XHTML은 HTML에 비해 에러 handling에 좀 더 엄격하다.

 

The Most Important Differences from HTML

1. <!DOCTYPE> 이 필수!!!

2. <html>, <head>, <title>, <body> 태그도 필수!!

3. Element간의 중첩이 적절히 이루어져야함.

4. 모든 element들은 닫혀야한다.

5. 모든 element들은 소문자로 작성되어야한다.

6. Attribute 이름들도 반드시 소문자로 작성되어야한다.

7. Attribute value들은 반드시 ""에 감싸져 있어야한다.

8. Attribute 최소화는 금지!

 

---

이 글은 W3SCHOOL을 참고하여 작성하였습니다.