متا تگ ها نوعی متا دیتا(اطلاعاتی که در توصیف اطلاعات دیگر مورد استفاده قرار می گیرد) هستند.
متا تگ ها در اصل عبارت ها، متن ها و برچسب هایی هستند که در کدهای HTML پنهان هستند و در واقع اطلاعاتی هستند که برای موتور های جستجوگر وب نوشته می شوند تا در بهتر ایندکس کردن صفحات استفاده شوند.
استفاده ی درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکس شدن صفحات و شناخت بهتر موتور های جستجو از سایت ما دارد. تگ های Meta در بین تگهای Head قرار میگیرند:
<html>
<head>
<title>عنوان صفحه </title>
<meta tag 1 />
<meta tag 2 />
<meta tag 3 />
…
</head>
<body>
محتوای صفحه
</body>
</html>متا تگ description که برای شرح وب سایت شما در ۳ از ۴ جمله مورد استفاده قرار می گیرد و محتوای خلاصه صفحه را به نمایش می گذارد، این توضیح برای گوگل نباید بیشتر از ۱۵۰ کارکتر (حرف) باشد.
<meta name="description" content="text">متا تگ keywords که مهم ترین کلمات کلیدی که در یک صفحه خاص مد نظر ما هستند در آن قرار می گیرند.
<meta name="keywords" content="words">
متا تگ Viewport اطلاعات مفیدی در مورد ابعاد صفحه وب سایت و نحوه زوم وب سایت به مرورگر می دهد. اما اگر به خوبی از این تگ استفاده نشود، صفحات وب سایت در گوشی های موبایل به درستی نمایش داده نمی شود(برای ریسپانسیو کردن وب سایت)
< meta name="viewport" content="width=device-width, initial-scale=1" >متاتگ فارسی سازی صفحه (Utf-8) برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده میشود و در صورت استفاده نکردن از این متاتگ ، در بعضی از مرورگرها ی کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />متا تگ زبان مورد استفاده (Content-Language) این متا تگ برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد.
<meta http-equiv="Content-Language" content="Fa">
در حالت کلی بیش از ۳۰ نوع متا تگ وجود دارد که شما می توانید لیست کامل انواع متاتگ ها را ببینید و با آنها آشنا شوید.
از تگ اسکریپت در طراحی سایت برای قرار دادن اسکریپت (مانند java script) درون صفحات html استفاده می شود. دستورات باید بین تگ های باز و بسته script قرار گیرد.
<script type="text/javascript" >
محل کدهای جاوا اسکریپت
</script>یکی از روش های تعریف استایل نویسی(CSS)، استفاده از تگ استایل در بخش head صفحات html است، که با تعریف آن می توان در تمام صفحه برای ظاهر سایت استفاده نماییم.
<style type="text/css" >
محل کدهای CSS
</style>از تگ link برای برقرای ارتباط و لینک دادن به سایر صفحات وب استفاده می شود. مهم ترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد.
برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :
<link rel="Stylesheet" type="text/css" href="آدرس فایل سی اس اس" />خواص margin در CSS برای ایجاد فضای اطراف عناصر، خارج از هر مرز تعریف شده، استفاده می شود. با CSS، شما کنترل کامل بر روی حاشیه ها دارید. این خاصیت ها برای تنظیم حاشیه برای هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) وجود دارد.
CSS دارای خصوصیات برای تعیین حاشیه برای هر طرف یک عنصر است:
اگر margin دارای چهار مقدار باشد (;margin: 25px 50px 75px 100px) :
<h2>The margin shorthand property - 4 values</h2>
<div style="border: 1px solid black;margin: 25px 50px 75px 100px;background-color: darkblue;">
This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
</div>خروجی :
اگر margin دارای دو مقدار باشد (;margin: 25px 50px) :
اگر margin دارای یک مقدار باشد (;margin: 25px) :
تمام چهار طرف حاشیه ۲۵ پیکسل است.
شما می توانید مقدار margin را auto قرار دهید که در این صورت عنصر درون ظرف خود به صورت افقی در وسط صفحه قرارمی گیرد و در واقع عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:
<h2>Use of margin:auto</h2>
<p>
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
</p>
<div style="width:300px; margin: auto; border: 1px solid red;">
This div will be horizontally centered because it has margin: auto;
</div>خروجی :
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
خصوصیات CSS Padding برای ایجاد فضای اطراف محتوای عنصر، در داخل هر مرز تعریف شده، استفاده می شود. با استفاده از CSS، شما کنترل کاملی بر روی Padding دارید. خواص برای تنظیم Padding برای هر طرف یک عنصر (بالا، راست، پایین و چپ) وجود دارد.
CSS دارای خصوصیاتی برای تعیین Padding برای هر طرف یک عنصر است.
توجه : مقادیر منفی برای خصوصیت padding مجاز نیستند.
مثال زیر padding های مختلف را برای هر چهار طرف یک عنصر تنظیم می کند:
<h2>Using individual padding properties</h2>
<div style="border: 1px solid black; background-color: darkblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;">
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
</div>خروجی :
برای کوتاه کردن کد، می توان تمام خواص padding را در یک ویژگی مشخص کرد. اگر خصوصیت padding دارای چهار مقدار باشد (;padding: 25px 50px 75px 100px) :
<h2>The padding shorthand property - 4 values</h2>
<div style="border: 1px solid black; padding: 25px 50px 75px 100px; background-color: darkblue;">
This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.
</div>اگر خصوصیت padding دارای سه مقدار باشد (;padding: 25px 50px 75px) :
اگر خصوصیت padding دارای دو مقدار باشد (;padding: 25px 50px) :
اگر خصوصیت padding دارای یک مقدار باشد (;padding: 25px) :
تمام چهار طرف ۲۵ پیکسل است.
اگر یک عنصر دارای عرض مشخص شده باشد، ابعاد اضافه شده padding به آن عنصر، به عرض کل عنصر افزوده می شود. این اغلب یک نتیجه نامطلوب است.
در مثال زیر، عنصر دارای عرض ۳۰۰px می باشد. با این حال، پهنای واقعی رندر عنصر ۳۵۰px خواهد بود (۳۰۰px + 25px + 300px + 25px ) :
<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; background-color: darkblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>خروجی :
برای حفظ عرض در ۳۰۰px، بدون توجه به مقدار padding، شما می توانید از box-sizing با مقدار border-box استفاده کنید. این باعث می شود که عنصر برای حفظ عرض آن، اگر padding را افزایش دهید، فضای موجود در دسترس کاهش خواهد یافت. به عنوان مثال:
<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; box-sizing: border-box; background-color: darktblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>خروجی :
این تگ حاوی حاشیه نویسی ruby است. حاشیه نویسی روبی برای نمایش تلفظ کاراکترها و نشان دادن اشعار شخصیت های شرق آسیا مانند چینی ها و ژاپنی ها استفاده می شود
تگ ruby با تگ rt برای ایجاد حاشیه نویسی یا راهنمای تلفظ برای کلمات و عبارات استفاده می شود. متن پایه باید در برچسب ruby قرار گیرد حاشیه نویسی، محصور در برچسب rt، به عنوان متن کوچکتر بالای متن پایه ظاهر می شود.
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>漢 字
این تگ (Word Break Opportunity) یک موقعیت را درون متن مشخص می کند که در آن مرورگر ممکن است به صورت اختیاری یک خط را شکست دهد. هنگامی که یک کلمه بیش از حد طولانی باشد یا شما می ترسید که مرورگر ادامه آن کلمه را در خط بعد نمایش دهد می توانید از تگ استفاده کنید.
<p>The XML<wbr>Http<wbr>Request object is the key to AJAX.</p>از این تگ برای جاسازی محتوای صوتی در یک سند HTML بدون نیاز به هیچ پلاگین اضافی مانند فلش پلیر استفاده می شود.
<audio controls="controls">
<source src="birds.mp3" type="audio/mpeg">
<source src="birds.ogg" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>خصوصیت های تگ audio :
| خصوصیت | مقدار | توضیحات |
| controls | controls | مشخص می کند که کنترل های صوتی نمایش داده شوند. (مانند دکمه play ،pause و غیره) |
| autoplay | autoplay | مشخص می کند که فایل صوتی مورد نظر به محض آماده شدن اجرا شود. |
| muted | muted | مشخص می کند که خروجی صدا خاموش باشد. |
| loop | loop | مشخص می کند که فایل صوتی هر بار پس از اتمام، دوباره اجرا شود. |
| preload | auto – metadata – none | مشخص می کند که فایل صوتی در صورت نیاز چگونه بارگذاری شود. |
| src | URL | URL مربوط به فایل صوتی را مشخص می کند. |
این تگ برای جاسازی محتوای ویدئویی در یک سند HTML بدون نیاز به هیچ پلاگین دیگری مانند فلش پلیر استفاده می شود. پشتیبانی از تگ video در مرورگرهای مختلف متفاوت است. در حال حاضر، سه فرمت ویدیویی اصلی وجود دارد که برای عنصر ویدیو پشتیبانی می شود: MP4، Ogg و WebM
<video controls="controls">
<source src="shuttle.mp4" type="video/mp4">
<source src="shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>خصوصیت های تگ video :
| خصوصیت | مقدار | توضیحات |
| width | pixels | پهنای پخش کننده ویدئو را تنظیم می کند. |
| height | pixels | ارتفاع پخش کننده ویدئو را تنظیم می کند. |
| controls | controls | برای افزودن کنترل های play ،pause و صدا بکار برده می شود. |
| autoplay | autoplay | در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود. |
| loop | loop | در صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود. |
| muted | muted | مشخص کننده قطع صدا به طور پیش فرض برای ویدئو است. |
| poster | URL | مشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است. |
| preload | auto – metadata – none | در صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
|
| src | URL | آدرس ویدئویی که باید پخش شود. |
این تگ برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند video و audio استفاده می شود.
این تگ یک منطقه را در سند تعریف می کند که می تواند از طریق اسکریپت (معمولا جاوا اسکریپت) برای رسم گرافیک استفاده شود. برای مثال، می توان آن را برای رسم مسیر و شکل، گراف و یا حتی انجام انیمیشن ها استفاده کرد. تگ canvas تنها یک ظرف یا قالبی است که گرافیک ها را در خود جای می دهد، شما باید برای رسم گرافیک ها از اسکریپت ها استفاده کنید.
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
این تگ را می توان برای جاسازی برنامه های خارجی، معمولا محتوای چند رسانه ای مانند صوتی و یا ویدئویی به یک سند HTML استفاده کرد.
<embed src="blur.swf" width="400px" height="200px">خصوصیت های تگ embed :
| خصوصیت | مقدار | توضیحات |
| width |
pixels
|
مشخص کننده عرض موجود در تگ embed |
| height | pixels | مشخص کننده طول موجود در تگ embed |
| type | media_type | مشخص کننده media type موجود در تگ |
| src | URL | مشخص کننده آدرس فایل خارجی در تگ embed |
این تگ یک واحد از محتوا را به صورت اختیاری با یک عنوان می نویسد که مستقل است و به طور معمول به عنوان یک واحد اشاره دارد. معمولا این یک تصویر، یک نمودار یا یک قطعه کد است که در متن اصلی اشاره شده است.
<figure>
<img src="designestan.png" alt="Designestan">
<figcaption>Designestan Website</figcaption>
</figure>
این تگ یک عنوان یا caption برای عنصر figure تعریف می کند.
<figure>
<img src="discovery.jpg" alt="Space Shuttle">
<figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>این گزینه فقط برای کاربران ویندوز است و هنوز هم به طور فعال به روز می شود. این ویرایشگر کد بسیار سبک و کم حجم نسبت به دیگر ویرایشگرها می باشد و نسبت به آنها از کارایی کمتری برخوردار است، اما Notepad ++ جایگاهی در این فهرست دارد، زیرا هنوز هم می تواند با بهترین ویرایشگرهای متن در رقابت باشد.
تجربیات مختلفی از Emacs وجود دارد، این ویرایشگر یک ویرایشگر لایه باز، قابل گسترش و قابل تنظیم است. Emacs یکی از قدرتمندترین ویرایشگرها است و به همین ترتیب طول می کشد تا راه خود را یاد بگیرد. امکانات آن شامل حالت های ویرایش محتوای متفاوت و پشتیبانی کامل یونیکد برای تقریبا تمامی انواع اسکریپت ها است.
Komodo Edit یک ویرایشگر قدرتمند و اساسی است. این ویرایشگر پشتیبانی چند زبانه، انتخاب های متعدد و تکمیل خودکار را ارائه می دهد، به علاوه امکان ردیابی تغییرات و یا مشاهده نسخه Markdown و همچنین یک IDE کامل تر دارای ویژگی است که برای پرداخت آن نیاز به خریداری آن دارید.
اگر شما یک برنامه نویس طرفدار اپل هستید، Buffer Editor می تواند یک گزینه عالی برای شما باشد. این برنامه برای iOS طراحی شده است که باعث می شود تغییرات سریع در وب سایت شما از طریق iPhone یا iPad انجام شود. این ویرایشگر یک نمایه تقسیم یا حالت تمام صفحه را ارائه می دهد و شما می توانید به سرعت بین زبانه ها تغییر دهید. همچنین با BitBucket، GitHub، GitLab، Dropbox، iCloud، Google Drive، SFTP، SSH و سرورهای FTP متصل شوید.
وب سایت ویرایشگر Buffer Editor
CoffeeCup دو گزینه ویرایشگر مختلف کد ارائه می دهد. یک نسخه رایگان وجود دارد که برای مبتدیان عالی است که به دنبال یک ویرایشگر متن ساده هستند. با استفاده از این، شما می توانید فایل های جدید HTML و CSS را از ابتدا ایجاد کنید یا فایل های سایت موجود را ویرایش کنید. در عوض، تعدادی از تم پاسخگو قابل تنظیم است که می توانید از آن برای ایجاد یک پروژه جدید استفاده کنید. نسخه ی تجاری نیز وجود دارد که شامل ویژگی های بیشتری مانند ابزارهای اعتبارسنجی HTML و CSS و طراحی جدول می باشد.
وب سایت ویرایشگر CoffeeCup HTML Editor
ویرایشگر متن Coda (در حال حاضر در نسخه ۲) برنامه OS X است که مقدار زیادی از ویژگی های دستی را ارائه می دهد. در کنار گزینه های ویرایشگر معمول کد، برخی از ویژگی های جالبی در این ویرایشگر وجود دارد، به عنوان مثال، یافتن و جایگزینی شامل یک علامت ‘Wildcard’ است که RegEx را یک دکمه ساده می کند و Coda Pops شما را قادر می سازد به سرعت ایجاد رنگ یا شیب، با استفاده از کنترل آسان، تایپ کنید.
DroidEdit Pro یک ویرایشگر کد نرم افزاری برای تبلت ها و گوشی های آندروید است. با توجه به قیمت پایین آن شما برنامه ای دریافت خواهید کرد که به نظر می رسد عالی است و به سادگی برای برنامه نویسی کار می کند. رابط کاربری ساده و برنامه از برجسته سازی نحوی، ترتیب براکت ها، Dropbox و SFTP / FTP پشتیبانی می کند. در این ویرایشگر کلیدهای میانبر قابل تنظیم نیز وجود دارد.
وب سایت ویرایشگر DroidEdit Pro
Textastic یک ویرایشگر کد به طور خاص در برنامه نویسی بر روی iPad است (هرچند نسخه های آیفون و مک برای آن وجود دارد). همراه با تمام بیت های معمول و bobs شما انتظار (پشتیبانی از FTP / SFTP، پیش نمایش محلی و از راه دور، برجسته نحو)، شما یک ردیف اضافی از کلید های اضافی در صفحه کلید مجازی دریافت می کنید که برای دسترسی سریع به کاراکتر های منظم استفاده می شود. همچنین پشتیبانی از TextExpander برای کار با snipet ها وجود دارد.
امیدواریم در این مقاله توانسته باشیم شما را در انتخاب بهترین ویرایشگر کد کمک اندکی کرده باشیم.
تگ fieldset برای دسته بندی چندین کنترل و برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد. تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد.
<fieldset>
<legend>عنوان گروه</legend>
<p>متن آزمایشی شماره یک</p>
<p>متن آزمایشی شماره دو</p>
</fieldset>مهم ترین خصوصیت Legend خصوصیت Align یا تراز می باشد که محل قرار گیری عنوان را مشخص میکند.
مقدار هایی که این خصوصیت می پذیرد عبارتند از : Top , Bottom , Left , Right
<fieldset>
<legend align="left">عنوان گروه</legend>
<p>متن آزمایشی شماره یک</p>
<p>متن آزمایشی شماره دو</p>
</fieldset>برای استفاده از تصاویر در برگه‌های وب شما باید از تگ img در HTML استفاده کنید که این تگ یک تگ Self Closing است(تگ پایانی برای بسته شدن ندارد).
این تگ یکی از مهمترین و پر استفاده ترین تگ ها در HTML می باشد و با استفاده از آن می توان عکس دلخواهی را در صفحه ی HTML قرار داده و با اندازه و شکل دلخواه نمایش داد.
این تگ دارای خاصیتی تحت عنوان src می باشد که این خاصیت در واقع مخفف کلمه source است و مقدار ورودی آن تعیین کننده عکسی است که می‌خواهید آن را نمایش دهید.
خاصیت بسیار مهم دیگری که در این تگ وجود دارد و باید حتما از آن استفاده شود، خاصیت alt است. alt مخفف کلمه alternative است و در هنگام بارگئاری نشدن تصویر به هر دلیلی متن داخل آن نمایش داده می شود.
بصورت پیش فرض تگ img نمایش عکس ها را به اندازه ی اصلی و پیش فرض عکس و بدون خط حاشیه نمایش میدهد. در صورتی که بخواهید تصویر را در سایز دلخواه و با خط حاشیه نمایش دهید از خصوصیات width , height , border استفاده می کنیم.
<img src="UploadFile/images/pic1.jpg" alt="عنوان عکس" width="100" height="100" border="2" />برای ایجاد لینک باید از تگ a استفاده کرد، a ابتدای کلمه anchor به معنای لنگر است. تگ لینک برای ارتباط بین صفحات وب و یا ایجاد لنگر در داخل صفحه، در سایت به کار میرود.
مهمترین خصوصیات این تگ به شرح زیر می باشد :
<a href="http://www.google.com" target="_blank" title="موتور جستجوی گوگل"></a>در HTML راه‌های مختلفی برای استفاده از رنگ‌ها وجود دارد :
نام رنگ‌ها
استفاده از نام رنگ ها یک روش ساده اما محدود برای سیستم رنگ‌بندی است. به این صورت که اگر شما به رنگ آبی نیاز داشته باشید کافی است نام آن را بنویسید(blue).
<h1 style="color:blue;">Simple Text</h1>در این مدل ما دسترسی به طیف های مختلف هر رنگ نداریم و میزان غلظت آن ها را نمی توانیم کم یا زیاد کنیم.
استفاده از سیستم Hexadecimal
در این مدل، اعداد به ما این قابلیت را میدهد تا کمی بیشتر از ۶ میلیون رنگ را استفاده کنیم. استفاده از این سیستم بسیار آسان است. در یک سیستم ۱۶تایی از اعداد ما با اعداد ۰ تا ۹ و a تا f سر و کار داریم. ما در این مدل قابلیت ترکیب رنگی سه رنگ اصلی یعنی Red Green Blue یا قرمز سبز آبی را داریم.
برای مقدار دهی به میزان هرکدام از این رنگ‌ها ما می‌توانیم از اعداد سیستم ۱۶ تایی استفاده بکنیم. مقدار f یعنی حداکثر میزان از آن رنگ و مقدار ۰ یعنی خالی از آن رنگ در ترکیب رنگ بندی مورد نظر ما است.
<h1 style="color:#5547ff;">Simple Text</h1>در سیستم رنگ‌دهی هگزادسیمال ۶ عدد وجود دارد که هر دو عدد از سمت چپ نمایانگر یک رنگ از سه رنگ اصلی(قرمز ، سبز ، آبی) هستند. از سمت چپ به راست، دو عدد اول قرمز، دو عدد میانی سبز و دو عدد آخر آبی هستند. وقتی که مقدار دو عدد اول ۰۰ باشد به این معناست که رنگ قرمز وجود ندارد، برای دو عدد میانی نیز به همین صورت، اما وقتی دو عدد آخر برابر ff (حالت حداکثر) باشد به این معنی است که رنگ برابر با آبی می باشد.
استفاده از RGB
در سیستم رنگ‌بندی RGB دقیقا همان فلسفه مورد قبلی پیاده‌سازی میشود، با این تفاوت که سیستم عدد گذاری در این حالت متفاوت است. در این سیستم ما از اعداد بین ۰ تا ۲۵۵ استفاده می‌کنیم.
<h1 style="color:rgb(13,23,255);">Simple Text</h1>در برخی سیستم‌های رنگ‌بندی ما می‌توانیم یک گزینه یا پارامتر دیگر را نیز تنظیم کنید. این پارامتر میزان شفافیت یا Opaciy است. این مقدار عددی بین ۰ تا ۱ است. این مقدار به صورت پیشفرض برابر با ۱ است اما می‌توانید آن را تا حدی کاهش دهید که کاملا المان شما محو شود. برای مثال اگر این مقدار برابر ۰ باشد هیچ چیزی در صفحه مشاهده نمی‌شود. برای اینکار نیاز است که حرف a را به انتهای rgb اضافه کنید و همچنین یک مقدار چهارم در پرانتز قرار دهید.
<h1 style="color:rgba(13,23,255,0.5);">Simple Text</h1>این تگ یک کلید رمزگذاری برای انتقال داده های رمز شده به یک سرور ایجاد می کند و برای فراهم کردن یک راه ایمن برای تایید هویت کاربران در فرم‌هایی نظیر ورود و ثبت نام می‌باشد. هنگامی که کاربر فیلد را پر می کند و ارسال می کند دو کلید یک کلید خصوصی و یک کلید عمومی ایجاد می شود. وقتی یک فرم HTML ارسال می شود، مرورگر یک جفت کلید ایجاد می کند و کلید خصوصی را در ذخیره سازی کلید محلی مرورگر ذخیره می کند و کلید عمومی را به سرور ارسال می کند.
<form action="process-key.php" method="post">
<label>Username: <input type="text" name="username"></label>
<label>Encryption: <keygen name="key"></label>
<input type="submit" value="Submit">
</form>این تگ برای اندازه گیری عددی یا مقدار کسری در محدوده شناخته شده تعریف می شود. این تگ به عنوان مقیاس نیز شناخته می شود.
<p>Disk Usage: <meter value="0.8">80%</meter></p>
<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter
</p>
<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>Disk Usage:
Total Score:
Pollution Level:
خصوصیت های تگ meter :
| خصوصیت | مقدار | توضیحات |
| form | form-id | یک یه چند فرم که تگ meter به آنها تعلق دارد را مشخص می کند. |
| low | number | رنجی که به عنوان یک مقدار کم مطرح شده است را مشخص می کند. |
| high | number | رنجی که به عنوان یک مقدارزیاد مطرح شده است را مشخص می کند. |
| min | number | رنجی برای مشخص کردن مقدار minimum |
| max | number | رنجی برای مشخص کردن مقدار maximum |
| value | number | این خصوصیت الزامی است. مقدار رایج اندازه گیری را مشخص می کند. |
| optimum | number | مشخص می کند که برای اندازه گیری چه مقداری بهینه است. |
این تگ برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.
<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>This arabic word ARABIC_PLACEHOLDER is automatically displayed right-to-left.
این تگ برای برجسته نشان دادن قسمتی از متن و highlight کرده آن قسمت مورد استفاده قرار می گیرد.
<p>This is some <mark>highlighted</mark> text.</p>
<p>Here are <mark>some more highlighted</mark> text.</p>This is some highlighted text.
Here are some more highlighted text.
این تگ برای نشان دادن نتیجه یک محاسبه استفاده می شود. به طور معمول این تگ یک منطقه را تعیین می کند که برای نمایش خروجی متن از برخی از محاسبات استفاده می شود (مانند نتیجه محاسبات انجام شده توسط یک اسکریپت).
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="100"> =
<output name="result" for="a b"></output>
</form>این تگ نشان دهنده تکمیل پیشرفت یک کار است. این تگ به طور معمول برای نشان دادن اینکه چه مقدار از یک کار تکمیل شده است، مانند بارگذاری چیزی در یک صفحه یا روند ثبت نام استفاده می شود. به طور معمول به عنوان یک نوار پیشرفت نمایش داده می شود و اغلب به عنوان یک درصد از ۰ تا ۱۰۰٪ مشخص می شود.
<progress value="22" max="100"></progress>
این تگ تعریف می کند که چه چیزی نشان داده شود، اگر مرورگر از حاشیه نویسی ruby پشتیبانی نکند. حاشیه نویسی روبی برای نشان دادن تلفظ کاراکترهای شرق آسیا، مانند کاراکترهای چینی یا ژاپنی استفاده می شود.
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>漢 字
این تگ برای توضیح یا تلفظ صحیح حروف (برای تایپوگراف شرق آسیا) در حاشیه نویسی ruby را مشخص می کند. تگ rt همراه با تگ rp و تگ ruby بکار برده می شود، تگ ruby شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ rt برای دادن اطلاعات و اختیار به تگ rp که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>漢 字