'홈페이지제작/HTML'에 해당되는 글 33건

.

HTML 의 역사를 살펴봐서 알수 있듯이 기존의 HTML 은 단순 Markup Language 로서 한계가 명확했으며,

그런 HTML 의 한계는 HTML 5 의 등장으로 기존에 가졌던 HTML 의 기능적 한계를 커버할 수 있다.

발전된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기존의 Markup language 이상의 의미를 가지게 되었다.

HTML 의 한계로 인해서 유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML만으로는 표현이 불가능한, 너무도 많은? 외부기술에 의존하게 되었다.

이로 인해 웹의 접근성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방?시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다.

JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application으로써의 웹의활용도를 극대화 시킬것이다.

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.)

플러그인과 엑티브엑스의 설치로 인한 취약해진 보안도 걱정하지 않아도 될 것이다.

순수한 웹환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다.

마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 환경에서의 주도권을 갖기위해 노력하고 있다.

HTML 5 를 시작해야하는 이유가 이 정도면 충분한지요?

HTML 5 의 디자인 원칙

다음은 HTML 5 은 이러한 디자인 원칙을 가지고 만들어지고 있다고 한다.

•호환성

•컨텐츠의 호환성

•이전 브라우저와의 호환성

•기능의 재사용

•이용 방법의 호환성

•혁신보다는 발전을 우선함

•실용성

•상호 운영성

•보편적 접근성

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)

위 내용들을 간략하게 살펴보면 아래와 같다.

컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지만 문제없이 이용가능해야한다.

이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.

기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.

이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.

혁신보다는 발전을 우선함 : HTML 5 이라는 Version UP 이 새로운 MarkUP Language 를 구현하는 것이 아닌 기존에 존재하던 HTML 을 개량한다.

실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.

상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.

보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

http://html5test.com/index.html

HTML5 표준화 일정

다음은 HTML 5 표준화 일정이다.

•2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범

•Web Form 2.0, Web Applications 1.0

•2007.03 : 새로운 HTML 워킹 그룹 생성

•2009.10 : W3C에서 XHTML 전환 실패를 인정함

•2011.05 : HTML5 최종 초안 (Last Call Working Draft)

•2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료

•2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영

•2014.Q2 : HTML5 최종 표준안 (Recommendation)

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

오늘은 홈페이지 뿐만아니라 블러그 등을 운영할 때
최소한 알아야 할 HTLM 기본지식과 이를 위한 HTML편집기에 대하여 학습합니다.

웹을 하기 위해서는 꼭 필요하기 때문이다.

 애초에 우리가 다루는 언어는 웹 사이트에 관한 언어이기 때문에 깊게 들어가지는 않아도 기본적인 배경은 알고 있어야 한다고 생각했다.

웹 주소의 의미

보통 사이트 주소의 www.itworldkorea.tistory.com의 www는 "World wide web"의 약자다. 세계를 엮는 거미줄과 같은 의미... 목적 또한 이와 같다. 애초에 모든 사이트의 최초 목적은 정보의 공유!

우리가 인터넷을 사용하다 보면 자주 접하는 단어들이 있다. IP, DNS, Port. Protocol(프로토콜).. 자주 접하지만 솔직히 의미는 생소하다. 과연 뭘까?

보통 사이트 주소는 이렇게 되어 있다. http://itworldkorea.tistory.com

http:// <- 이 부분을 프로토콜 이라 한다. 프로토콜은 통신 규약이라고 보면 된다. 우리가 인터넷을 사용할때 사용자의 컴퓨터와 웹 사이트가 구축된 서버 컴퓨터 사이의 통신이 있을것이다. 이때 이 통신들 끼리 미리 규칙을 만든것을 프로토콜이라 한다. http는 '정보만' 받는다. FTP는 '파일도' 받는다. 이런 형식으로 되어 있다.

따라서 보통 주소창에 직접 쳐서 다운 받는 경우 ftp://로 시작 한다. 경험한 사람도 있을 것이다.

IP는 뭘까? 보통 인터넷 상에 컴퓨터 주소를 IP라 한다. 즉 어떤 건물의 몇동 몇 호가 있다면 몇 호에 해당하는게 IP라 할 수 있다. 여기서 보통의 가정집 IP는 그 수가 너무 많아 DHCP라는 규약을 같이 사용하는데 이 DHCP가 각 가정 집에 IP를 분할에서 할당해준다. 정도만 알아도 무방하다.

이 IP 주소를 인간이 알아보기 쉽게 문자로 바꾼것을 DNS라 한다. 위 주소에 itworldkorea.tistory.com 이 이에 해당된다.

Port는 같은 서버내의 프로그램 주소이다. 보통 기준이 80으로 되어 있다. 80이면 생략이 가능하다. 실제로 주소후 :80을 붙이면 제대로 사이트에 들어가지지만 포트번호를 : 470 이런식으로 다르게 지정하면 사이트에 들어가지 못하는 현상을 확인 가능하다.

HTML 편집기

Html 편집기는 거창하게 갈거 없이 말 그대로 HTMl을 작성할 수 있는 편집기를 말한다.

간단하게 노트패드 프로그램을 써도 되고. 기타 좋은 편집기들이 많으니 하나 골라서 사용하면 된다.

대표적인 몇개를 소개 하겠다.

http://www.editplus.com/kr/

에디트 플러스라는 프로그램으로 우리나라 사람이 만든 편집기 이다. 꽤나 사용하는 유저가 많다. 30일 평가판으로 제공된다.

http://software.naver.com/software/summary.nhn?softwareId=GWS_000218&categoryId=A0100000

노트패드 + 라는 편집기로 html5를 코딩하는 무료 편집기중 굉장한 호평을 받고 있다. 무료

http://aptana.com/

개발자들이 좋아하는 강력한 프로그램 입니다.

https://www.sublimetext.com/

서브라임 텍스트 또한 인기있는 프로그램으로 이 편집기를 이용한 강의가 꽤나 있습니다.

각 사이트와 네이버 검색을 통해 자신에게 맞는 프로그램을 찾아서 사용해보세요

자 이제 본격적으로 HTMl 공부에 대한 기본 준비가 완료 됐다고 볼 수 있겠습니다.

div태그로 홈페이지 레이아웃 만들기

웹디자인할 때 필수적으로 알아야 할 내요입니다.

처음 홈페이지의 구성도를 만들어서 작업을 해야하는데

이 때

최근 웹 표준 및 레이아웃 구현에 있어서 <table> 태그가 아닌 <div>가 필수적이라는 사실입니다. 기존의 table 태그의 속성 및 레이아웃 구성 방법은 완전히 이해하고 있지만,

div로 레이아웃을 할 때는 완전히 다르기 때문에 필히 아셔야 겠지요

위와 같은 레이아웃을 div 태그로 변환을 하고싶습니다. 정확히 어느부분을 <top>으로 구성하며 어느부분을 <section>으로 해야할지 알아봅니다.

특히 공지사항,이벤트,자유게시판의 상위 5개 레코드만 출력될 크기의 레이아웃 3개를 붙이는 것은 float 속성을 사용하는지도 알아봅니다.

<header>

<div id="logo">

Logo

</div>

<ul id="menu">

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

<li>메뉴4</li>

<li>메뉴5</li>

</ul>

</header>

<section>

<div id="banner">

</div>

<div id="widget_wrap">

<div class="widget">

Notice

</div>

<div class="widget">

Event

</div>

<div class="widget">

Freeboard

</div>

</div>

<div id="sub_banner_1">

Sub Banner 1

</div>

<div id="popular_goods">

Popular Goods

</div>

<div id="sub_banner_1">

Sub Banner 2

</div>

</scection>

<footer>

</footer>

해당 레이아웃과 HTML 코드에 맞게 CSS를 작성해서 사용하시고

안에 들어가는 내용들은 원하는 디자인에 맞게 기입하여 작업하시면 될 것같습니다.

직장을 다니면서 투잡 ( 재택알바 / 부업 )으로 월급만큼 수익을 얻을 수 있는 곳을 소개합니다.

 홈페이지제작할 때 꼭 필수적으로 알아야 하는 것일 수 있습니다.

그래도 아직도 사용하는 html 태이블 구조에 관해서 학습을 해보겠습니다.

예전에는 이 테이블태그를 이용하여 레이아웃을 잡았습니다.

div로 레이아웃을 잡는데요 표로 레이아웃을 요즘은 안잡고요. 그래도 달력이나 게시판 등은 그렇게 한답니다.

지금까지 강좌에 올린 태그들은 그 기능에만 충실히 설명을 하고 꾸미기 쪽은 아에 설명을 안했습니다. h태그로 작성한텍스트의

색을 바꾼다던지 글씨를 더 크게 한다던지의 align을 써서 오른쪽으로 정렬을 시킨다던지 그런 설명을 안했습니다.

이미지 태그도 border를 줘서 외곽을 어떻게 처리 한다던지 그런 설명도 안했는데요. 그 이유는 CSS에서 그러한 것들을 하기 때문입니다.

요즘은 html은 저렇게 구조만 짜주면 됩니다. 그리고 스타일은 스타일시트인 CSS 로 한답니다.

예를 들어서 다음페이지를 봐보겠습니다.

인터넷 익스플로러를 띄우시고 클릭하면 다음으로 갑니다.

메뉴에서 보기 - 스타일 - 스타일 없음을 눌러 보시면요 CSS가 해제된 저희가 지금 작성하고 있는 html 자체만 보실수 있습니다.

저거 입니다. html 로는 저렇게만 작성을 해주시면 되고요 CSS로 아까와 같이 배치 및 글씨 색 글씨 크기, 백그라운드 이미지, 백그라운드 색, 외곽선 굵기 스타일 외곽선색 등을 다 지정해준답니다.

만약 스타일 없음 했는데도 스타일 있는 페이지와 차이가 별로 없다면 그것은 웹표준을 지키지 않고 테이블로 레이아웃을 작성한 옛날 방식의

사이트 입니다. 그냥 혹시 왜이렇게 강좌를 대충 대충 하나 하시는 분이 계실까봐  말씀 드렸습니다.

 테이블에 대해서 말씀드리면

<table> <-- 테이블 태그의 시작

<tr> <-- 줄(열)의 시작

<td>A <-- 칸(행)의 시작

</td> <-- 칸(행)의 끝

</tr> <-- 줄(열)의 끝

</table> <-- 테이블 태그의 끝

위에서 tr을 열고 td를 1개만 사용했으므로 그냥 1칸뿐인 테이블이 됩니다.

결과는

 

오늘은 홈페지에 어떻게 이미지을 올리는지를 학습해 봅니다.

이미지 띄우는 태그는 <img src="이미지 주소" alt="이미지 설명" /> 입니다.

단독태그이므로 닫기전에 /를 붙이고요.

그리고 이미지 태그에 직접적으로 가로길이 세로길이도 적용 가능 합니다.

가로 길이는 width="숫자(단위는 픽셀)"

세로 길이는 height="숫자(단위는 픽셀)" 입니다.

alt="이미지설명" 은 이미지에 마우스를 대고 있으면 띄어지는 글입니다. 즉 이 이미지에 대한 설명인데요.

로봇사진이라고 하면 우리가 로봇이라고 적어 놓으면 로봇이라는 글이 띄어집니다.

alt=""를 적지 않으면 웹표준 검사에서 워링이나 에러에 걸립니다.

왜 이것을 해주냐고 하면은 이미지에 대한 정확한 설명을 해줄수도 있고요.

시각장애를 갖고 있는 분께서 웹을 이용할경우 그 이미지가 어떤 이미지인지를 읽어 주는 도구가 있는데요

그 도구가 우리가 작성한 alt="설명" 를 시각장애를 갖고 있는 분께 읽어 준답니다.

이러한 것을 웹접근성이라고 하는데요. 저도 웹접근성은 잘 모릅니다만. 아무튼 그러합니다.

이렇게 사용하면 되구요.

<img src="asimo.jpg" alt="아시모사진, photo of asimo" />

가로 길이 적용할시

<img src="asimo.jpg" width="500" alt="아시모사진, photo of asimo" />

위와같이 원하는값 적용하고요.위와같은 경우는 세로값이 적용이 되어있지 않은데요 비율을 조정해서 세로값은정해진답니다.

반대로 세로값만 적용하면 세로값에 대한 비율로 가로값이 적용됩니다.

비율을 적용하지 않고 가로 세로값을 적용하면 비율이 안맞아서 보기 안좋을수도 있습니다.

Tip:혹시 이거 보고 웹상에서 돌아다니는 이미지 주소 알아 내기 하시려면 이미지에 마우스 오른쪽 클릭 속성

가셔서 이미지 주소 보시면 됩니다.

이 이미지가 아닌 다른 자신의 컴퓨터에 있는 이미지로 테스트가 하고 싶으실 경우에는 테스트 하고 계신 html파일이 있는 폴더에 이미지를 넣으시고

<img src="이미지명" alt="" />하시면 됩니다.

이미지라 결과가 길어서 따로 띄우지 않겠습니다. 소스테스트는 했으니 위 소스로 테스트 하시면 됩니다

앞 강좌에서 배운 하이퍼링크 태그를 이용하여 이미지를 클릭했을때 원하는 링크를 걸은 주소로 이동해 봅시다.

매우 간단합니다. 이미지 태그를 하이퍼링크 태그로 씌어주면 됩니다. 제 블로그로 한번 띄어 볼까요?

먼저 하이퍼 링크 태그를 작성하고 주소는 http://mp17_2.blog.me 로 합니다. <a href="http://mp17_2.blog.me"></a>

그리고 하이퍼링크 태그 안에 이미지 태그를 넣어 줍니다.

이미지 주소는 이것으로 합시다.

http://www.yaoo.com/asimo.png

이미지 태그는   <img src="http://yaoo.com/asimo.jpg" alt="machine" />

그럼 위의 이미지 태그를 하이퍼 링크에 넣으면

<a href="http://mp17_2.blog.me" target="_blank">< src="http://www.yaoo.com/asimo.png" alt="machine" /></a>

가 됩니다.

위의 주소의 경우도 제측문제로 줄바꿈을 했는데요 실습하실때는 한줄로 해주시면 됩니다.

이상하게 연습장 에서 링크 연결시 "를 사용 하면 안되고 ''를 사용해야 하네요 참고 해주세요 아래 소스를 그대로 에디터에 붙여넣기 하셔서 테스트 하시면 됩니다.

홈페이지를 만들때 가장 기본이 되는 것이 html 구조입니다.

그래서 오늘은 홈페이지의 골격이 되는 구조는 어떻게 만드는지 알아보겠습니다

위의 소스가 HTML의 기본 구조 입니다.

각 태그는 <태그명>으로 시작하여 </태그명>으로 끝나며 모두다 그런것은 아닙니다.

<img />나 <br /> 태그등과 같은 단독 태그를 제외 하고는 거의 대부분의 태그들은 위와같은 법칙을 같습니다.

단독 태그는 끝에 /를 붙이고 닫아야 합니다. 예를 들어 <img src="url" /> 와 같이 사용 합니다.

지금은 무슨말인지 잘 모르실수 있습니다. 그냥 넘어 갑니다.

위의 기본 문서에서 head안에는 html문서에서 필요한 정보를 넣습니다.

title은 제목을 넣는 태그 입니다.

네이버를 접속해 보시면 홈페이지 상단에  네이버 :: 나의 경쟁력, 네이버 라는 글씨가 보입니다.

<title>네이버 :: 나의 경쟁력, 네이버</title>

라고 title 태그를 웹퍼블리셔가 네이버를 만들때 넣었기 때문에 그렇게 나오는 것입니다.

그외에도 문자 인코딩 이라든지 자바스크립트,스타일시트등을 넣는데요 나중에 차차 알아갑시다.
처음부터 이것저것 하면 머리 아파서 금방 포기하게 됩니다. body 태그에는 실질적인 홈페이지에 출력될 내용을 넣습니다.
웹브라우저에 안녕하세요를 출력하고 싶다면 저 body문안에 안녕하세요를 적으면 되는것이죠.

그럼  오늘은 이것으로 html소개는 마치고 강좌에서 뵙겠습니다.

오늘은 리스트 태그와 링크태그에 대해서 포스팅합니다.

우리가 웹사이트를 돌아다니면서 메뉴등을 보게 되는데요. 그러한 메뉴들은
대부분 리스트 태그로 만들어 져있습니다.

리스트 태그는 번호가 없는 형태가 있고, 번호가 있는 형태가 있습니다. 번호가 없는 경우는 아래의 <ul>로 시작합니다.

이렇게 하면 메뉴는 목록은 네이버 와 다음 2개가 뜹니다 이런식으로 자신의 원하는 목록을 만들어 나가면 됩니다.

그럼 소스를 쳐보면서 실습을 해봅시다.

이번에는 하이퍼링크에 대해서 배워 봅시다.

하이퍼링크는 우리가 네이버등에서 뉴스를 클릭했을때 어딘가로 이동을 하죠,, 바로 그 기능인데요.

href 주소지정에 파일의 경로를 지정시 그 파일을 다운로드도 합니다.
href="app.exe" 와같이

지금 해봅시다. ㅋ

하이퍼 링크 태그는 이것 입니다.
<a href="주소">링크를 거는 콘테츠 내용, 텍스트, 이미지등 </a>

그럼 우리는 위의 리스트 위에서 실습한 리스트 소스로 테스트를 해보도록 합시다. ^^

<li></li>태그 안에다가 하이퍼링크 태그를 넣을 거에요.!!

그럼 이번강좌는 여기까지 하고 다음강죄에서 뵙어요

[HTML 강좌] iframe 태그학습  구조<iframe> </iframe>

아이프레임은 웹브라우저에 다른 사이트를 일정공간에 보이게 해줍니다.
아이프레임을 사용하여 위에는 한 화면을 반으로 쪼개서 한쪽은 네이버가 나오게 하고 한쪽은 다음이 나오게 할 수 있습니다.
아이프레임의 활용방법은 다음과 같습니다.

<iframe src="링크할 주소"> </iframe>

이 아이프레임의 크기를 설정하려면 테이블처럼 width, height를 지정하면 됩니다.
그리고 스크롤을 생성 여부도 조종할 수 있습니다 scrolling="yes,no,auto"세가지로 정하시면 되구요.
auto로 하시면 필요할시 생성하고 필요없을시 생성하지 않습니다. 그것은 사이즈로부터 판단합니다.

실습해 봅시다. 아래의 소스를 작성해 주시구요.

<iframe src="http://www.naver.com" width="700" height="800" scrolling="auto"> </iframe>

이 소스를 웹에서 보기

<iframe src="http://www.naver.com/" width="700" height="800" scrolling="auto" style="color: rgb(0, 0, 0); font-family: 'Nanum Gothic', 돋움, Dotum, AppleGothic, sans-serif; font-size: 15px; line-height: normal; text-align: start;"></iframe>

이런식으로 여러개 사용하여서 필요한만큼 쓰시면 됩니다.

div

이번 시간에는 div태그에 대해서 포스팅합니다..

<div>태그는 레이어를 만들때 주로 사용 한답니다. html코드를 작성할때 사용하고 CSS로 그 효과를 입히게 되죠.

또한 레이아웃을 잡을때도 사용합니다. header, container, content, footer 등등 이요. .

이러한 것들이 있는데 레이아웃 한번 보도록 하겠습니다.

div태그를 이용하여 위와 같은 레이아웃을 만듭니다.

하지만 div태그만으로는 위의 레이아웃은 만들어지지 않고요. 스타일 시트라는 것을 먹여야 합니다.

위의 레이아웃의 소스는 아래와 같습니다.

단 div태그와 p태그가 있을 뿐입니다. 저기에 스타일시트를 적용하면 저렇게 레이아웃을 짠다든지 할 수 있습니다.

p태그에 대해서 설명드리면

p 태그는 텍스트를 쓰는 태그라고 생각 하시면 됩니다.

하나로 묶고 싶은 텍스트가 있다면 <p> 안녕하세요 </p> 이런식으로 쓰시면 됩니다.

유용하게 사용하시기 바랍니다.

 HTLM5 태그 정리

<header> TAG
Header태그는 여러번 사용할 수 있으며, body태그 안에서 사용이 가능합니다. <head>태그는  <html> 사이에 들어가야 하며, 사용 또한 다릅니다. 문서 내에서의 실제 타이틀을 나타낼 때 사용이 됩니다.

<hgroup> TAG
제목과 그와 관련된 부제목을 묶어주는 기능.
In this part of the useful HTML5 features series we are going to present you the new semantic tags that were introduced with HTML5 (most of them). We have provided a simple demo of a page that uses the HTML5 semantic tags.
You usually insert into a header one or more headings ( <h1> to <h6> ) , some sort of a logo or information about the author of the post/article/document that will be discussed below it.

<nav> TAG
<nav>는 어느 위치에 와도 상관이 없으며, <header> <footer> <aside> 등 어디에서든지 사용이 가능합니다.
We include another new element which is the <nav> – it is best used for the primary navigation(s) of the page. It would not be a good idea to enclose every distant anchor on your webpage with the <nav > tag.

<aside> TAG
본문의 내용을 표시하고 남은 부분들을 표시하기 위해서 사용합니다.
Next, we have the <aside> tag which indicates sidebars or content that is related to the DOM location where it is being placed but it is not essential to it. For example, if your readers are reading an article on a page, you can use it to show the user additional information about the article such as references, highlights from it, interesting facts and even to show the user related articles.

You can also see the use of <figure> . You should use it for code snippets, images, diagrams, charts and other visual content that is related to the place where it is placed but in the same time the enclosing content should still make sense without that figure . Inside the <figure> tag you can nest other tags such as <img> and you can add a caption which explains the figure through the <figcaption> element.

<article> TAG
웹 페이지 상에서 실제 내용을 의미하고, 다른 곳에 배포하거나 재사용할 수 있으며, 검색엔진에서는 article에 있는 내용은 배포할 수 있는 것으로 인식하게 됩니다.
<seciton> TAG
웹 컨텐츠들을 그룹으로 묶어 주는 역할을 하며, 재배포 할 수 없습니다. <section>으로 묶에서 다시 <article>로 다시 묶을 수 있다. <section>안에서 다시 <section>태그를 사용하는 것은 가능하다.

HTML1(1991)으로 시작되어, HTML2(1995), HTML3(1997.1), HTML4(1997.12)를 거쳐서 HTML5로 개발되었다.

H.

HTML5은 HTML4의 제한적인 기능 때문에 액티브X, 자바스크립트, 플러그인 등으로 웹을 구현하였고, 이러한 것들을 플러그인 없이 멀티미디어 컨텐츠를 실행하기 위해서 등장하였다. (하지만 현재도 주로 사용되는 것들은 HTML4이다)

웹표준은 같은 사이트라도 브라우저마다 다르게 보이게 되는데, 이는 표준이 없이 작성이 되었기 때문이다. HTML5의 특징은 자바스크립트, CSS, HTML이 분리되지 않고 통합된 체제로 이루어진 것을 의미한다. (HTML5는 자바스크립트, CSS3, HTML5 태그 모두를 의미한다)

HTML5특징
- HTML5는 동영상 재생이 가능하다.
- 2차원 벡터가 가능하다
- 서버와 소켓 통신이 가능하다.
- GPS장치접근, 스마트폰
- 오프라인 상태에서도 작업이 가능하다.
- 시멘틱 웹을 구현이 가능하다.
새로운 태그들
section, article, aside: 간단한 위젯 프로그램, 사이드바, hgroup: 제목과 부제목, header: 본문에 있는 머리부분, footer:페이지 가장 하단의 안내, nav: 네비게이션 요소를 표현, figure: 그림, 비디오 등의 캡션, figcaption.
audio, video, embed, mark:택스트 형광펜, progress:진행바, meter, time, ruby: 미주, 각주 등, canvas, command, details, datalist, keygen: 양식을 form으로 보낼 때 하는 key를 생성, output.
변경된 태그들
a, address, b, hr, i, menu, small, strong : 더 강화되거나 내용이 확장된 태그들
중단된 태그들
basefont, big, center, font, frame, frameset, noframe, s, strike, tt, u