Theory
લખાણની એકવિધ દીવાલ
એવું છાપું વાંચવાનું કલ્પો જ્યાં દરેકે દરેક શબ્દ એકસરખો દેખાય. કોઈ bold મથાળાં નહીં, કોઈ italic પુસ્તકનાં નામ નહીં, અને કોઈ highlight કરેલાં અવતરણો નહીં. તમારી આંખો સેકન્ડોમાં થાકી જાય! તમારું personal portfolio બનાવતી વખતે, તમારો bio અને project નાં વર્ણનો બિલકુલ આ જ પડકારનો સામનો કરે છે. જો તમે શબ્દોનો સપાટ ટુકડો રજૂ કરો, recruiters એ છોડી દેશે. તો આપણે વાચકની આંખોને તમારી સિદ્ધિઓના સૌથી મહત્ત્વના ભાગો તરફ કેવી રીતે દોરીએ?
Theory
અભ્યાસના Highlighters
યાદ કરો કે તમે university ની પરીક્ષાઓ માટે કેવી રીતે તૈયારી કરો છો. એક ગીચ પ્રકરણ વાંચતી વખતે, તમે ખાલી નિષ્ક્રિય રીતે વાંચતા નથી. તમે નિર્ણાયક શબ્દો નિશાન કરવા પીળો highlighter વાપરો છો, વ્યાખ્યાઓ નીચે લીટી દોરવા લાલ પેન વાપરો છો, અને માળખું સમજવા મોટાં પ્રકરણનાં મથાળાં શોધો છો. Text formatting tags એ તમારા digital highlighters અને પેન છે. એ browser ને કહે છે કે કયા શબ્દો વધારાનું વજન, ભાર, કે માળખું લાયક છે.
Theory
Text Formatting Tags
Web design માં, text formatting tags એ ખાસ elements છે જે લખાણના content નો દૃશ્ય દેખાવ અને અર્થપૂર્ણ meaning બદલે છે. આ tags મોટે ભાગે physical tags માં વહેંચાયેલા છે, જે માત્ર દૃશ્ય દેખાવ બદલે છે જેમ કે bold માટે <b> કે italic માટે <i>, અને logical tags માં, જે search engines અને screen readers માટે અર્થ ઉમેરે છે જેમ કે ઊંચા મહત્ત્વ માટે <strong> કે ભાર માટે <em>. Headings <h1> થી <h6> લખાણનો ક્રમ વ્યાખ્યાયિત કરે છે, જ્યારે <p> standard ફકરાના blocks વ્યાખ્યાયિત કરે છે.
At a glance
HTML5 માં મુખ્ય text formatting tags ની સરખામણી.
| Tag | પ્રકાર | દૃશ્ય પરિણામ | અર્થપૂર્ણ Meaning |
|---|---|---|---|
| <b> | Physical | Bold લખાણ | કેવળ દૃશ્ય જાડાપણું |
| <strong> | Logical | Bold લખાણ | ઊંચું મહત્ત્વ કે તાકીદ |
| <i> | Physical | Italic લખાણ | કેવળ દૃશ્ય ત્રાંસાપણું |
| <em> | Logical | Italic લખાણ | ભાર મુકાયેલો |
| <mark> | Logical | પીળી પશ્ચાદભૂમિ | Highlight કરેલો સંદર્ભ |
| <u> | Physical | નીચે લીટીવાળું લખાણ | દૃશ્ય નીચેની લીટી |
Practical
Formatting a Portfolio About Section
<h1>About Me</h1>
<p>I am a <b>second year BCA student</b> passionate about <i>web engineering</i>.</p>
<p>My current project is a <strong>smart portfolio tracker</strong> built <em>from scratch</em>.</p>
<p><mark>Key Note:</mark> <u>Attendance is mandatory</u> for the practical lab exam.</p>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
એક student એક HTML5 document માં એક પેટા-વિભાગ માટે સૌથી નાનું શક્ય standard heading નું સ્તર દેખાડવા માંગે છે. એમણે કયું tag પસંદ કરવું જોઈએ?
- <h1> કારણ કે નંબર 1 સર્વોચ્ચ અગ્રતા દર્શાવે છે
- <h6> કારણ કે heading નાં સ્તર h1 થી નીચે h6 સુધી ચાલે છે
- <h0> કારણ કે શૂન્યનો અર્થ ન્યૂનતમ કદ થાય છે
- <heading size="small"> custom size નું attribute વાપરીને
Show the answer
<h6> કારણ કે heading નાં સ્તર h1 થી નીચે h6 સુધી ચાલે છે
HTML headings સખ્તાઈથી સૌથી મહત્ત્વના, સૌથી મોટા heading માટે <h1> થી લઈને સૌથી ઓછા મહત્ત્વના, સૌથી નાના heading માટે <h6> સુધી ચાલે છે. કોઈ <h0> tag નથી, અને heading tags standard સંરચનાત્મક માપ માટે size નું attribute વાપરતાં નથી.
Think first
Bold સામે Strong ની પસંદગી
Tap કરતાં પહેલાં, મનમાં સમજાવો કે એક આધુનિક વ્યાવસાયિક web developer એક webpage પર નિર્ણાયક સલામતીની ચેતવણીઓ માટે <b> કરતાં <strong> વાપરવાનું કેમ પસંદ કરે છે.
Show the answer
જ્યારે બંને tags લખાણને દૃશ્ય રીતે bold દોરે છે, ત્યારે <b> કેવળ physical છે અને screen readers કે search engines ને શૂન્ય અર્થ આપે છે. <strong> tag logical છે, accessibility નાં ઓજારોને કહે છે કે લખાણ ખરેખર મહત્ત્વનું છે, ખાતરી કરતાં કે દૃષ્ટિહીન users એ લખાણ યોગ્ય બોલાયેલી તાકીદ સાથે સાંભળે.
Watch out
Heading ના Font ના કદનો ફાંદો
Practical lab પરીક્ષાઓમાં એક વારંવારની ભૂલ છે <h1> કે <h2> જેવાં heading tags કેવળ એટલા માટે વાપરવાં કે તમારે કોઈ મનફાવતું લખાણ મોટું અને bold દેખાડવું છે. આ તમારા webpage નું SEO નું માળખું નષ્ટ કરે છે. Headings એ પાઠ્યપુસ્તકનાં મથાળાં જેવાં છે, એ માળખું વ્યાખ્યાયિત કરે છે, ડિઝાઇન નહીં. જો તમારે ખાલી એક ફકરાની અંદર મોટું લખાણ જોઈએ, પછીથી CSS ના font size ના નિયમો વાપરો, દૃશ્ય શોર્ટકટ માટે ક્યારેય heading tags નો દુરુપયોગ ન કરો.
Formula
Exam માર્ગદર્શિકા: Physical સામે Logical Tags
જ્યારે 5 marks નો પ્રશ્ન તમને physical અને logical tags નો ભેદ પૂછે, તમારો જવાબ આ ત્રણ સ્તંભો સાથે ગોઠવો:
- વ્યાખ્યા: Physical tags સીધું દૃશ્ય styling નક્કી કરે છે, જ્યારે logical tags વ્યવસ્થિત અર્થ અને સંદર્ભ ઉમેરે છે.
- જોડીઓ: દેખાડો કે
<b><strong>સાથે જોડાય છે, અને<i><em>સાથે જોડાય છે.
- આધુનિક ધોરણો: નોંધો કે HTML5 accessibility ના પાલન માટે logical tags ને અગ્રતા આપે છે.
Summary
Key takeaways
- Headings સ્પષ્ટ document નો ક્રમ સ્થાપવા સખ્તાઈથી h1 થી નીચે h6 સુધી ચાલે છે.
<b>અને<i>જેવાં physical tags વધારાનો સંરચનાત્મક અર્થ ઉમેર્યા વગર લખાણનો દેખાવ બદલે છે.<strong>અને<em>જેવાં logical tags search engines અને accessibility નાં ઓજારો માટે અર્થપૂર્ણ મૂલ્ય ઉમેરે છે.<mark>tag સંદર્ભના લખાણના ટુકડા સહેલાઈથી નિશાન કરવા મૂળ પીળો highlight લગાવે છે.- સામાન્ય font ના કદ બદલવાના શોર્ટકટ તરીકે ક્યારેય heading elements ન વાપરો.
- Memory Hook: Physical tags ચામડી પૂરતાં છે, પણ logical tags પાસે આત્મા છે.