HTML Document Structure

HTML Document Structure అంటే ఏమిటి?

ప్రతి HTML web page కి ఒక క్రమబద్ధమైన document structure ఉంటుంది. ఈ structure browser కి page లోని content ను సరిగ్గా అర్థం చేసుకోవడానికి సహాయపడుతుంది.

ఒక సాధారణ HTML document లో ప్రధానంగా <html>, <head> మరియు <body> elements ఉంటాయి.

ప్రధాన భాగాలు

<html>: మొత్తం HTML document ను కలిగి ఉంటుంది.
<head>: page గురించి information ను కలిగి ఉంటుంది. ఉదాహరణకు <title> element.
<title>: browser tab లో కనిపించే పేరును నిర్ణయిస్తుంది.
<body>: browser page పై కనిపించే content ను కలిగి ఉంటుంది.

<head> లో ఉన్న information సాధారణంగా page లో నేరుగా కనిపించదు. <body> లో ఉన్న headings, paragraphs మరియు ఇతర content మాత్రమే web page పై కనిపిస్తాయి.

Simple Explanation

సులభమైన వివరణ

HTML document ను ఒక ఇంటిలా ఊహించండి. <html> మొత్తం ఇల్లు, <head> ఇంటి గురించి అవసరమైన వివరాలు, <body> మనకు కనిపించే గదులు మరియు వస్తువులు వంటివి.

ప్రతి opening tag కి సాధారణంగా సరైన closing tag ఉంటుంది. ఉదాహరణకు <body> తో ప్రారంభించిన భాగాన్ని </body> తో ముగించాలి.

Real-Life Example

నిజ జీవిత ఉదాహరణ

ఒక పుస్తకంలో cover page, పుస్తకం గురించి వివరాలు మరియు అసలు chapters ఉంటాయి. అదే విధంగా HTML document లో <head> page సమాచారం కోసం, <body> అసలు కనిపించే content కోసం ఉపయోగించబడుతుంది.

Code Examples

Basic HTML Document Structure

<!DOCTYPE html>
<html lang="te">
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is my web page.</p>
</body>
</html>

ఈ code లో <html> మొత్తం document ను కలిగి ఉంటుంది. <head> లో <title> ఉంది. <body> లో browser పై కనిపించే <h1> మరియు <p> elements ఉన్నాయి.

The browser tab shows My Web Page. The page displays Welcome to HTML as a large heading and This is my web page. below it.

Changing the Page Title and Body Content

<!DOCTYPE html>
<html lang="te">
<head>
    <title>About Me</title>
</head>
<body>
    <h1>About Me</h1>
    <p>I am learning web development.</p>
</body>
</html>

<title> లోని text browser tab లో కనిపిస్తుంది. <body> లోని <h1> మరియు <p> text web page పై కనిపిస్తాయి.

The browser tab shows About Me. The page displays About Me as a large heading and I am learning web development. below it.

Line-by-Line Explanation

<!DOCTYPE html>

ఇది HTML document అని browser కి తెలియజేసే declaration. దీని పూర్తి వివరణను తదుపరి పాఠంలో నేర్చుకుంటారు.

<html lang=”te”>

ఇది మొత్తం HTML document యొక్క ప్రారంభం. lang attribute document యొక్క భాషను సూచిస్తుంది.

<head>

ఇది page గురించి ఉండే information కోసం ఉపయోగించే భాగం ప్రారంభం.

<title>My Web Page</title>

<title> element లోని text browser tab లో కనిపిస్తుంది.

</head>

ఇది <head> భాగాన్ని ముగిస్తుంది.

<body>

ఇది browser page పై కనిపించే content ఉండే భాగం ప్రారంభం.

<h1>Welcome to HTML</h1>

ఇది page పై పెద్ద heading ను చూపిస్తుంది.

<p>This is my web page.</p>

ఇది page పై ఒక paragraph ను చూపిస్తుంది.

</body>

ఇది <body> భాగాన్ని ముగిస్తుంది.

</html>

ఇది మొత్తం HTML document ను ముగిస్తుంది.

Try It

Try this HTML code:

Example

<!DOCTYPE html>
<html lang="te">
<head>
    <title>My HTML Page</title>
</head>
<body>
    <h1>My First Page</h1>
    <p>Learning HTML is fun.</p>
</body>
</html>

Try It Yourself »

Practice

Practice: Starter code లోని page title ను మీకు నచ్చిన పేరుగా మార్చండి.

Hint: బ్రౌజర్ tab పేరు మార్చడానికి <title> element లోని text ను మార్చండి.

Practice: మీ పేరు మరియు మీ గురించి ఒక sentence ను page పై చూపించండి.

Hint: <h1> లో మీ పేరు, <p> లో sentence రాయండి.

Common Mistakes

హెచ్చింగ్ మరియు paragraph ను <head> లో రాయడం.
Browser పై కనిపించే content ను <body> లో మాత్రమే ఉంచండి.

<body> లేదా <html> closing tag ను మర్చిపోవడం.
ప్రతి opening tag కి సరైన closing tag ఉందో తనిఖీ చేయండి.

<title> లోని text page పై కనిపిస్తుందని అనుకోవడం.
<title> text సాధారణంగా browser tab లో కనిపిస్తుంది; page content కోసం <body> ఉపయోగించాలి.

Elements ను సరైన nesting లేకుండా రాయడం.
ఒక element లో మరొక element ఉంటే, వాటిని సరైన క్రమంలో close చేయండి.

Interview Questions

HTML document లో <html> element యొక్క ఉపయోగం ఏమిటి?

Answer: <html> element మొత్తం HTML document ను కలిగి ఉండే root element.

<head> మరియు <body> మధ్య తేడా ఏమిటి?

Answer: <head> లో page గురించి metadata మరియు <title> వంటి information ఉంటుంది. <body> లో browser పై కనిపించే content ఉంటుంది.

<title> element ఎక్కడ కనిపిస్తుంది?

Answer: <title> లోని text సాధారణంగా browser tab లేదా window title లో కనిపిస్తుంది.

Exam Questions

ఒక basic HTML document లో ఉండే మూడు ప్రధాన elements ఏవి?

Answer:

<html>, <head> మరియు <body>.

Web page పై కనిపించే content ను ఏ భాగంలో రాయాలి?

Answer:

Web page పై కనిపించే content ను <body> భాగంలో రాయాలి.

Browser tab పేరు మార్చడానికి ఏ element ఉపయోగిస్తారు?

Answer:

Browser tab పేరు మార్చడానికి <title> element ఉపయోగిస్తారు.

Quick Revision

<html> మొత్తం HTML document ను కలిగి ఉంటుంది.
<head> లో page గురించి అవసరమైన information ఉంటుంది.
<title> browser tab లో కనిపించే పేరును నిర్ణయిస్తుంది.
<body> లో browser పై కనిపించే content ఉంటుంది.
Opening tag మరియు closing tag లను సరైన క్రమంలో ఉపయోగించాలి.

HTML Document Structure