Are paragraph elements allowed inside header tags in HTML5?
Put simply, is this markup acceptable in HTML5? What are the implications of using it?
<h1>
<p class="major">Major part</p>
<p class="minor">Minor part</p>
</h1>
If not, what is the proper way to style these elements with CSS?
Actually, no. According to W3C standards, this markup is incorrect and should be avoided.
It is mentioned that header elements should contain "phrasing content", which consists of phrasing elements mixed with regular text.
In simpler terms, you can use the following elements within header tags in HTML5: a, em, strong, code, cite, span, br, img. View the complete list here.
Validating this markup using W3C validator will result in the error: Element p not allowed as child of element h1 in this context.
A major downside of using this markup is that search engines might misinterpret your heading tag, causing important data to be overlooked. This could negatively impact SEO.
To improve SEO outcomes, it is recommended to include only text content within heading elements. However, if styling is necessary, you can utilize the following markup and CSS:
<h1>
<span class="major">Main part</span>
<span class="minor">Sub part</span>
</h1>
<style type="text/css">
h1 span {
display: block;
}
h1 span.major {
font-size: 50px;
font-weight: bold;
}
h1 span.minor {
font-size: 30px;
font-style: italic;
}
</style>
Check out this jsfiddle for a live example.
It is acceptable to use the span tag within header elements (h1-h6) and apply "display: block;" style to render it as a block-level element. This eliminates the need for br tag.
Adjust the CSS selectors based on your specific requirements.
Furthermore, as mentioned by another user, using paragraphs inside headings is not semantically correct. Emphasizing the importance of prioritizing semantics over presentation in HTML.
I am looking to incorporate the PitchPrint app into a React website. They offer a tutorial for vanilla HTML/JS integration here. Following their instructions, I included script tags with links to jQuery and their app file in my index.html file. I then crea ...
I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...
Here is the HTML code: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whe ...
I am looking to create a UI/UX design that includes a logo and two menus, one for language change and one for navigation. https://i.sstatic.net/Tb6zc.png My current approach involves two div elements: 1. The first div contains the image and language men ...
After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same? //NAVIGATION //======================== .nav ul display: ...
As a newcomer to Ionic, HTML, and CSS, I am currently exploring how to keep a button fixed while scrolling through the page. Despite specifying a fixed position in the CSS, the button does not remain fixed as intended. The button seems to be having troubl ...
I am attempting to store attachments in RavenDB, but I keep encountering a "file not found" error. Here is the code snippet from my MVC View: <input type="file" name="file" id="Ids2" style="float:right"/> Through an AJAX call, I send the selected ...
I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...
Can a consistent custom user permission request dialog be designed for HTML5 APIs, such as geolocation or getUserMedia, to ensure uniform appearance on all browsers? ...
I've scoured the internet in search of a sample script that meets my specific needs, but unfortunately, I have come up empty-handed. Essentially, I am looking to retrieve a value from a div and then multiply that number based on user input. For instan ...
Is there a way to adjust the HTML5 video poster so it perfectly fits the dimensions of the video itself? Check out this JSFiddle demonstrating the issue: http://jsfiddle.net/zPacg/7/ Here's the code snippet: HTML: <video controls width="100%" h ...
I'm struggling with jQuery and can't seem to figure out how to change the selected radio button based on a value in another select box. <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" na ...
I am attempting to create a custom jQuery plugin, but I don't have much experience with jQuery and could really use some assistance. Here is the Java Applet that I am referencing: The applet performs certain operations and displays the result in a t ...
Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...
Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...
Is there a way to use addClass() and removeClass() on divs with different class names, identified by their unique ids? Any suggestions on how to make this functionality work? Here is the JavaScript code snippet: $(document).ready(function() { $("#bu ...
I am currently working on a login-page for a school project. I am using vue.js and have been attempting to make a get-request using axios. However, I am facing an issue where I cannot even enter the .then() block as the last thing displayed is alert(TEST1) ...
I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...
After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below. Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts ...
As I delve into learning Javascript, I've been experimenting with different approaches to achieve a specific functionality. I'm trying to implement a button that can toggle or hide XML data in a table. My attempts so far have involved adding anot ...