.: محسن سمسارپور :.

وب سایت شخصی محسن سمسارپور

10 تفاوت اساسی Html5 با Html4

تفاوت های html5 با html4

بنام حق

درود بر دوستان عزیزم که همیشه همراه من هستند. امروز قصد دارم 10 تفاوت اساسی بین html5 و html4 رو براتون شرح بدم. در ابتدا باید برای اون دسته از دوستانی که تازه شروع کردن به طراحی وب سایت یه توضیح بدم که html زبان نشانه گذاری سطح بالاست و برای ساخت صفحات وب استاتیک می تونید از اون استفاده کنید. البته این زبان برای طراحی و ایجاد وب سایت های داینامیک هم مورد نیاز هر برنامه نویس وب هست و بهتره که با اون آشنایی اولیه داشته باشه.

و اما 10 تفاوت اساسی …

1 |  html5 در حال پیشرفت است …

اول باید گفت که html5 همچنان در حال پیشرفت است. در واقع این زبان یک استاندارد تکمیل شده نیست و همچنان به روز رسانی انجام می شود. این به روز رسانی ها ممکن است چندین بار در سال انجام شود. ولی جای نگرانی نیست، کلیه مواردی که در html4 به عنوان مباحث پایه ای مطرح بودند در استاندارد جدید هم قابل پیاده سازی هستند. در یک جمله می توان گفت افرادی که با html4 آشنا هستند هیچ نگرانی برای یادگیری و استفاده از html5 نخواهند داشت. به گفته تولید کنندگان این استاندارد می توان با html4 ساخت و با html5 بازی کرد.

2 |  دستورات ساده شده …

در html5 دستورات بسیار ساده شده اند. به عنوان مثال شما برای تعریف doctype فقط کافی است از دستور <!doctype html> استفاده کنید و همین کافی است. البته لیست دستوراتی که ساده شده اند بیشتر از این هاست اما در این مقاله به همین مورد اکتفا می کنیم.

3 | اضافه شدن تگ <canvas> …

امروزه خیلی از کارشناسان معتقدند که با اضافه شدن این تگ کار انیمیشن های فلش تمام شده و دیگر فلش مرده است. البته حرف درستی است چون تگ canvas اکثر امکانات انیمیشنی فلش را در صفحات وب در اختیار کاربر قرار می دهد. اما باز هم باید بررسی کرد و زمان این موضوع را بهتر مشخص خواهد نمود. تگ canvas دارای امکانات بسیار زیاد برای ساخت گرافیک ها و انیمیشن های تحت وب می باشد و نیازی هم به پلیر برای اجرای آن نیست مشکلی که فلش دارد و آن را در معرض خطر “مرگ” قرار داده است.

 

4 | اضافه شدن تگ های معنایی …

تگ های معنایی یا Semantic Tag ها مواردی هستند که مفهوم یا موضوع خاصی را مشخص می کنند. به عنوان مثال تگ های <header> و <footer> از این نوع تگ ها هستند. در واقع دیگر نیازی به تعریف این موارد در css و استفاده کلاس آن ها در div های خاص نیست. با استفاده از تگ های معنایی شما می توانید شکل کلی و ساختار اصلی وب سایت خود را ایجاد کنید. برای درک بهتر موضوع می توانید از عکس زیر استفاده کنید.

تگ های معنایی در html5
تگ های معنایی در html5

5 | تگ های جدید <section> و <article> …

ساختار کد نویسی و طراحی صفحات وب در html5 به سمت مفهومی شدن پیش رفته است. استفاده از این تگ ها برای شناسایی بخش های مقاله ای در وب سایت بسیار کارایی دارند. در واقع وقتی شما از این تگ ها برای مقالات خود استفاده می کنید موتورهای جستجو می توانند آن ها را بهتر شناسایی کنند و در مجموع به بالا رفتن رتبه وب سایت شما و seo بهتر آن منتهی می گردد.

6 |  اضافه شدن تگ های <menu> و <figure> …

برای ایجاد منوها می توانید از تگ های جدید که در استاندارد html5 وجود دارند استفاده کنید. همچنین برای تنظیم و نظم دهی بین متن و عکس ها در وب سایت خود می توانید از تگ جدیدی به نام <figure> استفاده کنید.

7 |  تگ های <video> و <audio> …

پخش کننده یا پلیر صوت و تصویر همیشه یکی از مشکلات اکثر برنامه نویسان وب بوده است. html5 برای رفع این مشکل دو تگ جدید در ساختار خود ایجاد کرده است. این دو تگ به مرورگر اعلام می کند که فایل های صوتی یا تصویری در وب سایت وجود دارد و مرورگر یک پلیر یا پخش کننده ساده اما کاربردی را در کنار فایل های صوتی و تصویری نمایش می دهد. بی نیاز شدن کاربران از نصب پلیرهای flash و یا دیگر موارد کمک شایانی به کارایی بهتر وب سایت های html5 کرده است.

 

8 |  فرم های جدید در html5 …

ایجاد فرم ها همیشه یکی از دغدغه های برنامه نویسان وب بوده است. html5 با اضافه کردن خاصیت های جدید برای فرم ها امکان شناسایی و اعتبارسنجی فرم را به صورت لوکال و سمت کلاینت ایجاد کرده است. به عنوان مثال برای وارد کردن ایمیل یک استاندارد وجود دارد وقتی شما فرمی ایجاد می کنید که کاربر باید ایمیل را وارد کند دیگر نیازی نیست برای اعتبارسنجی آن کاری کند. html5 همه کارها را انجام می دهد و اگر کاربر ایمیل اشتباهی وارد کرده باشد به او پیغام مناسب را می دهد.

9 | خداحافظی با <b> و <font> و …

در html5 اصل بر این است که شما برای طراحی گرافیکی از css استفاده کنید به همین دلیل دیگر به شما اجازه داده نخواهد شد که از تگ های تنظیم کننده نوع فونت در کدهای html به صورت مستقیم استفاده کنید. این موضوع یکی از برتری های html5 نسبت به hml4 است که به مرور زمان ثابت خواهد شد.

10 | عدم پشتیبانی از <center> و <big> و …

همان طور که گفته شد تنظیمات گرافیکی و چینشی در این نسخه از html با استفاده از فایل های جانبی css انجام می شود. مطمئن هستم که شما هم کم کم از این تگ ها استفاده نخواهید کرد و استفاده از آن ها را به ضرر طراحی سایت خود می بینید.

 

نتیجه گیری :

همانطور که مشاهده کردید html5 بسیار ساده تر، روان تر و به صرفه تر خواهد بود پس عجله کنید و دیگر وقت خود را برای نوشتن تگ های تاریخ گذشته html4 صرف نکنید. البته به دوستانی که از html اطلاعات اندکی دارند پیشنهاد می کنم که با html4 شروع کنند و رفته رفته به سمت html5 رو بیارن. البته بازه زمانی یادگیری خودتون رو بهتره که کوتاه کنید و به سرعت به سمت html5 برید.

 

در انتها از کلیه دوستانی که در مقالات قبلی برای من نظرشون رو نوشتن سپاسگزارم و خوشحال می شم دوستان دیگه هم نظرات خودشون رو برام بنویسن.

موفق و پیروز باشید و پیشاپیش سال نو رو هم شادباش می گم به همه …

(7023)

34 پاسخ برای “10 تفاوت اساسی Html5 با Html4”

  1. با سلام و احترام
    بازم هر روز بهتر از دیروز با مطلبی کاربردی از آقای سمسارپور عزیز
    ممنون از مطلب خوبتون

  2. سلام محسن جان
    آقا خيلي عالي بود! باورت ميشه اينارو نمي دونستم!
    ان شاالله خدا يك در دنيا صد در آخرت بهت بده!(منظورم زن خوبه!!! 🙂 )
    موفق باشي

  3. آقا دم شما گرم ، خیلیم خوب
    فک کنم با این محدودیت برنامه نویسی خواسته شده تو بازار کار واسه فلش ، رو آوردن به html 5 خیلی خوب باشه با این حساب.

    1. بله حق با شماست و احتمالا تحت وب در سال های آینده html5 جایگاه خوبی خواهد داشت.

  4. با سلام آقای سمسارپور
    برای درس طراحی صفحات وب باید سایتی طراحی کنم میشه منو راهنمای کنید که چه سایتی طراحی کنم که بتونم گرافیک ظاهریش خوب باشه.با زبان html وcssو java .نیاز به بانک اطلاعاتی هم نداره.میشه منو راهنمایی کنید؟

    1. ببینید باید بدونید که استاد شما چه چیزی مد نظرشون هست به عنوان مثال برخی از اساتید خواستار این هستند که شما از ابتدا طراحی رو انجام بدید و برخی دیگه نظرشون این هست که شما بتونید بر روی یک قالب آماده تغییرات انجام بدید. حالا اگه می دونید نظر استادتون چی هست بگید شاید بهتر بتونم کمک کنم

  5. ممنون از اینکه جوابمو دادید.از ابتدا باید طراحی انجام بدم انتخاب اینکه چه سایتی می خوام طراحی کنم به عهده خودم هست.خودم خیلی علاقه به طراحی صفحه هات وب دارم ولی اصلا نمی دونم باید از کجا شروع کنم؟

    1. خوب ببینید جزئیات مختلفی هست که باید در نظر بگیرید و شروع به طراحی انجام بدید. روند معمول این هست که یک طرح گرافیکی در نرم افزار فتوشاپ زده می شه و بعد از اون برش های لازم انجام می شه و طرح به صورت html در میاد. البته می شه کاری کرد که نیازی به گرافیک به صورت فایل نباشه و کل سایت رو با html و css طراحی کرد.
      به هر حال اگر یه مقدار واضح تر بتونید توضیح بدید که دقیقا منظورتون از اینکه نمی دونید از کجا باید شروع کنید چیه شاید بهتر بتونم کمکتون کنم. در ضمن معمولا چند روز طول می کشه تا سر بزنم به سایت برای همین دیر جواب دادم اگر بتونید به ایمیل بفرستید سریع تر می تونم پاسخ گو باشم
      mohsensemsarpour@gmail.com

    1. سپاس از شما باب اسفنجی عزیز لطف داری دوست خوب امیدوارم واقعا بدرد بخور باشن !

  6. سلام آقای سمسارپور
    ممکنه لطف کنید آموزش xml هم آموزش بدید.
    یا حداقل منبعی معرفی کنید.
    با تشکر

    1. بنام حق
      درود بر شما
      در کوتاه ترین زمان سعی خواهم کرد مقاله ای با این عنوان تهیه کنم و بر روی سایت قرار دهم. لطف کنید ایمیل خود را در سمت راست سایت وارد کنید و مشترک خبرنامه شوید تا مقالات جدید به ایمیل شما ارسال گردد.
      سپاس از شما
      یا حق

  7. سلام آقای سمسار پور من اگه بخوام برای اولین بار سایت آپلود کنم به نظر شما هاست ودامنه مجانی بخرم یا خیر ؟از کدوم سایت بهترو مورد اعتماد تره اگه میشه جواب روبه ایمیلم بفرستید ممنون میشم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *