Empty HTML elements (i.e. elements having no content and no closing tag, like br/hr or any other HTML elements which I'm not aware of) can have attributes in the latest HTML5 standard?
Somebody please explain me in simple and easy to understand language.
Yes. Example: The <hr> tag can be modified to move the line around or change its length.
<hr width="50%" align="right">
They can For example tag supports global HTML attributes. You can check the attributes of html tags in W3school site. Here is the one for br:
http://www.w3schools.com/tags/tag_br.asp
(Check out the Global Attributes and/or Event Attributes)
You can easily check yourself which attributes an HTML5 element can have. In short:
Visit the HTML5 specification.
Search for the element under the "Table of Contents" (section 4).
For each element, see the attributes listed under "Content attributes".
In case of br and hr, they can have the global attributes (class, id, lang etc.).
Related
w3schools say that ("All HTML elements can have attributes"). so, can br tag have attributes?
w3schools
You can still use br tag element to specific the id or any other css style, or custom attribute, and the modification you could use on either JavaScript or even on the size you broke the line.
Br tag supports global attributes and event attributes.
Global attributes :- https://www.w3schools.com/tags/ref_standardattributes.asp
Event attributes :- https://www.w3schools.com/tags/ref_eventattributes.asp
A while ago there was a term that I remembered that described two categories of elements. I forgot the term and I want to know what that term was. The information I can remember is that the first category of elements get their values from within HTML like <p> or <a> or <ul> but there is another category of elements which get their values from "outside" of HTML like <img> or <input type="textbox">. I want to know the terminology for these types.
Edit - I've went through Zomry, Difster and BoltClock's answers and didn't get anything. So I remembered some extra piece of information and decided to add it. The two categories are Lazy Opposites of each other. For example if one is called xyz, then the other is called non-xyz.
Probably you mean replaced elements (and non-replaced, respectively)?
However, the distinction between them is not so unambigous. For example, form controls were traditionally considered replaced elements, but the HTML spec currently explicitly lists them as non-replaced (introducing the "widget" term instead).
The HTML specification mentions for tags like <img> and <input> the following: Tag omission in text/html: No end tag.
Tags with an end tag are defined as: Tag omission in text/html: Neither tag is omissible.
So as far as I can find, the HTML spec does define a technical name for this, apart from void versus normal elements, so what Watilin pointed out in the comments should be fine: standalone vs containers.
As an added side-note: HTML has a lot more HTML content categories. You can find a complete overview at the HTML spec here: https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
Also interesting to read to visualize that a bit better: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
Elements whose contents are defined by text and/or other elements between their start and end tags don't have a special category. Even the HTML spec just calls them normal elements for the most part in section 8.1.2.
Elements whose primary values are defined by attributes and that cannot have content between their tags are called void elements. img and input are indeed two examples of void elements. Note that void elements are not to be confused with empty elements; see the following questions for more details on that:
Are void elements and empty elements the same?
HTML "void elements" so called because without content?
<input type="text" id="someField" name="someField">
With an input selector, you can get a value from it like so (with jQuery):
$("#someField).val();
Where as with a paragraph or a div, you don't get a value, you get the text or html.
<div id="someDiv">Blah, blah, blah</div> You can get that with jQuery as follows:
$("#someDiv").html();
Do you see the difference?
I know <th>, <a>, <p>, <h1>…<h5> can all use title attributes. Which other tags can use them?
I'm currently optimising a website for SEO purposes by adding title attributes with keywords associated with the website
The title attribute works with all HTML tags. It's a global attribute. You can see the list of all HTML tags here.
http://www.w3schools.com/tags/ref_standardattributes.asp
The title attribute can be found in the global attributes section of the HTML 5 recommendation which says:
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification)
Do all HTML tags support the name attribute or are there only a few that one may use the name attribute on? Furthermore, do all tags support the title attribute?
The reason I ask is because I need to store information in these attributes about the current element.
Here is an example:
<img src="example-image.jpg" alt="Example Image" title="Additional Information" name="Even more info"/>
<div class="example-word" title="Information about this tag" name="More information about this tag">Word</div>
This additional information i am storing in the attribute will be grabbed via javascript.
According to MDN name officially only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea> - basically form fields, links, and plugin objects.
If you want to store other information (metadata) with an element, you should look at data- attributes. This is the recommended approach for HTML5, but will work on older browsers too. This also means you can store as many different pieces of extra data as you need
<img src="example-image.jpg" alt="Example Image" title="Additional Information"
data-name="Even more info" data-other-info="Some other information" />
<div class="example-word" title="Information about this tag"
data-name="More information about this tag">Word</div>
You can add your own tags and read them via javascript. These tags have to begin with data-:
<div data-whatever="Information the world needs"></div>
Tags don’t “support” anything. HTML specifications define which attributes are valid for which elements. For the name attribute as well as the title attribute, this depends on HTML version.
Browsers don’t care that much about specs. If your markup contains the attribute foo=bar, they happily include foo in the attributes property of the element node. They may or may not also make foo a property of the node itself. For title, this happens, i.e. “modern browsers support title for all elements”, and this also means that most browsers implement that attribute as a “tooltip”, which is a usability nightmare, but I digress. For name, this happens for some elements but not all, and for controls inside a form, that attribute also has a specialized meaning (it affects the issue whether the value of the control is included in the form data).
The recommended way to store data is to use data-* attributes, since they are guaranteed to have no meaning and no effect, beyond what you specify in your scripts or style sheets.
You really should store it using the data- attribute, but you can always use name and access it like so:
obj.getAttribute('name'); //Pure JavaScript
$(obj).attr('name'); //jQuery
But really, stick to data-.
I have seen this code from the tutorial that I'm studying. I searched for the purpose of the p attribute inside the li tag but found no answer. What is the purpose of that p attribute inside the li tag?
$msgs .= "<li p=\"$no_of_paginations\" class=\"inactive\">Last</li>";
The purpose cannot be inferred from the code snippet. As such, the attribute, being not defined in any HTML specification or draft or browser-specific extension, has no effect beyond being stored as data into the p element node in the document tree.
Such an attribute, though invalid by the specs, can be used like any other attribute in styling (e.g. attribute selector .p) in CSS or in scripting. In this case, it is probable, but by no means certain, that the attribute is meant to be used in scripting to carry a number as its value, with that number inserted with some server-side code, so that this value can be accessed in client-side scripting, as relating to a specific element.
The recommended way is to use data-* attributes instead, such as data-p, to avoid any risk of clashing with attribute names that might be introduced in some future HTML version.
The default HTML(whichever version) namespace doesn't have a purpose for "p" inside a li tag. If there's another namespace declared then that's where it's from. Other than that, it's not valid by w3 standards.
It should be a custom attribute to use in JavaScript codes to get something.
That is just a custom tag used in some javascript functions