도순씨의 코딩일지
Web :: HTML Syntax, HTML Semantic Elements 본문
🌼 HTML의 신택스
HTML은 마크업 언어(Markup language)로 분류됩니다. 마크업 언어는 태그를 이용하여 문서를 정의하는 방법입니다. 하나하나 더 자세하게 살펴보도록 합시다. 마크업(markup) 은 내용에 대한 정보를 표현하는 방식입니다.
XHTML은 HTML과 동등한 표현 능력을 지녔지만 훨씬 더 엄격한 규칙을 가졌습니다. XHTML의 목적은 구문 요류가 있는 웹 페이지를 막도록하여 페이지 렌더링을 쉽게 하는 것입니다. XHTML의 기본적인 룰은 다음과 같습니다.
💡 소문자로 된 태그 이름
💡 모든 태그는 닫혀 있어야 한다.
XHTML은 두 가지 버전이 있습니다 바로 XTML 1.0 strict와 XHTML Transitional 입니다. strict 버전은 엄격한 표준으로 비표준 규격을 사용할 수 없습니다. transitional 은 strict보다 조금 더 관용적입니다.
HTML 유효자(HTML validators) 는 XHTML transitional 또는 strick에 따라서 웹 페이지의 마크업을 입증합니다.
XHTML 2.0은 2000년대 중반에 제안되었습니다. 이는 혁명적이고 필수적인 변화를 HTML에 불러 일으켰습니다. 브라우저는 유효하지 않은 마크업에 덜 관용적으로 변화하였습니다. 2009년, XHTML에 대한 작업을 중단하고 HTML5을 시행하기 시작했습니다. HTML5의 세 가지 주요 목표는 다음과 같습니다.
💡 브라우저가 유효하지 않은 마크업을 어떻게 처리해야는지 명시
💡 프레임워크 제공
💡 기존 웹과 역호환
HTML5은 유명한 브라우저 제조사에서 수용하고 있습니다. 하지만 모든 브라우저에서 HTML5를 수용하고 있는 것은 아닙니다. HTML5는 시간이 지남에 따라 점점 더 발전하고 있습니다. HTML 문서는 텍스트 내용과 HTML 요소로 구성되어 있습니다. HTML은 텍스트나 다른 요소를 포함할 수 있으며, 비어있을 수도 있습니다. HTML 요소도 속성을 포함할 수 있는데, HTML의 속성은 자세한 정보를 제공하는 이름과 값의 쌍으로 이루어져 있습니다. XHTML에서는 속성값을 따옴표로 묶어야 했지만 HTML5에서는 선택사항으로 바뀌었습니다.
HTML의 태그는 다음과 같습니다.
💡 이미지 : <img>
💡 링크 : <a>
💡 리스트 : <ul>, <ol>, <li>
💡 헤딩(제목 지정) : <H1>, <H2>, ... , <H6>
💡 메타데이터 : <meta>
HTML 요소는 중첩되기도 합니다. 아이 안에 포함된 모든 원소는 부모 원소의 자손이라고 합니다. 마찬가지로 자식들도 다양한 조상을 가질 수 있습니다.
계층 구조가 올바르게 구성되기 위해서는 브라우저에서 각 HTML 중첩요소가 적절하게 중첩되어야 합니다. 예를 들어 자식 종료 태그는 부묘 종료 태그보다 먼저 발생해야 합니다.
🌼 SEMANTIC MARKUP
HTML 문서는 문서의 구조에 집중해야한다는 공감대가 형성되었습니다. 콘텐츠가 브라우저에 배포될 때 콘텐츠가 어떻게 보여하는지에 관련된 정보는 CSS(Cascding Style Sheets)에 남겨두는 것이 좋습니다.
지난 10년 동안 HTML 문서는 문서의 구조에만 초점을 맞추어야 한다는 생각에 대해 강력하고 폭넓은 공감대가 형성되었다.
콘텐츠가 브라우저에서 배포될 때 콘텐츠가 어떻게 보여야 하는지에 대한 정보는 CSS(Cascading Style Sheets)에 남겨두는 것이 가장 좋습니다. HTML 문서는 어떻게 내용을 시각적으로 표시하는지 기술하지 않고 단지 그것의 내용을 기술해야 합니다. 프리젠테이션 중심의 마크업을 없애고 의미 HTML 마크업을 작성하는 것은 다음과 같은 이점을 가집니다.
💡 유지보수성 : 업데이트와 변경이 쉽습니다.
💡 속도 : 다운로드가 더 빠릅니다.
💡 접근성
💡 검색 엔진 최적화 : 검색 엔진에게 더 나은 명령을 제공합니다. 사이트에서 어떤 것이 중요한지 판별해줍니다.
🌼 HTML의 구조
<title>은 내용에 대한 설명을 제공합니다. 제목은 브라우저 창 내에 표시되지 않고, 브라우저의 창 이름 또는 탭 이름으로 표시됩니다.
다음 코드를 보고 HTML 요소를 하나씩 살펴보도록 합시다. 숫자가 부여되어 있으니, 해당 내용이 궁금하신 분은 숫자로 이동해서 발췌독을 하시는 것도 좋을 것 같습니다.
1. DOCTYPE (Document Type Definition)
DOCTYPE은 처리하려는 문서 유형을 브라우저에 알립니다. 문서 내에 포함된 HTML의 버전은 표시되지 않습니다. 단순히 HTML이 포함되어 있음을 명시합니다.
2. HTML
HTML5sms <html>, <head>, <body>를 사용하지 않아도 됩니다. 하지만 XHTML에서는 그것이 필수입니다. <html> 요소는 루트 요소라고 불리기도 하는데, 그 이유는 다른 모든 HTML 요소와 일치하기 때문입니다.
3&4 . Head & Body
HTML 페이지는 head와 body 두 부분으로 나뉩니다.
<head>는 문서에 대한 설명이 포함되어 있으며 <body>에는 브라우저에 표시할 내용이 포함되어 있습니다.
5. meta
head는 여러 요소를 포함하고 있습니다. 그 중 하나는 <meta>요소입니다. 위 예제는 문자 인코딩을 'UTF-8'로 지정했습니다.
6. href
외부의 CSS 스타일 파일을 특정해주었습니다.
7. script
자바 스크립트 파일을 참조하고 있습니다.
🌼 예시를 통한 이해
1. Headings
HTML은 6개의 제목 요소를 제공합니다. 제목은 작가가 독자에게 문서의 구조를 알리기 위해 사용합니다. 브라우저는 각 레벨에 대한 자신의 기본 스타일을 가지고 있습니다. 하지만 이러한 요소들은 CSS에 의해 쉽게 수정될 수 있습니다. 숫자가 낮을 수록(1<6) 더 중요한 표제어라는 것을 나타냅니다. 의미론적으로 정확한 제목 수준을 선택해야 합니다. 글씨 굵기나 크기에 의해서 수준을 택해서는 안됩니다.
2. Paragraphs
Paragraphs는 HTML 문서에서 가장 기본적인 단위입니다. <p> 태그는 다른 인라인 HTML 요소를 포함할 수 있습니다. 인라인 HTML 요소는 문단을 중단하지 않고 텍스트의 규칙적인 흐름의 일부인 HTML 요소를 뜻합니다.
3. Links
링크는 <a> 요소를 사용하여 만들어집니다. 링크는 두 가지 메인 요소를 가지고 있는데, destination과 label입니다.
우리는 앵커 요소를 사용하여 광범위한 링크를 만들 수 있습니다.
💡 외부 사이트(또는 외부 사이트의 이미지 또는 영화와 같은 개별 리소스에 대한 링크)
💡 현재 사이트의 다른 페이지 또는 리소스에 대한 링크
💡 현재 페이지의 다른 위치에 대한 링크
💡 다른 페이지의 특정 위치에 대한 링크
💡 사용자의 전자 메일 프로그램을 사용하기 위한 링크
💡 브라우저가 자바 스크립트 기능을 실행하기 위한 링크
예전에는 "Click Here" 이라는 라벨이 붙은 링크가 웹의 주요요소였습니다. 오늘날 이러한 연결고리는 사용자를 불편하게 만듭니다. 링크가 어디로 연결되어 있을지 알 수 없기 때문이죠. 따라서 이런 링크는 설명이 잘 묘사되어야 합니다. 예를 들어서 "레이스 결과" 또는 "경주 결과를 보려면 여기를 클릭하십시오" 이런식으로 상황을 자세하게 설명해주어야 할 필요가 있습니다.
만약 참조하는 페이지가 외부의 사이트라면 다음과 같은 완전한 참조가 포함되어야 합니다.
💡 프로토콜 (http:// , https://)
💡 도메인 이름
💡 경로
💡 파일 이름
사이트 내의 파일을 성공적으로 참조할 수 있어야 하는데, 이때문에 'relative referencing' 에 대해 배워야 합니다. HTML 문서와 동일한 서버에 있는 리소스를 참조할 때 'briefer relative referencing' 을 사용할 수 있습니다. URL에 "http://"가 포함되어 있지 않으면 브라우저에 현재 서버를 요청합니다.
사이트에 대한 모든 자원들이 동일한 디렉토리 및 폴더 내에 있는 경우 파일 이름을 통해 해당 리소스를 참조할 수 있습니다. 그러나 대부분의 사이트는 하나의 디렉토리 내에 모든 파일을 저장하기에는 대용량의 파일을 포함하고 있습니다. 이런 상황에서 파일 이름과 경로 이름이 필요합니다. 경로 이름은 서버에서 파일을 찾을 위치를 알려줍니다.
웹의 경로 이름은 Unix 규칙을 따릅니다.
💡 /(슬래시) : 디렉토리 이름을 구분하고 파일 이름에서 분리하는데 사용
💡 ..(점 두개): 디렉토리 트리에서 현재 디렉토리를 "above"로 참조하기 위해서 사용
4. Inline Text Elements
인라인 요소들은 텍스트의 흐름을 방해하지 않습니다. HTML5에서는 30개가 넘는 요소를 정의하고 있습니다.
e.g., <a>, <br>, <em>, <strong>
5. Images
<img> 태그가 이미지를 표현하는 가장 오래된 방법이지만, 이것이 유일한 방법은 아닙니다. 배경, 패턴, 로고와 같은 장식하는 이미지같은 경우에는 CSS에 속하게 하는 것이 바람직합니다. 그러나 제품 상세페이지의 이미지처럼 이미지가 내용일때는 <img> 태그를 사용하는 것이 바람직합니다.
6. Divisions
<div> 태그도 컨테이너 요소로서 콘텐츠의 논리적 그룹을 만드는데 사용합니다. 현재 CSS 기반 레이아웃에서 자주 사용되며, 검토에 사용됩니다.
9. Character Entities
키보드를 통해 쉽게 입력할 수 없는 방법이 없거나 HTTML에 예약된 뜻이 있는 특수문자입니다. 이들은 엔티티 이름이나 엔티티 번호를 사용하여 HTML 문서에서 사용될 수 있습니다.
e.g.)  , ©(copyright)
10. Lists
HTML은 세 종류의 리스트를 제공합니다.
💡 Definition lists: 특정한 순서가 없는 항목 모음. 기본적으로 브라우저에 의해 글머리표 목록으로 렌더링.
💡 Ordered lists: 설정된 순서가 있는 항목들. 기본적으로 브라우저에 의해 번호가 매겨진 목록으로 렌더링.
💡 Definition lists: 이름과 뜻의 쌍. 자주 사용되지 않는다. e.g.) FAQ 목록
🌼 HTML SEMANTIC ELEMENTS
대부분의 웹사이트들은 <div> 요소로 가득 차있습니다. 이 요소는 마크업을 혼란하게 하고 수정하기 어렵게 만들게 됩니다. 개발자들은 id를 사용하거나 클래스 이름을 사용함으로써 단점을 줄이도록 노력합니다.
1&10. Header & Footer
Header는 다음과 같은 항목을 포함하고 있습니다.
💡 사이트 로고
💡 제목(부제 포함)
💡 수평 네비게이션 바
💡 하나 또는 두개의 수평 배너
Footer는 다음과 같은 항목을 포함하고 있습니다
💡 네이게이션의 작은 텍스트 버전
💡 저작권 표시
💡 사이트의 개인정보보호관련 정책
💡 트위터 피드 또는 다른 SNS로의 링크
<header>와 <footer>는 <article>과 <section>같은 다른 HTML5 컨테이너에도 사용될 수 있습니다.
2. Heading Groups
<hgroup>은 그룹과 관련된 헤딩들을 묶어주는 역할을 합니다.
3. Navigation
<nav> 요소는 동일한 페이지 내의 다른 페이지 또는 다른 부분에 대한 링크를 포함하는 페이지 구역입니다. <nav> 요소는 major navigation 블록에 사용됩니다.
5&6. Articles and Sections
<article>는 문서나 사이트의 독립된 부분을 구성하는 한 부분입니다. 예를 들어 잡지, 신문기사, 블로그가 있습니다.
<section>은 문서의 한 부분을 나타내며 제목이나 제목을 가진 요소입니다. <section>은 <article>보다 더 넓은 요소입니다. <article>에는 독립적으로 읽거나 소비될 수 있는 내용이 포함되어야 합니다.
<section>과 <div> 의 차이점에 대해서 살펴보겠습니다. <section>은 일반적인 컨테이너 요소가 아닙니다. HTML은 그러한 용도를 위해 <div>를 이미 사용하고 있습니다. 스크립트의 전체적인 스타일링을 위한 목적이나 편안함을 위해서는 <div>를 사용하는 것이 적합합니다. <section>을 사용해야 하는 경우는 문서의 아웃라인에서 명시적으로 요소의 내용이 정렬되는 것이 적절한 경우입니다.
7&8. Figure and Figure Captions
W3C는 <figure> 요소를 이미지뿐 아니라 문서가 다른 위치로 이동할 수 있는 모든 경우에 사용해도 된다고 명시하고 있습니다.
모든 이미지를 넣는 데 있어서 <figure> 요소를 사용하는 것은 바람직하지 않습니다. 대신 이미지가 캡션을 가지고 있고 그림이 콘텐츠에 있어서는 필수적이지만 페이지가 상대적으로 중요하지 않은 상황에서 <figure>를 사용해야 합니다.
9. Aside
<aside>는 <figure>와 페이지의 메인 콘텐츠와 별개의 내용을 표시하기 위해 사용된다는 점에서 비슷합니다. 하지만 <figure>은 페이지에서는 안 중요하지만 전체적으로 보았을 때 중요한 정보를 나타내기 위해서 사용되는 반면, <aside>는 페이지의 섹션과 살짝 관련된 컨텐츠와 관련이 있습니다. <aside>는 사이드바, 광고 이미지 등 덜 중요한 요소들을 위해 사용됩니다.
📚 출처
Randy Cannolly(2014), Fundamentals of Wep Development, Peason Higher Education.
https://jang8584.tistory.com/249
DocType 설명. xhtml xhtml 차이
1. DocType 웹표준을 지키는 문서타입이 여러 종류가 존재. HTML, XHTML 등이 있고, 각 문서들의 차이는 엄격하게 보냐 느슨하게 보냐의 차이 (내용 수정: 2019.01.27 : XHTML과 HTML의 차이점을 설명을 보충��
jang8584.tistory.com
'𝐏𝐑𝐎𝐆𝐑𝐀𝐌𝐌𝐈𝐍𝐆 > 𝐖𝐄𝐁' 카테고리의 다른 글
| Web :: CSS (0) | 2020.10.01 |
|---|---|
| Web :: 웹, 인터넷 프로토콜, 클라이언트-서버모델, 인터넷, DNS, URL, HTTP, 웹서버 (0) | 2020.09.06 |
