HTML
HTML (HyperText Mark-up Language)
:프로그래밍 언어가 아닌 문서 정보를 표현하는 마크업 언어로 문서 내용 이외에 문서의 구조나 서식 같은 것을 포함한다.
html의 특성
1. 문서 구조의 형식을 갖는다. 웹페이지의 기본 뼈대를 잡는다
2. 태그(꼬리표)로 구성된다. 웹페이지의 각 공간에 그 공간을 설명하는 꼬리표를 붙인다고 생각하면 쉽다
-태그는 열림태그, 닫힘태그, attribute, content로 구성
-닫힘태그가 없는 빈 요소는 content를 갖지 않는다. 태그 자체가 하나의 content라 보면 된다
(ex. br, hr, img, input, link, meta 등)
-attribute는 태그를 설명한다. tag는 많은 attribute와 value("")를 갖는다. 여러 tag가 공통적인 attribute를 가질 수도 있다
(ex. id, class, hidden, lang, style, tabindex, title 등)
3. 크게 Head와 Body로 나뉜다
-head는 웹페이지의 환경을 설정하는 메타데이터(브라우저, 검색엔진 등에 사용)를 담는다
<html lang="ko" /> : 페이지의 주언어를 설명
<meta charset="UTF-8" /> : html 파일 인코딩 태그, 브라우저의 텍스트 읽기 방식을 입력함 (문자깨짐에러방지)
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> : SEO에 사용
<meta name="description" content="Web tutorials on HTML and CSS" /> : 웹페이지 설명
<meta name="author" content="Withlaw" /> : 웹페이지 저자
<meta http-equiv="refresh" content="30" /> : 30마다 새로고짐
<link rel="stylesheet" href="style.css" /> : 외부 리소스와의 연계 정보를 정의. 주로 HTML과 외부 CSS 파일을 연계에 사용
<title>문서 제목</title>
<style></style> : CSS style 직접 정의
<script src="script.js" /> : JS 정의 및 외부 JS파일 로드 (*위치 참고)
-body는 사용자에게 보여지는 contents를 담는다
*<script>는 일반적으로 </body> 앞에 온다
4. 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시된다
*참고
>모든 tag와 attribute를 전부 외울 필요는 없다. 어떻게 작성하는 지만 기억하면 된다
>좋은 html이란? 좋은 tag란?
인터넷 웹페이지의 사용 목적은 정보 취득이다. 따라서 웹사이트에게 가장 중요한 것은 검색엔진에 노출되는 것이다. 그래서 웹사이트는 SEO(검색엔진최적화)로 웹사이트를 검색하기 알맞은 구조로 조정하기도 한다. 검색엔진은 로봇 프로그램이 전세계 웹사이트 정보를 수집한다(크롤링). 그리고 웹사이트의 HTML코드를 통해 검색 키워드에 대응하여 인덱스를 만들어 둔다(인덱싱). 따라서 HTML 코드 만으로 검색 로봇에게 정보를 제공할 수 있어야 한다. 이때 사용되는 것이 Semantic element이다. Semantic elemen는 브라우저, 검색엔진, 개발자 모두에게 contents의 의미를 명확히 설명하는 역할을 한다. Semantic element로 구성된 웹페이지는 검색엔진에게 보다 의미론적이면서 효율적으로 문서 정보를 전달 할 수 있다. 그리고 이렇게 개발자가 의도한 의미를 내포하는 tag(Semantic element)의 사용은 코드의 가독성을 높이고 유지보수를 쉽게한다.
이를 통해 HTML 요소는 다시 크게 semantic elements와 non-semantic elements로 구분할 수 있다.
-non-semantic elements : div, span 등
(div는 컨텐츠를 담는 박스 혹은 컨테이너로 활용된다)
-semantic elements : form, table, img, header, h1, nav 등
(h1 요소는 특히 웹페이지의 중요한 제목으로 인식하여 인덱스에 포함시킬 확률이 높다)
*기타
- Path notation (경로 표기법):
<img src=“apple.jpg”> 해당 html 파일과 같은 폴더에 있는 apple.jpg 파일을 가져옴
<img src=“imagefolder/apple.jpg”> imagefolder이름의 폴더에 있는 apple.jpg파일을 가져옴
- <a href = “~” target = “_blank”> </a> : 링크를 새창에 띄움
- 'name' attribute : 이름 지정을 안하면 두 개의 태그를 같은 것으로 인식함
<input type = “radio” name=“option1” />
<input type = “radio” name=“option2” />
- 'required' attribute :
-
참고)
https://developer.mozilla.org/ko/docs/Web/HTML/Element
-html element