HTML5 SECTION ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅಂಡರ್ಸ್ಟ್ಯಾಂಡಿಂಗ್
ಹಲವಾರು ವರ್ಷಗಳ ಹಿಂದೆ ದೃಶ್ಯಕ್ಕೆ HTML5 ಬಿರುಕುಗಳು ಬಂದಾಗ, ಇದು SECTION ಅಂಶ ಸೇರಿದಂತೆ, ಹೊಸ ವಿಭಾಗೀಕರಣ ಅಂಶಗಳ ಭಾಷಾಂತರಕ್ಕೆ ಸೇರಿಸಿತು. HTML5 ಅನ್ನು ಪರಿಚಯಿಸುವ ಹೆಚ್ಚಿನ ಹೊಸ ಅಂಶಗಳು ಸ್ಪಷ್ಟವಾದ ಬಳಕೆಗಳನ್ನು ಹೊಂದಿವೆ. ಉದಾಹರಣೆಗೆ, ಈ ಅಂಶವು ವೆಬ್ ಪುಟದ ಲೇಖನಗಳು ಮತ್ತು ಮುಖ್ಯ ಭಾಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಅಂಶವನ್ನು ಪುಟದ ಉಳಿದ ಭಾಗಕ್ಕೆ ನಿರ್ಣಾಯಕವಾದ ಸಂಬಂಧಿತ ವಿಷಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಹೆಡರ್, NAV ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳು ಸಾಕಷ್ಟು ಸ್ವಯಂ ವಿವರಣಾತ್ಮಕವಾಗಿವೆ. ಹೊಸದಾಗಿ ಸೇರ್ಪಡಿಸಲಾದ SECTION ಅಂಶವು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಸ್ಪಷ್ಟವಾಗಿದೆ.
ಎಚ್ಟಿಎಮ್ಎಲ್ ಎಲಿಮೆಂಟ್ಸ್ ಸೆಕ್ಷನ್ ಮತ್ತು ನಿಜವಾಗಿಯೂ ಒಂದೇ ವಿಷಯ-ಜೆನೆರಿಕ್ ಕಂಟೇನರ್ ಅಂಶಗಳು ವೆಬ್ ಪುಟದಲ್ಲಿ ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ ಎಂದು ಹಲವರು ನಂಬುತ್ತಾರೆ. ಆದಾಗ್ಯೂ, ಈ ಎರಡು ಅಂಶಗಳು, ಧಾರಕ ಅಂಶಗಳಾಗಿದ್ದರೂ ಸಹ, ಯಾವುದೋ ಸಾಮಾನ್ಯವಾದವುಗಳಾಗಿವೆ. SECTION ಅಂಶ ಮತ್ತು DIV ಅಂಶ ಎರಡನ್ನೂ ಬಳಸಲು ನಿರ್ದಿಷ್ಟ ಕಾರಣಗಳಿವೆ - ಮತ್ತು ಈ ಲೇಖನವು ಆ ವ್ಯತ್ಯಾಸಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ.
ವಿಭಾಗಗಳು ಮತ್ತು ವಿಭಾಗಗಳು
SECTION ಎಲಿಮೆಂಟ್ ಅನ್ನು ವೆಬ್ ಪುಟ ಅಥವಾ ಸೈಟ್ನ ಲಾಕ್ಷಣಿಕ ವಿಭಾಗವೆಂದು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಅದು ಮತ್ತೊಂದು ನಿರ್ದಿಷ್ಟ ವಿಧದ (ಲೇಖನ ಅಥವಾ ಪಕ್ಕದಂತೆ) ಅಲ್ಲ. ನಾನು ಪುಟದ ವಿಭಿನ್ನ ವಿಭಾಗವನ್ನು ಗುರುತಿಸಿದಾಗ ಈ ಅಂಶವನ್ನು ಬಳಸಲು ನಾನು ಒಲವು ತೋರುತ್ತಿದ್ದೇನೆ - ಒಂದು ವಿಭಾಗವು ಸಗಟು ಮತ್ತು ಇತರ ಪುಟಗಳಲ್ಲಿ ಅಥವಾ ಸೈಟ್ನ ಭಾಗಗಳಲ್ಲಿ ಬಳಸಲ್ಪಡುತ್ತದೆ. ನೀವು ಬಯಸಿದಲ್ಲಿ ಅದು ವಿಷಯದ ಒಂದು ವಿಭಿನ್ನ ಅಂಶ ಅಥವಾ ವಿಷಯದ "ವಿಭಾಗ" ಆಗಿದೆ.
ಇದಕ್ಕೆ ತದ್ವಿರುದ್ಧವಾಗಿ, ನೀವು DIV ಅಂಶವನ್ನು ನೀವು ವಿಭಾಗಿಸಲು ಬಯಸುವ ಪುಟದ ಭಾಗಗಳಿಗಾಗಿ ಬಳಸಬೇಕು, ಆದರೆ ಶಬ್ದಾರ್ಥಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಉದ್ದೇಶಗಳಿಗಾಗಿ. ನಾನು CSS ನೊಂದಿಗೆ ಬಳಸಲು "ಹುಕ್" ಅನ್ನು ನೀಡುವುದಕ್ಕಾಗಿ ನಾನು ಸಂಪೂರ್ಣವಾಗಿ ಹಾಗೆ ಮಾಡುತ್ತಿದ್ದಲ್ಲಿ ವಿಭಾಗದ ವಿಷಯದ ಪ್ರದೇಶವನ್ನು ನಾನು ಕಟ್ಟಬಲ್ಲೆ. ಇದು ಸೆಮ್ಯಾಂಟಿಕ್ಸ್ ಆಧರಿಸಿ ವಿಷಯದ ಒಂದು ವಿಭಿನ್ನ ವಿಭಾಗ ಇರಬಹುದು, ಆದರೆ ನಾನು ನನ್ನ ಪುಟಕ್ಕೆ ಬಯಸುವ ವಿನ್ಯಾಸವನ್ನು ಸಾಧಿಸಲು ನಾನು ನಿರ್ದೇಶಿಸುತ್ತಿದ್ದೇನೆ.
ಇದು ಎಲ್ಲಾ ಬಗ್ಗೆ ಸೆಮಂಟಿಕ್ಸ್
ಇದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಒಂದು ಹಾರ್ಡ್ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ, ಆದರೆ DIV ಅಂಶ ಮತ್ತು SECTION ಎಲಿಮೆಂಟ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೆಂದರೆ ಸೆಮ್ಯಾಂಟಿಕ್ಸ್. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನೀವು ವಿಭಾಗಿಸುವ ಕೋಡ್ನ ಅರ್ಥದ ಅರ್ಥ .
DIV ಅಂಶ ಒಳಗೆ ಇರುವ ಯಾವುದೇ ವಿಷಯವು ಯಾವುದೇ ಅಂತರ್ಗತ ಅರ್ಥವನ್ನು ಹೊಂದಿಲ್ಲ. ಈ ರೀತಿಯ ವಿಷಯಗಳನ್ನು ಉತ್ತಮವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ:
- CSS ಶೈಲಿಗಳನ್ನು ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳು ಮತ್ತು ಕೊಕ್ಕೆ
- ಲೇಔಟ್ ಪಾತ್ರೆಗಳು
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೊಕ್ಕೆಗಳು
- ಎಚ್ಟಿಎಮ್ಎಲ್ಗೆ ವಿಭಾಗಗಳು ಸುಲಭವಾಗಿ ಓದಬಲ್ಲವು
DIV ಅಂಶವು ಕೊಕ್ಕೆಗಳನ್ನು ಸೇರಿಸುವುದಕ್ಕಾಗಿ ನಾವು ಹೊಂದಿದ್ದ ಏಕೈಕ ಅಂಶವಾಗಿದ್ದು, ನಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು ಶೈಲಿ ಮತ್ತು ಲಂಬಸಾಲುಗಳು ಮತ್ತು ಅಲಂಕಾರಿಕ ಚೌಕಟ್ಟಿನಲ್ಲಿ ರಚಿಸುವುದು. ಅದರ ಕಾರಣದಿಂದಾಗಿ, ನಾವು ಡಿವಿವಿ ಎಲಿಮೆಂಟ್ಸ್ನೊಂದಿಗಿನ ಸಮಸ್ಯೆಗಳಿಂದ ಎಚ್ಟಿಎಮ್ಎಲ್ನೊಂದಿಗೆ ಕೊನೆಗೊಂಡಿದ್ದೇವೆ - ವೆಬ್ ವಿನ್ಯಾಸಕರು "ಡಿವಿಟಿಸ್" ಎಂದು ಕರೆಯಬಹುದು. DIV ಅಂಶವನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಬಳಸಿದ ಡಬ್ಲ್ಯುವೈಎಸ್ಐಡಬ್ಲ್ಯುವೈಜಿ ಎಡಿಟರ್ಗಳು ಸಹ ಇದ್ದವು. ನಾನು ನಿಜವಾಗಿಯೂ ಎಚ್ಟಿಎಮ್ಎಲ್ ಅಡ್ಡಲಾಗಿ ನಡೆಸುತ್ತಿದ್ದೇನೆ DIV ಎಲಿಮೆಂಟ್ ಪ್ಯಾರಾಗಳಿಗಾಗಿ ಬದಲಾಗಿ!
HTML5 ನೊಂದಿಗೆ, ನಾವು ಹೆಚ್ಚಿನ ವಿವರಣಾತ್ಮಕ ವಿವರಣಾತ್ಮಕ ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು ರಚಿಸಲು (ನ್ಯಾವಿಗೇಷನ್ಗಾಗಿ ಮತ್ತು ವಿವರಣಾತ್ಮಕ ಅಂಕಿ-ಅಂಶಗಳಿಗಾಗಿ ಮತ್ತು ಹೀಗೆ) ರಚಿಸಲು ವಿಭಾಗೀಕರಣ ಅಂಶಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರಾರಂಭಿಸಬಹುದು ಮತ್ತು ಆ ಅಂಶಗಳನ್ನು ಮೇಲಿನ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
SPAN ಎಲಿಮೆಂಟ್ ಬಗ್ಗೆ ಏನು?
ಹೆಚ್ಚಿನ ಜನರು ಯೋಚಿಸಿದಾಗ ಇತರ ಅಂಶವು DIV ಅಂಶವು ಅಂಶವಾಗಿದೆ. DIV ನಂತಹ ಈ ಅಂಶವು ಒಂದು ಲಾಕ್ಷಣಿಕ ಅಂಶವಲ್ಲ. ಇದು ವಿಷಯದ ಇನ್ಲೈನ್ ಬ್ಲಾಕ್ಗಳನ್ನು (ಸಾಮಾನ್ಯವಾಗಿ ಪಠ್ಯ) ಸುತ್ತ ಶೈಲಿಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟುಗಳಿಗೆ ಕೊಕ್ಕೆಗಳನ್ನು ಸೇರಿಸಲು ನೀವು ಬಳಸಬಹುದಾದ ಇನ್ಲೈನ್ ಅಂಶವಾಗಿದೆ. ಆ ಅರ್ಥದಲ್ಲಿ ಇದು ನಿಖರವಾಗಿ DIV ಅಂಶವಾಗಿರುತ್ತದೆ, ಬ್ಲಾಕ್ ಅಂಶಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಇನ್ಲೈನ್ ಮಾತ್ರ. ಕೆಲವು ರೀತಿಯಲ್ಲಿ, DIV ಯನ್ನು ಬ್ಲಾಕ್-ಮಟ್ಟದ SPAN ಎಲಿಮೆಂಟ್ನಂತೆ ಯೋಚಿಸುವುದು ಸುಲಭವಾಗಿರುತ್ತದೆ ಮತ್ತು ನೀವು HTML ವಿಷಯವನ್ನು ಸಂಪೂರ್ಣ ಬ್ಲಾಕ್ಗಳಿಗೆ ಮಾತ್ರ SPAN ಎಂದು ಬಳಸಿಕೊಳ್ಳಬಹುದು.
HTML5 ನಲ್ಲಿ ಹೋಲಿಕೆ ಮಾಡಬಹುದಾದ ಇನ್ಲೈನ್ ವಿಭಾಗೀಕರಣ ಅಂಶಗಳಿಲ್ಲ.
ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳು
ನೀವು ಐಇನ ಹಳೆಯ ಆವೃತ್ತಿಗಳನ್ನು (ಐಇ 8 ಮತ್ತು ಕಡಿಮೆ ನಂತಹ) ಬೆಂಬಲಿಸುತ್ತಿದ್ದರೆ, HTML5 ಅನ್ನು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಗುರುತಿಸುವುದಿಲ್ಲವಾದರೂ, ನೀವು ಅರ್ಥಶಾಸ್ತ್ರದ ಸರಿಯಾದ HTML ಟ್ಯಾಗ್ಗಳನ್ನು ಬಳಸಲು ಭಯಪಡಬಾರದು. ಸೆಮ್ಯಾಂಟಿಕ್ಸ್ ನಿಮಗೆ ಮತ್ತು ನಿಮ್ಮ ತಂಡವು ಭವಿಷ್ಯದಲ್ಲಿ ಪುಟವನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ (ಏಕೆಂದರೆ ಅದು ARTICLE ಅಂಶದಿಂದ ಆ ವಿಭಾಗವು ಲೇಖನವಾಗಿದೆ ಎಂದು ನೀವು ತಿಳಿಯುವಿರಿ). ಜೊತೆಗೆ, ಆ ಟ್ಯಾಗ್ಗಳನ್ನು ಗುರುತಿಸುವ ಬ್ರೌಸರ್ಗಳು ಅವುಗಳನ್ನು ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿಸುತ್ತವೆ.
ನೀವು ಇನ್ನೂ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನೊಂದಿಗಿನ HTML5 ಲಾಕ್ಷಣಿಕ ಸೆಕ್ಷನ್ ಅಂಶಗಳನ್ನು ಬಳಸಬಹುದು, ನೀವು ಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡುವುದನ್ನು ಮತ್ತು HTML ನಂತಹ ಟ್ಯಾಗ್ಗಳನ್ನು ಗುರುತಿಸಲು ಕೆಲವು ಸುತ್ತಮುತ್ತಲಿನ DIV ಅಂಶಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ.
DIV ಮತ್ತು SECTION ಎಲಿಮೆಂಟ್ಸ್ ಬಳಸಿ
ನೀವು ಸರಿಯಾಗಿ ಅವುಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಮಾನ್ಯ HTML5 ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ DIV ಮತ್ತು SECTION ಅಂಶಗಳನ್ನು ಎರಡೂ ಒಟ್ಟಿಗೆ ಬಳಸಬಹುದು. ಈ ಲೇಖನದಲ್ಲಿ ನೀವು ನೋಡಿದಂತೆ, ನೀವು SECTION ಅಂಶವನ್ನು ವಿಷಯದ ಶಬ್ದಾರ್ಥವಾಗಿ ಪ್ರತ್ಯೇಕವಾದ ಭಾಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸುತ್ತೀರಿ, ಮತ್ತು ನೀವು DIV ಅಂಶವನ್ನು ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ಗಾಗಿ ಕೊಂಡಿಗಳಾಗಿ ಬಳಸಬೇಕು ಮತ್ತು ವಿನ್ಯಾಸವನ್ನು ಅರ್ಥೈಸುವ ಅರ್ಥವನ್ನು ಹೊಂದಿಲ್ಲ.
ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ 3/15/17 ರಂದು ಸಂಪಾದಿಸಲಾಗಿದೆ