HTML5 మిగిలిన మార్పులు

హెచ్ఎంఎల్4 నుండి హెచ్ఎంఎల్5 కు మార్చడం

ఈ చాప్టర్ హెచ్ఎంఎల్4 పేజీని హెచ్ఎంఎల్5 పేజీగా మార్చడాన్ని పరిచయం చేస్తుంది.

ఈ చాప్టర్ హెచ్ఎంఎల్4 పేజీని హెచ్ఎంఎల్5 పేజీగా మార్చడాన్ని ప్రదర్శిస్తుంది, మూల విషయం మరియు నిర్మాణాన్ని నాశనం చేయకుండా.

పరిశీలన:మీరు హెచ్ఎంఎల్4 మరియు XHTML నుండి హెచ్ఎంఎల్5 కు మార్చవచ్చు అనేక పద్ధతులు ఉన్నాయి.

సాధారణ హెచ్ఎంఎల్4 సాధారణ హెచ్ఎంఎల్5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

సాధారణ హెచ్ఎంఎల్4 పేజీ

ఉదాహరణ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>న్యూస్</li>
    <li>క్రీడలు</li>
    <li>వాతావరణం</li>
  </ul>
</div>
<div id="content">
<h2>న్యూస్ సెక్షన్</h2>
<div id="post">
  <h2>న్యూస్ వ్యాసం</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>న్యూస్ వ్యాసం</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. అన్ని హక్కులు ప్రత్యేకించబడినవి.</p>
</div>
</body>
</html>

స్వయంగా ప్రయత్నించండి

హెచ్ఎంఎల్5 డోక్యుమెంట్ టాయిప్ దిగువకు మార్చుకోండి

డాక్యుమెంట్ టాయిప్ మార్చుకోండి హెచ్ఎంఎల్4 నుండి:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

హెచ్ఎంఎల్5 డాక్యుమెంట్ టాయిప్ మార్చుకోండి:

<!DOCTYPE html>

స్వయంగా ప్రయత్నించండి

హెచ్ఎంఎల్5 కోడింగ్ దిగువకు మార్చుకోండి

కోడింగ్ సమాచారాన్ని మార్చుకోండి హెచ్ఎంఎల్4 నుండి:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

హెచ్ఎంఎల్5 దిగువకు మార్చుకోండి

<meta charset="utf-8">

స్వయంగా ప్రయత్నించండి

షివ్ జోడించండి

అన్ని ఆధునిక బ్రౌజర్లు హెచ్ఎంఎల్5 సెమాంటిక్ ఎలిమెంట్స్ మద్దతు ఇస్తాయి.

పదకొని బ్రౌజర్లను "తెలియని ఎలిమెంట్స్" దాచుకోవడానికి "బోధించండి" చేయవచ్చు.

ఇంటర్నెట్ ఎక్స్ప్లోరర్ మద్దతు కొరకు జోడించబడిన షివ్:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

స్వయంగా ప్రయత్నించండి

పరిశీలన:హెచ్ఎంఎల్5 బ్రౌజర్ మద్దతులో మరింత వివరాలను చదవండి మరియు షివ్ గురించి తెలుసుకోండి.

హెచ్ఎంఎల్5 సెమాంటిక్ ఎలిమెంట్స్ కొరకు సెస్సు స్టైల్స్ జోడించండి

ఇప్పటికే ఉన్న సెస్సు స్టైల్స్ చూడండి:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
హెచ్ఎంఎల్5 సెమాంటిక్ ఎలిమెంట్స్ కొరకు సమానమైన సెస్సు స్టైల్స్ తప్పుగా ప్రతికృతం చేయండి:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

స్వయంగా ప్రయత్నించండి

హెచ్ఎంఎల్5 <header> మరియు <footer> దిగువకు మార్చుకోండి

ఐడియు="header" మరియు ఐడియు="footer" యొక్క <div> ఎలిమెంట్స్ ను మార్చుకోండి:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. అన్ని హక్కులు ప్రత్యేకించబడ్డాయి.</p>
</div>

ఇటువంటి HTML5 సెమాంటిక్ ఎలమెంట్‌లు <header> మరియు <footer> లో మార్చండి:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. All rights reserved.</p>
</footer>

స్వయంగా ప్రయత్నించండి

ఇటువంటి HTML5 <nav> లో మార్చండి:

id="menu" యొక్క ఈ <div> ఎలమెంట్ను మార్చండి:

<div id="menu">
  <ul>
    <li>న్యూస్</li>
    <li>Sports</a></li>
    <li>వాతావరణం</li>
  </ul>
</div>

ఇటువంటి HTML5 సెమాంటిక్ ఎలమెంట్‌లు <nav> లో మార్చండి:

<nav>
  <ul>
    <li>న్యూస్</li>
    <li>Sports</a></li>
    <li>వాతావరణం</li>
  </ul>
</nav>

స్వయంగా ప్రయత్నించండి

ఇటువంటి HTML5 <section> లో మార్చండి:

id="content" యొక్క ఈ <div> ఎలమెంట్ను మార్చండి:

<div id="content">
.
.
.
</div>

ఇటువంటి HTML5 సెమాంటిక్ ఎలమెంట్‌లు <section> లో మార్చండి:

<section>
.
.
.
</section>

స్వయంగా ప్రయత్నించండి

ఇటువంటి HTML5 <article> లో మార్చండి:

class="post" అన్ని ఈ <div> ఎలమెంట్లను మార్చండి:

<div class="post">
  <h2>న్యూస్ వ్యాసం</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

ఇటువంటి HTML5 సెమాంటిక్ ఎలమెంట్‌లు <article> లో మార్చండి:

<article>
  <h2>న్యూస్ వ్యాసం</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

స్వయంగా ప్రయత్నించండి

ఈ 'ఇంకా అవసరమయ్యేది కాదని' షైల్స్‌ను తొలగించండి:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

స్వయంగా ప్రయత్నించండి

సాధారణ HTML5 పేజీ

చివరిలో మీరు <head> టాగ్‌ను తొలగించవచ్చు. HTML5 లో వాటికి అవసరం లేదు:

ఉదాహరణ

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>న్యూస్</li>
    <li>క్రీడలు</li>
    <li>వాతావరణం</li>
  </ul>
</nav>
<section>
<h2>న్యూస్ సెక్షన్</h2>
<div id="post">
  <h2>న్యూస్ వ్యాసం</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>న్యూస్ వ్యాసం</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. అన్ని హక్కులు ప్రత్యేకించబడినవి.</p>
</footer>
</body>
</html>

స్వయంగా ప్రయత్నించండి

<article> <section> మరియు <div> మధ్య తేడా

HTML5 పేరాలు లో, <article> <section> మరియు <div> మధ్య తేడా చిన్నది, అర్ధంకారం కాదు.

HTML5 పేరాలు లో, <section> ఎలిమెంట్ సంబంధిత ఎలిమెంట్స్ బ్లాక్ ఎలిమెంట్ గా నిర్వచించబడింది.

<article> ఎలిమెంట్ సంబంధిత ఎలిమెంట్స్ పూర్తి స్వయం అంతర్భాగం బ్లాక్ ఎలిమెంట్ అని నిర్వచించబడింది.

<div> ఎలిమెంట్ కుడి ఉపసంబంధిత బ్లాక్ ఎలిమెంట్ అని నిర్వచించబడింది.

ఎలా అర్థం చేసుకోవచ్చు?

పైని ఉదాహరణలో, మేము <section> ను సంబంధిత <articles> కంటైనర్ గా ఉపయోగించాము.

కానీ, మేము కూడా <article> ను వ్యాసం కంటైనర్ గా ఉపయోగించవచ్చు.

కొన్ని వివిధ ఉదాహరణలు ఇలా ఉన్నాయి:

లో లో ఉన్న ఉంది:
<article>
<h2>ప్రసిద్ధ నగరాలు</h2>
<article>
<h2>లండన్</h2>
<p>లండన్ ఇంగ్లాండ్ రాజధాని నగరం. ఇది యునైటెడ్ కింగ్డమ్ లో అత్యంత జనావాసం కలిగిన నగరం,</p>
మెట్రోపాలిటన్ ప్రాంతం లో 13 మిలియన్ జనావాసం కలిగి ఉంది.</p>
</article>
<article>
<h2>పారిస్</h2>
<p>పారిస్ ఫ్రాన్స్ రాజధాని మరియు అత్యంత జనావాసం కలిగిన నగరం.</p>
</article>
<article>
<h2>టోక్యో</h2>
<p>టోక్యో జపాన్ రాజధాని, గ్రేటర్ టోక్యో ప్రాంతం కేంద్రం,</p>
మరియు ప్రపంచంలో అత్యంత జనావాసం కలిగిన మెట్రోపాలిటన్ ప్రాంతం.</p>
</article>
</article>

స్వయంగా ప్రయత్నించండి

<article> లో <div> అని ఉంటుంది:
<article>
<h2>ప్రసిద్ధ నగరాలు</h2>
<div class="city">
<h2>లండన్</h2>
<p>లండన్ ఇంగ్లాండ్ రాజధాని నగరం. ఇది యునైటెడ్ కింగ్డమ్ లో అత్యంత జనావాసం కలిగిన నగరం,</p>
మెట్రోపాలిటన్ ప్రాంతం లో 13 మిలియన్ జనావాసం కలిగి ఉంది.</p>
</div>
<div class="city">
<h2>పారిస్</h2>
<p>పారిస్ ఫ్రాన్స్ రాజధాని మరియు అత్యంత జనావాసం కలిగిన నగరం.</p>
</div>
<div class="city">
<h2>టోక్యో</h2>
<p>టోక్యో జపాన్ రాజధాని, గ్రేటర్ టోక్యో ప్రాంతం కేంద్రం,</p>
మరియు ప్రపంచంలో అత్యంత జనావాసం కలిగిన మెట్రోపాలిటన్ ప్రాంతం.</p>
</div>
</article>

స్వయంగా ప్రయత్నించండి

<article> లో <section> లో <div> అని ఉంటుంది:
<article>
<section>
<h2>ప్రసిద్ధ నగరాలు</h2>
<div class="city">
<h2>లండన్</h2>
<p>లండన్ ఇంగ్లాండ్ రాజధాని నగరం. ఇది యునైటెడ్ కింగ్డమ్ లో అత్యంత జనావాసం కలిగిన నగరం,</p>
మెట్రోపాలిటన్ ప్రాంతం లో 13 మిలియన్ జనావాసం కలిగి ఉంది.</p>
</div>
<div class="city">
<h2>పారిస్</h2>
<p>పారిస్ ఫ్రాన్స్ రాజధాని మరియు అత్యంత జనావాసం కలిగిన నగరం.</p>
</div>
<div class="city">
<h2>టోక్యో</h2>
<p>టోక్యో జపాన్ రాజధాని, గ్రేటర్ టోక్యో ప్రాంతం కేంద్రం,</p>
మరియు ప్రపంచంలో అత్యంత జనావాసం కలిగిన మెట్రోపాలిటన్ ప్రాంతం.</p>
</div>
</section>
<section>
<h2>ప్రసిద్ధ దేశాలు</h2>
<div class="country">
<h2>ఇంగ్లాండ్</h2>
<p>లండన్ ఇంగ్లాండ్ రాజధాని నగరం. ఇది యునైటెడ్ కింగ్డమ్ లో అత్యంత జనావాసం కలిగిన నగరం,</p>
మెట్రోపాలిటన్ ప్రాంతం లో 13 మిలియన్ జనావాసం కలిగి ఉంది.</p>
</div>
<div class="country">
<h2>ఫ్రాన్స్</h2>
<p>పారిస్ ఫ్రాన్స్ రాజధాని మరియు అత్యంత జనావాసం కలిగిన నగరం.</p>
</div>
<div class="country">
<h2>జపాన్</h2>
<p>టోక్యో జపాన్ రాజధాని, గ్రేటర్ టోక్యో ప్రాంతం కేంద్రం,</p>
మరియు ప్రపంచంలో అత్యంత జనావాసం కలిగిన మెట్రోపాలిటన్ ప్రాంతం.</p>
</div>
</section>
</article>

స్వయంగా ప్రయత్నించండి