I am working on a system that generates content based on a user's input.
User Input:
First Name: Chris
Current State: helpless
Generated Content:
This site is about Chris and he is currently helpless.
In order to let the user change the First Name or Current State later on, I need to associate the actual text in the page with the input names like so:
This site is about <span class="first-name">Chris</span> and he is currently
<span class="current-state">helpless</span>.
How can I do this a without using spans like in the example above? I can't seem to find an HTML tag suitable for this.
Edit: It is hard to explain why I can't use spans. I am unable to use spans for this because I am using spans as targets that denote editable areas in the page. Using spans for the above purpose as well ends up causing issues that are far too complicated to describe here.
Edit 2: (including code from comments)
The issue is that I am wrapping all text nodes that are inside of <p> tags with the spans that denote editable content. Now, if I put spans inside of any of those <p> tags (namely spans that denote user inputs) I end up with real bad results.
It ends up looking like this:
<p>
<span class="editable">This site is about</span>
<span class="first-name">Chris</span>
<span class="editable">and he is currently</span>
<span class="current-state">helpless</span>
<span class="editable">.</span>
</p>
Instead of this:
<p>
<span class="editable">This site is about Chris and he is currently helpless.</span>
</p>
Related
I'm using XPATH to extract information from a website which generates data of the following structure:
<span class="classA">
<span class="classA1">aaa:</span> <strong>ccc</strong><br>
<span class="classA1">ddd:</span> eee<br>
<span class="classA1">fff:</span> <b>ggg gg </b><br>
...
<span class="classA1">hhh:</span>
jjj,
...
lll<br>
<br>
</span>
<span class="classB">mmm <b>nnn</b> ...
<br><br>
</span>
<span class="classA">
<span class="classA1">ooo:</span> ppp<br>
<span class="classA1">qqq:</span> rrr<br>
...
</span>
A few things to note first:
the exact number of <span class="classA1"> tags varies
the <a> tags after <span class="classA1">hhh:<span> varies
To extract what follows the individual classA1 spans, I use this XPATH definition:
//span[contains(text(),'aaa:')]//following::text()[1]
//span[contains(text(),'ddd:')]//following::text()[1]
//span[contains(text(),'fff:')]//following::text()[1]
...
And so on.
Trying to extract the text after <span class="classA1">hhh:<span>, that is, either the plain text "jjj" and "lll" or the whole html part (i.e. "jjj,...lll"), I keep running into problems.
Since, as I mention above, the number of tags there may vary greatly and is unpredictable, I cannot simply identify them by index number. And if I use the following, I also get everything that follows including the following classB span, which I definitely don't need or want.
//span[contains(text(),'hhh:')]//following::text()
Can you, please, suggest an XPATH solution?
Many thanks!
Since your source html shows indention not corresponding the parent/child relation, it is not totally clear but maybe this helps:
//span[contains(.,'mmm')]/preceding::span[contains(.,'hhh:')][1]/following-sibling::a[not(span[contains(.,'mmm')])]
If I understand correctly what are you asking for, this should give you all the a elements coming after the <span class="classA1">hhh:</span> element:
//span[#class='classA1' and text()='hhh']/following-sibling::a
Now you can iterate over the list or resulting a elements and extract their texts.
Alternatively you can get their texts directly with this:
//span[#class='classA1' and text()='hhh']/following-sibling::a/text()
How do you write <p></p> so that it can be displayed as text in an HTML page, rather than be interpreted as HTML (which would give an empty paragraph).
If you want to show the in the view,
Because, when you type that inside html element, it may be getting it as the html element itself.
if your purpose is showing that in the view just try this.
<p> </p>
Check this snippet :
<p> </p>
you can do it with using span
<span> < </span> <span>p</span> > <span> < </span> / <span>p</span><span> > </span>
or you can do below like this
<p> </p>
A P tag should print out text on your site no matter what. However, on most occasions you will need to refresh (F5) your page in order for it to take effect. Furthermore, if you got anything on your site that could be covering it up, try removing it just to see whether another element is "eating it up" or not. For example, try removing a banner image if thats something you got, or a navbar.
Usage for P, just in case:
<p> Text goes here </p>
Use Html entities to display the reserved html symbol
HTML Entities
this is what you mean? sorry if i understand wrongly but your description is very short.
View the source of this page. It managed it!
<p><\p>
and the answer was <p><\p>
I'd like to have a link on text but the text is in 2 paragraphs (using the html editor) resulting in having 2 href's with the link i've given. Here's the regular code:
<p>google</p>
<p>dotcom</p>
and this is the result of this code how I don't want it to be:
google
dotcom
I just want a single highlight when mousing over/clicking, I tried to manually changing the code with erasing the < /a > or so but since im a newbie when it comes to html nothing good came out...
Sorry for bad english, and thanks in advance for replies.[also why are html editors online so buggy? Like the one in wordpress.. trying to do a table exactly how you want it is so annoying.]
Have you tried putting the tag around the p tags?
<a href="#">
<p>
google
</p>
<p>
dotcom
</p>
</a>
In terms of usage, HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
Try this...
<a href="google.com">
<p>Google</p>
<p>Dotcom</p>
</a>
I have some content on a page that represents math formulas. This content is inside a <span> but it has custom drawn content inside of it mixed with text. I have text description of the math content that I could put inside an aria-label attribute in the <span>, but screen readers seem to ignore aria attributes for non-form elements.
Is there a way to get screen readers to use an alternate description for the content inside a <span> or a <div>?
My html looks like this
<span aria-label='[TEXT DESCRIPTION]'>
<svg>[SOME SVG CONTENT]</svg>
<span>[SOME TEXT CONTENT]</span>
</span>
Your code of
<span aria-label='[TEXT DESCRIPTION]'>
<svg>[SOME SVG CONTENT]</svg>
<span>[SOME TEXT CONTENT]</span>
</span>
looks slightly strange to me. The first thing I would do is change the outer span to a <div>. You may need to add something like tabindex="-1" to it. A more universal design approach would be to have the [TEXT DESCRIPTION] in plain text before/after [SOME TEXT CONTENT], the idea is if a person with a visual impairment needs extra assistance, then other people may as well.
The other option could be like
<div>
<svg aria-describedby="mathOne">.....</svg>
<span id="mathOne" class="offScreen">{Description}</span>
<span>Content</span>
</div>
From comments:
visually the svg and text content may be overlayed or positioned absolutely so that it makes sense from a math formula perspective. Think sqrt symbol that grows with the radical and radix.
My point is not to do this. The content <span> should be enhancing things. Let's pretend I am displaying the quadratic formula, the code would look like
<div>
<svg aria-describedby="mathOne">{Generated Formula}</svg>
<span id="mathOne" class="offScreen">negative B plus or minus the
square root of the radical B squared - 4 a c end radical all over 2 a.</span>
<span>In basic algebra, the quadratic formula is the solution of
the quadratic equation.</span>
</div>
Note: I haven't done stuff with math and visual impairments in 5 years, so there may be a better way of writing out the formula, but you get the idea.
You could try setting the role attribute to something like img and set the aria-label, like so.
<span role="img" aria-label="This will appear like an image. Nothing will be read from inside, but you can set your own description">
<span>here is some non-screen-readerable stuff</span>
</span>
Is this what you're looking for?
p.s. non-screen-readerable may or may not be proper use of English. But I think it illustrates the point.
Hope this helps!
The first Google search result for "html links" says (paraphrased) that to create a bookmark / section inside a webpage, we've to do this:
<a id='section-2'>Section 2</a>
so that we can link to it like this:
<a href='page.php#section-2' >Click</a>
But why the site is recommending using anchor tag around "Section 2"? -When it can be done using span:
<span id='section-2'>Section 2</span>
Are there compatibility issues? Because the first search result for "creating bookmarks within a webpage" also says to surround the heading with anchor tag:
<p><a name="title">Title</p>
Though this particular example is incorrect for various other reasons.
I've a supplementary question:
Why to surround the heading with the container when it can be done simply like this:
<span id='section-2'></span>Section 2
Does it matter?
<span id='section-2'>Sec</span>tion 2
<a href='page.php#section-2' >Click</a>
There is no point. W3schools is unreliable, just don’t use it, and you will avoid confusion and wrong information; see http://w3fools.com
In the old days, the only way to set a destination anchor within a page was to use <a name=...>...</a> element (at the text level). Later, the id attribute was added and is now supported by all browsers in use, so you can make any element a destination anchor simply by attaching an id attribute to it. E.g., to make it possible to link to a heading like <h2>Section 2</h3>, you could make it just <h2 id=section-2>Section 2</h2>. No need for an artificial extra element.
Using <span id='section-2'></span>Section 2, though formally correct, is not a good idea. You win nothing by using it, as opposite to the more logical markup. And if you e.g. later want to style (highlight) the element to which the user has “jumped” into with a link, using the :target pseudo-class, you will find yourself in an awkward position: the pseudo-class would let you style just the empty content of the span.
Regarding the question in the title, there is no reason to make the top of a page an destination anchror, with <a id='top'>Top of page</a> or otherwise. First, you can refer to the start of the page using just href=# since by URL specifications, # denotes the start of the current resource. Second, “Back to top” links are basically useless or worse: every browser has a simple command for going to the start of the page, and an explicit “Back to top” link can be confusing: back to top of what?
In the early days of html an anchor element was the only way to do this, but just because you can now do it with other element types doesn't mean you should: using an anchor for this purpose is semantically correct because it makes it clear to anybody reading or maintaining your markup that the element is intended as a navigation target. (Noting that there will often be many elements on the page that have an id but are not navigation targets.)
"Why to surround the heading with the container when it can be done simply like this:
<span id='section-2'></span>Section 2
Because if you put the text of your heading inside an element you can style it and/or easily mess with it from JavaScript. Indeed, if it is a heading you may want to put it in an <h1>, <h2>, etc. tag rather than a <span>.