హెచ్ఎంఎల్ <h1> నుండి <h6> టాగులు

  • ముందు పేజీ <frameset>
  • తరువాత పేజీ <head>

నిర్వచనం మరియు ఉపయోగం

<h1> మొదలు నుండి <h6> టాగులు హెచ్ఎంఎల్ శీర్షికలను నిర్వచించడానికి ఉపయోగిస్తారు

<h1> ఎక్కువగా కనిపించే శీర్షికను నిర్వచించండి<h6> ఎక్కువగా కనిపించని శీర్షికను నిర్వచించండి

దృష్టి దేనికి పడుండి

ప్రతి పేజీలో ఒక మాత్రమే ఉపయోగించండి <h1> - ఇది మొత్తం పేజీ ప్రధాన శీర్షిక / ప్రధాన అంశాన్ని ప్రతినిధీకరిస్తుంది. మరియు, శీర్షిక స్థాయిని తప్పక విడిచిపెట్టకూడదు - <h1> ప్రారంభించండి మరియు ఉపయోగించండి <h2>ఇలా కొనసాగించండి。

హెచ్ ఎలంట్స్ నిర్దిష్ట సెమాంటిక్ కలిగి ఉండటంతో, మీరు డాక్యుమెంట్ నిర్మాణం కోసం సరిగ్గా తగిన టాగ్ స్థాయిని ఎంచుకోండి. కాబట్టి, ఒకే వరుసలో ఫాంట్ సైజ్ మార్పులను శీర్షిక టాగ్స్ ద్వారా చేయకూడదు. పునఃప్రతిపాదించబడినంతవరకు, అనిమేటిక్ స్టైల్స్ ఉపయోగించండి మరియు అందమైన ప్రదర్శన సాధించండి.

మీరు HTML టాగ్స్ యొక్క ఎంపిక మరియు ఉపయోగం గురించి ఎక్కువ తెలుసుకోవాలంటే, ఈ పుస్తకాన్ని చదవండి:వెబ్ నాణ్యత》。

మరియు చూడండి:

HTML పాఠ్యం:HTML శీర్షికలు

HTML DOM పరిచయం మానికలు:హెడింగ్ ఆబ్జెక్ట్

ఉదాహరణ

ఉదాహరణ 1

ఆరు వివిధ HTML శీర్షికలు:

<h1>ఇది శీర్షిక 1</h1>
<h2>ఇది శీర్షిక 2</h2>
<h3>ఇది శీర్షిక 3</h3>
<h4>ఇది శీర్షిక 4</h4>
<h5>ఇది శీర్షిక 5</h5>
<h6>ఇది శీర్షిక 6</h6>

మీరే ప్రయత్నించండి

ఉదాహరణ 2

శీర్షికల బ్యాక్గ్రౌండ్ కలర్ మరియు టెక్స్ట్ కలర్ సెట్ చేయండి (CSS ఉపయోగించండి):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

మీరే ప్రయత్నించండి

ఉదాహరణ 3

శీర్షికల సరికొత్త విధంగా అనుసరించండి (CSS ఉపయోగించండి):

<h1 style="text-align:center">ఇది శీర్షిక 1</h1>
<h2 style="text-align:left">ఇది శీర్షిక 2</h2>
<h3 style="text-align:right">ఇది శీర్షిక 3</h3>
<h4 style="text-align:justify">ఇది శీర్షిక 4</h4>

మీరే ప్రయత్నించండి

గ్లోబల్ అట్రిబ్యూట్స్

<h1> - <h6> టాగ్స్ అనేక ఇవెంట్ అట్రిబ్యూట్స్ ను మద్దతు చేస్తాయి HTML లోని గ్లోబల్ అట్రిబ్యూట్స్。

ఇవెంట్ అట్రిబ్యూట్స్

<h1> - <h6> టాగ్స్ అనేక ఇవెంట్ అట్రిబ్యూట్స్ ను మద్దతు చేస్తాయి HTML లోని ఇవెంట్ అట్రిబ్యూట్స్。

డిఫాల్ట్ CSS సెట్టింగ్స్

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరించబడతాయి <h1> కంపోనెంట్:

ఉదాహరణ 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

మీరే ప్రయత్నించండి

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరించబడతాయి <h2> కంపోనెంట్:

ఉదాహరణ 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

మీరే ప్రయత్నించండి

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరించబడతాయి <h3> కంపోనెంట్:

ఉదాహరణ 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

మీరే ప్రయత్నించండి

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరించబడతాయి <h4> కంపోనెంట్:

ఉదాహరణ 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

మీరే ప్రయత్నించండి

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరించబడతాయి <h5> కంపోనెంట్:

ఉదాహరణ 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

మీరే ప్రయత్నించండి

అత్యంత బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను వివరించబడతాయి <h6> కంపోనెంట్:

ఉదాహరణ 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

మీరే ప్రయత్నించండి

బ్రౌజర్ మద్దతు

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు
  • ముందు పేజీ <frameset>
  • తరువాత పేజీ <head>