The contents are not visible when using <h> and <p> tags

As I am embarking on creating a whimsical art profile just for the pleasure of it, I've already got a banner and a navbar set up. However, when I tried to enter some text:

Welcome to my art profile. This online gallery showcases all of my creative works from previous years.

I encountered an issue where the text wasn't displaying on the page.

After reviewing the padding of my instructions and navbar, it seems like neither of them are causing any obstruction. These are the only two elements I've inserted into the code. I simply want the text to be visible on the page.

htmlcss

Answer №1

First things first, remember to enclose your code within three backticks (`). When I took a look at the code you provided, this is what I found:

<div id="main-content">
  <div>
    <h>Welcome to my art profile. This profile contains all my artworks from the previous years.</h>
  </div>
</div>

Additionally, <h> is not a valid tag. You probably meant to use <h1>, <h2>, etc.

Here is the corrected version of your code: 

<div id="main-content">
  <div>
    <h1>Welcome to my art profile. This profile contains all my artworks from the previous years.</h1>
  </div>
</div>

Lastly, if you're sure there isn't much affecting your HTML, please share the entire code. The presence of an "id" attribute named "main-content" suggests that a certain portion of your code might be causing the issue with the text not displaying correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the paragraph's class upon clicking the radio button

I have been struggling with changing the color of <p> based on the radio button selected using two classes, red and blue. However, for some reason, it's not working as expected. If anyone has any insights or suggestions on how to fix this issue ...

javascripthtmlcssradio-buttondom-events

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

htmljquery

Is there a way to design a right border that is shorter in height than the div itself

I've got a box full of social media content below: 1 | 2 | 3 Is there any way to shorten the vertical pipes "|" so they don't extend beyond the height of the div? ...

htmlcssborder

Pressing the button will add text into the input field

Below is a jsfiddle link showcasing the current issue I am trying to address: http://jsfiddle.net/YD6PL/61/ Here is the HTML code snippet: <input type="text> <input type="text> <input type="text> <div> <button class="buttons"& ...

javascripthtml

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

What factors influence the timing of Chrome's spell-check feature for a particular word?

Currently, I am troubleshooting a bug in our code that is related to text input behavior. The issue at hand is that in one field, when you start typing on Chrome, the word does not get red underlined until you press space. However, in another field, Chrom ...

htmlgoogle-chromeautocorrect

What is the best way to display items within a table using React?

I'm just starting to learn React. Can someone show me how to use the "map" function to list elements from two different arrays in two columns? state = { dates: ["2000", "2001", "2002"], cases: ["1", "2", "3"] } render() { return ( <thea ...

javascripthtmlreactjsweb-frontenddom-manipulation

What is the best way to determine the height of a DIV element set to "auto"?

When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...

javascriptjquerycssheight

The background image on my website isn't showing up once it's been deployed via GitHub

I've tried various solutions to fix the issue at hand, but unfortunately, none of them seem to be effective. I double-checked the image path directory and confirmed that it is accurate. Even after uploading both png and jpg files, the problem persists ...

htmlcssimagegithub

difficulty encountered when transmitting data via ajax to an express server

Just starting out with backend and ran into an issue when trying to send data using vanilla ajax to my express server. Can anyone spot where I might be making a mistake? Here is my ajax request: var xhttp = new XMLHttpRequest(); xhttp.onload ...

htmlnode.jsajaxexpress

Overruled fashion

Here is the HTML code from my custom page: <div class="notes quotes-notification member-savings f-left"> <h2>My Notifications</h2> <ul> <li><b>I need to make some changes in the HTML, different from other pages you have ...

htmlcss

PHP is having trouble identifying the file extension for file uploads

After sending an array through AJAX and echoing it in PHP, I have the following data: [file] => Array ( [name] => XXXX.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpC5F2.tmp [error] => 0 [size] = ...

phphtmlajaxpdf

What is the best way to toggle an element's visibility using the select tag?

Let me break down the issue for you. In my HTML code, I have a select element that looks like this: <select id="seasons" multiple="multiple"> <option value="s01">Season 1</option> <option value="s02">Season 2</option> ...

javascripthtmljqueryhtml-select

Executing Javascript code from a specified web address

Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...

javascriptcssjsondomvertical-alignment

Having problems with Javascript and CSS not playing well together?

I have implemented a button from this source, but it does not appear correctly on my page. You can view the screenshot here. It seems like there is a conflict between the saved changes and the CSS. How can I resolve this issue? In addition, I am facing ...

javascriptcssajax

How can I create a redirect link in HTML that opens in a new window

I have a HTML page where I need to redirect to the next page. <a href="www.facebook.com" target="_blank">www.facebbok.com</a> Currently, it is redirecting to localhost:9000/dashboard/www.facebook.com But I only want to redirect to www.facebo ...

javascripthtmlredirect

What is the method to update a div containing the video title when a user clicks on a related video?

How can I make a div update with the title of the currently playing video when a user clicks on another video? I am having trouble finding an event in the API that lets me know when the video source has changed. Is there a specific event I should be listen ...

javascriptjqueryhtmlvideoyoutube-api

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

cssreactjstwitter-bootstrapbuttonbootstrap-4

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

htmlcssinternet-explorerinternet-explorer-9