I am creating some HTML fragements, the fragements will be wrapped in a DIV tag - ie its parent.
I do not have access to the DIV parent tag.
The fragment could be anything.
I want to be able to distinguish between different fragments. My idea was to insert a html element as metadata as the first element in the fragement.
The parent div can then identify what type it is by searching its first child for the meta information.
ie
<div class="parent">
<metatag fragement="fragementid"/>
<p>...</p>
<p>...</p>
</div>
My question is, is there a HTML tag for this purpose?
Go through: http://www.w3.org/tr/html401/struct/global.html for better understanding on HTML structure.
Still you can add meta information to your tags by using an additional hidden tag.
Example:
http://jsfiddle.net/w49g19bw/
<p data-meta="HN SPECS" class="hidden"></p>
.hidden {
display:none;
}
Related
Im trying to change the html code of a website. As you can see here: https://share-your-photo.com/b12b204e8c
The Code starts with an h3 tag. i want to replace it with a p tag. at beginning with <p class=and at the end of the code with </p>. But the code turns red at the end. can you give me a solution how i can do?
So I see that you had the <h3></h3> wrapped around everything and that is not the proper syntax in html. Its called hierarchy. Hierarchy is
An element that is directly above another element in the hierarchy is
called the parent of the element below it. The element below the
parent is called the child. When two elements are equal in the
hierarchy, they are known as siblings.
--Thx Google... A <h3></h3> tag can't wrap all of those elements only tags like a <div> can or a <span>. A <div> tag is a block element. So if you have 2 <div> tags like this... <div>HI</div> and <div>Hello</div> "HI" will be on top and "Hello" will be on the bottom but if it were <span> It will make it horizontal <span>Hi</span> and <span>Hello</span> the output will be "Hi Hello". If you check out this link they briefly explain nesting. But there are many many places you can go to understand this [https://www.w3schools.com/html/html_elements.asp1 Hopefully that helps you! Keep on coding! 👍
You said: "_the code turns red at the end...". The end of what??? Are you trying to edit the code locally in an editor such as sublime, vscode?
Basically, think of an Html document as a Word document that contains titles, subtitles, etc..
In Html documents, we have the following hierarchy structure.
<h1>My Page Title</h1>
<h2>My Page Subtitle</h2>
<p>here we can have only text, <strong>bold text</strong>, <i>italic</i>, and other styled text with <span>spanned texts</span></p>
<div>
<h3>Layouts</h3>
<p>you can use divs to structure your layout, so, doesn't make sense to have divs inside paragraphs.</p>
<p>If you want, you can break lines with <br> tags</p>
</div>
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I did not realize is it bad or not, according to the W3C rules about HTML semantic writing - how we should write the button element with descended elements?
In way, like this one:
<button>
<div>
<span>'hi'</span>
</div>
</button>
or only this:
<button>'hi'</button>
I tested your code in W3C Validator & the error shown is
Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
Basically the specification does not allow that.
It might work for you but it's not the best practice.
As you can see here button must be no interactive content descendant.
You also can verify your html in here
Nested tags within a <button> is not valid and returns the following when tested:
Element div not allowed as child of element button in this context.
Non-nested tags is the correct way to go.
See for your self if you like. I used the follow HTML to test:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button test HTML</title>
</head>
<body>
<button>
<div>
<span>'not valid'</span>
</div>
</button>
<button>Valid</button>
</body>
</html>
The button element may contain elements that are phrasing content without also being interactive content. In other words: elements that get used on the intra-paragraph level (sometimes called inline elements), and that don’t allow user interaction.
For example, this means it may contain span elements, but not div elements. So this is valid:
<button>
<span>'hi'</span>
</button>
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.