You may know that we should use semantic elements for layout design because of its extra benefits, including accessibility and making more SEO friendly. But now I am going to share an interesting experience.
Once I was coding and shocked to see that the h1 element rendered in the webpage with a slight difference where I used HTML5 semantic elements for layout designing instead of the div elements. I thought there is no difference in default CSS style between div and semantic element in HTML5, such as header, main, footer, section, article, aside, nav. But I noticed that the default CSS style of the font-size property value changed or was showing different while h1 element is the child element of a semantic element like section, article, aside, nav. Here is the summary of my experiment where showed the default font-size value of h1 to h6 where those are used as child element in body, div or semantic elements that are used for layout designing:
| Element | h1 | h2 | h3 | h4 | h5 | h6 |
|---|---|---|---|---|---|---|
| body | 32px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| div | 32px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| header | 32px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| main | 32px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| footer | 32px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| section | 24px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| article | 24px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| aside | 24px | 24px | 18.72px | 16px | 13.28px | 10.72px |
| nav | 24px | 24px | 18.72px | 16px | 13.28px | 10.72px |
So, according to the result, the summary is there is no side effect on default CSS while h1 is the child element of body, div, header, main or footer but different for section, article, aside, nav whose are generally used as child element of header, main and footer.
Here is my experiment code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Sizes by Elements (h1 to h6)</title>
<style>
div, body>h1, body>h2, body>h3, body>h4, body>h5, body>h6 {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</header>
<main>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</main>
<footer>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</footer>
<section>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</section>
<article>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</article>
<aside>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</aside>
<nav>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</nav>
<br>
<p>
<strong>Note: </strong> <span style="color: blue;">Blue</span> coloured h1 to h6 elements are used as child elements of a non-semantic element.
</p>
<!-- Javascript coded for getting font size dynamically. -->
<script>
// Array of tag names
const tagNames = [
'body', 'div', 'header', 'main', 'footer', 'section', 'article', 'aside', 'nav'
]
// Iterate through the tagNames and repace innerText of all headings (inner elements) with parent element name and font size
tagNames.forEach(tagName => {
// Get each element (parent element) from tagNames
const element = document.getElementsByTagName(tagName)[0]
// Get h1Element to h6Element
const h1Element = element.getElementsByTagName('h1')[0]
const h2Element = element.getElementsByTagName('h2')[0]
const h3Element = element.getElementsByTagName('h3')[0]
const h4Element = element.getElementsByTagName('h4')[0]
const h5Element = element.getElementsByTagName('h5')[0]
const h6Element = element.getElementsByTagName('h6')[0]
// Init fontSize
let fontSize;
// For h1
fontSize = window.getComputedStyle(h1Element, null).getPropertyValue('font-size')
h1Element.innerText = `<${tagName}> : Heading 1 [${fontSize}]`
// For h2
fontSize = window.getComputedStyle(h2Element, null).getPropertyValue('font-size')
h2Element.innerText = `<${tagName}> : Heading 2 [${fontSize}]`
// For h3
fontSize = window.getComputedStyle(h3Element, null).getPropertyValue('font-size')
h3Element.innerText = `<${tagName}> : Heading 3 [${fontSize}]`
// For h4
fontSize = window.getComputedStyle(h4Element, null).getPropertyValue('font-size')
h4Element.innerText = `<${tagName}> : Heading 4 [${fontSize}]`
// For h5
fontSize = window.getComputedStyle(h5Element, null).getPropertyValue('font-size')
h5Element.innerText = `<${tagName}> : Heading 5 [${fontSize}]`
// For h6
fontSize = window.getComputedStyle(h6Element, null).getPropertyValue('font-size')
h6Element.innerText = `<${tagName}> : Heading 6 [${fontSize}]`
})
</script>
</body>
</html>
What is the reason for that? Comment the reason if it is known to you?
Top comments (0)