Issue with p and h tags

Why does the output appear like this?
In the image below if I apply anything to class “iamdiv3”, the changes does not reflect in the h3 tag which is placed within it. If i create a border and height of it, the h3 content appears out of it.
latest

Hi @harshjain4001
It seems that you have nested h3 tags within p tags, which is not valid HTML. A block-level element like h3 should not be placed inside an inline container like p. You can try below code:-

<div class="iamh3">
    <h3>Contact No. 852145620114</h3>
</div>

<div class="iam2h3">
    <h3>Email Support@coffeeshop.com</h3>
</div>
If you want to apply styles to the h3 tags inside iamh3 and iam2h3, you can target them using CSS for example:-

.iamdiv {
border: 1px solid #000;
height: 200px;
padding: 10px;
}

.iamh3, .iam2h3 {
border: 1px solid red;
padding: 10px;
margin-bottom: 10px;
}

1 Like

Hi @harshjain4001

in your code, you have used the h3 tag inside the p tag which is why it is not working. Please place the h3 tag outside the p tag as both are individual block elements. Make sure you are using proper class names while styling the div and its elements.

If you still face any issue, please feel free to get back to us.

1 Like

Hi @harshjain4001
it is not semantically correct to place a heading tag (like h3) inside a paragraph tag (p). Headings should be used to represent the structure of the content, while paragraphs are used for textual content. It’s recommended to use headings directly inside the div tag.