HTML5 (آخرین نسخه Hypertext Markup Language)، کدی‌ست که صفحات وب را توصیف می‌کند. HTML5 در واقع از سه نوع کد تشکیل شده است:
HTML که ساختار را فراهم می‌کند.
(Cascading Style Sheets (CSS که برای استایل دهی است.
JavaScript که باعث وقوع تمامی اتفاقات بالا می‌شود.
Header
تگ <header> در HTML برای تعریف عنوان در یک document یا section استفاده می‌شود.
تگ header شامل اطلاعات مربوط به عنوان محتوای مرتبط است.
<header> معمولاً شامل عنوان بخش (h1-h6 یا یک <hgroup>) است.
همچنین از <header> برای جدول مطالب، فرم جستجو یا لوگوی مربوطه استفاده می‌شود.
تگ <header> یک تگ در HTML5 است و به یک تگ شروع و همچنین تگ پایانی نیاز دارد.
چندین <header> در یک document می‌تواند وجود داشته باشد.
تگ <header> در یک <footer>، <address> یا <header> دیگر قرار نمی‌گیرد.
Syntax:
<header> …</header>
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Header Tag</title>
</head>
<body>
<article>
<header>
<h1>my heading.</h1>
<h4>my sub-heading.</h4>
<p>my metadata.</p>
<header/>
<articlev>
<body/>
<html/>
Footer
از تگ <footer> در HTML برای تعریف Footer داکیومنت HTML استفاده می‌شود. این بخش شامل اطلاعات پاورقی (اطلاعات نویسنده، اطلاعات کپی رایت، حمل و نقل، درباره ما، اطلاعات تماس، سؤالات متداول و غیره) می‌باشد. از برچسب footer در تگ body استفاده می‌شود. footer به یک تگ شروع و همچنین تگ پایانی نیاز دارد.
تگ <main> محتوای اصلی یک document را مشخص می‌کند. محتوای داخل <main> باید مختص همان document باشد. این محتوا نباید حاوی مطالب تکراری موجود در که در documentهایی مانند sidebars، navigation link، اطلاعات کپی رایت، لوگو و فرم‌های جستجو باشد.
از تگ <aside> برای توصیف هدف صفحه وب به روشی کوتاه‌تر استفاده می‌شود مانند هایلایت. در اصل محتوا را که مربوط به محتوای اصلی همان صفحه وب است، شناسایی می‌کند. تگ <aside> عمدتاً شامل اطلاعات نویسنده، لینک‌ها، مطالب مرتبط و غیره است.
Syntax:
<aside>
<h3>Contents…</h3>
<p>Contents…</p>
<aside/>
شاید در وهلۀ اول شباهت زیادی بین <aside> و <div> وجود داشته باشد، اما هر دو تگ رفتار یکسانی با معنی متفاوت دارند.
<div>
بخش‌بندی را در صفحه وب تعریف یا ایجاد می‌کند.
<aside>
با ایجاد بخش، کاری مشابه با <div> را انجام می‌دهد؛ اما فقط محتوای مربوط به همان صفحه را شامل می‌شود.
تگ <aside> طراحی صفحه را آسان کرده و وضوح داکیومنت html را افزایش می‌دهد و به کاربر امکان تشخیص راحت متن اصلی و متن فرعی را می‌دهد.
مثال:
<html>
<head>
<title>aside tag</title>
<style>
.gfg {
font-size:30px;
}
h1 {
font-size:40px;
color:#090;
font-weight:bold;
}
p {
font-size:20px;
margin:20px 0;
}
</style>
</head>
<body>
<div class = “gfg”>Aside Tag Example</div>
<aside>
<h1>title text</h1>
<p>text.</p>
<aside/>
<body/>
<html/>
Article
تگ <article> یکی از elementهای جدید بخش‌بندی در HTML5 است. این تگ برای نمایش مقاله مورد استفاده قرار می‌گیرد و محتوای موجود در آن از سایر مطالب سایت مستقل است (حتی اگر مرتبط باشد).
مواردی که در تگ <article> بکار برده می‌شود، به شرح زیر است:
مقالات مجله یا روزنامه
وبلاگ
پست‌های انجمن
نظرات ارسال شده توسط کاربران
این تگ اغلب در دو زمینه استفاده می‌شود:
در صفحه‌ای با یک قطعه محتوا، می‌توانید از یک <article> برای نگه داشتن محتوای اصلی استفاده کنید و آن را از بقیه صفحه جدا کنید.
در صفحه‌ای با چندین قطعه محتوا (صفحه فهرست وبلاگ، صفحه نتایج جستجو، صفحه کتگوری و اخبار)، از چندین <article> برای استفاده از تک تک مطالب استفاده می‌شود.
این تگ شبیه به <div> است. با این وجود ، استفاده از عنصر <article> به جای <div> اطلاعات معنایی بیشتری را به خوانندگان صفحه و موتورهای جستجو ارائه می‌دهد.
بیشتر مرورگرها Article را با مقادیر زیر نمایش می‌دهند:
تگ <<Section documentهایی مانند headerها، footerها یا هر قسمت دیگر را بخش‌بندی می‌کند. این تگ بخش مطالب را در Sectionها و subsectionها جدا می‌کند. معنایی بودن، مهمترین مزیت تگ section است؛ چراکه هم برای مرورگرها و هم برای developerها معنا دارد.
Syntax:
<section> Section Contents </section>
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1> Section 1</h1>
<p>Content of section 1</p>
</section>
<section>
<h1> Section 2</h1>
<p>Content of section 2</p>
</section>
<section>
<h1> Section 3</h1>
<p>Content of section 3</p>
<section/>
<body/>
<html/>
Time
تگ <time> تاریخ یا زمان قابل خواندن توسط انسان را مشخص می‌کند. همچنین می‌تواند برای رمزگذاری تاریخ‌ها و زمان‌ها به روشی قابل خواندن از دستگاه استفاده شود تا کاربر بتواند یادآورهای تولد یا رویدادهای برنامه ریزی شده را به تقویم اضافه کند. با استفاده از این تگ موتورهای جستجو می‌توانند نتایج جستجوی هوشمندانه‌تری ایجاد کنند.
Syntax:
<time>10:00</time>
مثال:
<p>We start at <time>10:00</time> every night.</p> <p>I have a birthday on <time datetime=”2008-02-14 20:00″>birthday</time>.</p>
Address
تگ <address> اطلاعات مخاطب را برای نویسنده یا صاحب یک document یا مقاله تعریف می‌کند. اگر <address> داخل <body> باشد، اطلاعات تماس مربوط به document را نشان می‌دهد. اگر <address> در داخل یک <article> باشد، اطلاعات تماس آن مقاله را نشان می‌دهد. متن موجود در <address> معمولاً به‌صورت italic نمایش داده می‌شود. بیشتر مرورگرها قبل و بعد از address، یک خط جداکننده اضافه می‌کنند.
Syntax:
</address> … <address>
مثال:
<address> Written by <a href=”mailto:name@example.com”>Jon Smith</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA <address/>
Summary
از تگ <summary> در HTML برای تعریف خلاصه‌ای برای <details> استفاده می‌شود. <summary> به همراه <details> استفاده می‌شود و خلاصه‌ای را برای کاربر در اختیار قرار می‌دهد. هنگامی که summary توسط کاربر کلیک می‌شود، محتوای قرار داده شده در داخل عنصر <details> قابل مشاهده می‌شود که قبلاً پنهان بود. Summary به تگ شروع و پایان نیاز دارد.
Syntax:
<summary> Content </summary>
مثال:
<!DOCTYPE html>
<html>
<body>
<details>
<summary>text.</summary>
<p> text.</p>
</details/>
<body/>
<html/>
Details
از تگ <details> برای محتوا یا اطلاعاتی استفاده می‌شود که در ابتدا پنهان است؛ اما در صورت تمایل کاربر، نمایش داده می‌شود. از این تگ برای ایجاد یک ویجت تعاملی استفاده می‌شود که کاربر می‌تواند آن را باز یا بسته کند.
Syntax:
<details>
<summary> Text content </summary>
<div> Content . . . >
</details>
مثال:
<!DOCTYPE html>
<html>
<head>
<title>details tag</title>
<style>
summary {
font-size:40px;
color:#090;
font-weight:bold;
}
</style>
</head>
<body>
<details>
<summary>text</summary>
<p>A computer science portal </p>
<div>It is a computer science portal where you
can learn programming.</div>
</details>
</body>
</html>
Figure & Figcaption
تگ <figure> برای حاشیه‌نویسی تصاویر، نمودارها، عکس‌ها، لیست کدها و غیره استفاده می‌شود. می‌توانید از <figure> در رابطه با <figcaption> استفاده کنید تا یک عنوان برای محتوای <figure> خود تهیه کنید. تگ <figure> در HTML 5 معرفی شده است.
از تگ <figcaption> برای تهیه شرح در هنگام استفاده از تگ <figure> استفاده می‌شود. تگ <figcaption> به عنوان اولین یا آخرین فرزند از تگ <figure> والد خود استفاده می‌شود و در HTML5 معرفی شده است.
