Can I substitute custom tags for the traditional <p> tag?

My HTML with CSS has an issue where a custom HTML tag is not displaying the text while my CSS picks up another tag. Interestingly, replacing 

<title>Layout Controls</title>
with 
<p>Layout Controls</p>
resolves the problem and shows the text.

I have uploaded a demo on JSFiddle. The JavaScript works on my browser and Coda2 but not on JS Fiddle. I must be missing something in how I am using Fiddle, so any guidance would be appreciated.

If there are any best-practice suggestions you can offer, feel free to share them as well. I'm here to learn.

<body>   
  <div class="input_group_box">
    <title>Layout Controls</title><br />
    <sub-title>X-Position</sub-title><br />
    <input id="/layout/1/slider" class="slider" type="range" value="0" min="-1" max="1" step="0.001" onclick="bind('/layout/1', 'slider', parseInt(this.value*1000)/1000)" />
    <input id="/layout/1/number" class="number-box"    type="number" value="0" min="-1" max="1" step="0.01" onclick="bind('/layout/1', 'number', parseFloat(this.value))" /><br />    
   </div>
</body>

Can anyone explain why my JavaScript isn't binding the two inputs in the demo? Could it be related to changing the JSFiddle load settings? I'm a bit lost on that aspect.

javascriptcsshtml

Answer №1

While custom tags may seem like a convenient option for coding, it is generally not recommended due to several drawbacks. Instead of using custom tags, opt for classes like 

<div class=sub-title>...</div>
. When marking something as a heading, utilize appropriate heading markup such as h2 and h3. For form fields, consider using legend within a fieldset.

The title element is an exception as it is already defined in HTML with a specific role and processing. It should only be used in the head section. Placing it inside the body may yield unpredictable results depending on the browser.

Answer №2

<title> is an HTML5 element, not a custom tag.

To style it with CSS, you can use the following code:

title {
    font-size: 16px;
    font-family: HelveticaNeue-Bold, sans-serif;
  
    display: inline;
}

Answer №3

It appears that the <title> tag is specifically designated for page titles and should not be utilized for any other function...

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

The variable 'X' in Node.js is not been declared

I've been struggling with this problem, trying to fetch my most recent tweets as an array using the npm module https://github.com/noffle/latest-tweets. However, no matter how I approach it, I always encounter errors such as 'posts is not defined& ...

javascriptnode.jsexpresstwitter

Can state be controlled by both the parent and children within the same element?

I am facing a situation where I have a component that requires updating the value from its parent, but also needs to handle user input changes without having to pass them back to the parent. See this scenario in action with this example: https://codesandbo ...

javascriptreactjsreact-nativereact-props

What steps should I take to address and resolve this problem with my Angular $scope?

One of my partials utilizes a single controller named CaseNotesCtrl. However, I am encountering difficulties accessing $scope variables within this partial. Below is the code snippet: <div class="row" ng-show="$parent.loggedin" ng-controller="CaseNotes ...

javascriptangularjs

How to position text in the center of a video using CSS

My attempt to center the name of my blog on top of a video background was not successful, even though I tried positioning it absolutely with 50% from the top. Can someone assist me in vertically and horizontally centering the text over the video? Here is ...

htmlcssvideotext

Creating a custom HTML layout: A step-by-step guide

Struggling to create a unique layout in HTML and seeking assistance. Instead of words, I'll show you my current layout with images: While this works fine for now, if div1 becomes taller, the layout will look like this: My ultimate goal is to achiev ...

csslayouthtml

The Jquery calculation feature sometimes mistakenly adds an incorrect value before calculating the correct value

Working on a calculator that accurately computes the field price and displays it, but facing an issue where the correct answer seems to merge with another value (likely from data-price as they match). Snippet of the code: var updateTotal = function() { ...

javascriptjquery

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Update MYSQL table values using AJAX and jQuery, then dynamically refresh the updated values on the web page

Hey there! I am fairly new to utilizing ajax and encountering some difficulty with a fundamental concept. In my MySQL table called "users," I have various user information stored, including the balance they pledge to donate. My goal is to create a div elem ...

javascriptphpjquerymysqlajax

What is the best way to pass parameters in jQuery using .on()?

Hello there, I have a slight dilemma :) Could you please advise me on how to pass a parameter to an external JavaScript function using the .on method? Here is the code snippet: <script> var attachedPo = 0; $this.ready(function(){ $ ...

javascriptjquery

Angular 14 debug error: Incorrect base path setting

Whenever I go for a run, I have to specify a starting point such as /pis/ ng serve --serve-path /pis/ Even after following these instructions, nothing seems to load. Can anyone lend a hand with setting a starting point in the ng serve process? ...

javascriptangulartypescriptangularbuild

Locate the index position of an element in one array based on a corresponding element in a

I am seeking a way to determine the index and group that an item belongs to within a parent json group. Is there a method for achieving this? I am willing to modify the json format if necessary. I made an attempt using JSON.stringify(), but it seems to be ...

javascriptarraysjsonindexingfind

The isInvalid property fails to apply red highlighting to the input box in a react-bootstrap form

Working on creating forms using React and react-bootstrap. Currently, my form includes an email field structured like this - https://i.sstatic.net/dlbWn.png Here's the code snippet of how it looks: <Form noValidate autoComplete="off&quo ...

javascriptreactjsbootstrap-4

WebDriverIO effortlessly converts the text extracted using the getText() command

One of my webpage elements contains the following text: <span class="mat-button-wrapper">Sicherheitsfrage ändern</span> However, when I attempt to verify this text using webdriver, it indicates that it is incorrect assert.strictEqual($(.mat ...

javascriptselenium-webdriverwebdriverwebdriver-io

Real-time console input/output feature for a gaming server utilizing either JavaScript or PHP

About My Minecraft Server: After running a Minecraft server in my basement for a few months, I realized that using TeamViewer to input commands and monitor the console was not ideal. The console of a Minecraft server provides a log of events with timestamp ...

javascriptphphtmlcmdminecraft

Angular 2 - Changes in component properties not reflected in view

I'm currently delving into Angular 2 and as far as I know, interpolated items in the view are supposed to automatically update when their corresponding variable changes in the model. However, in the following code snippet, I'm not observing this ...

javascriptangularjstypescriptangularsetinterval

The bold horizontal line in HTML tables is a bit unusual and is caused by the border-collapse property

Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling ...

htmlcss

Using codedeploy to deploy a Next.js application onto an AWS EC2 instance

After creating a fresh NextJS app with only basic boilerplate files and folders, I uploaded it to a CodeCommit repository. I already had a functional CodePipeline and simply switched the Source stages. However, I am encountering deployment failures during ...

javascriptamazon-web-servicesamazon-ec2next.jsaws-code-deploy

What causes a 500 error when using PHP eval in conjunction with AJAX?

Working within a system where all PHP code resides in a database for dynamic alterations has presented me with an interesting challenge. While the code displays perfectly on the page, calling the same code via AJAX triggers a frustrating error 500. I' ...

phpjavascriptajaxeval

Why does the return value of a function in Node.js and JavaScript sometimes appear as undefined?

I am completely stumped by this issue. I've been trying to figure it out, but so far, no luck.. this is the code snippet function part1(sql, controltime, headers_view, results_view, tmp){ var timerName = "QueryTime"; var request = ne ...

javascriptnode.js

Navigating to native script, the method for extracting an ID from a link is revealed

Is there a way to extract the unique identifier from this URL: I want to retrieve the code "11E89887FABBC1D" when clicking on the link. Any suggestions? ...

javascriptangularnativescript