¿Se permiten comillas simples en HTML?

146

Soy un gran usuario del uso de comillas dobles en PHP para poder interpolar variables en lugar de concatenar cadenas. Como resultado, cuando estoy generando HTML, a menudo uso comillas simples para configurar los campos de etiqueta. Por ejemplo:

$html = "<input type='text' name='address' value='$address'>";

Ahora esto es mucho más legible para mí que cualquiera

$html = "<input type=\"text\" name=\"address\" value=\"$address\">";

o

$html = '<input type="text" name="address" values="' . $address . '">' ;

En búsquedas breves, he oído a personas decir que TODOS los navegadores no reconocen las comillas simples para los campos HTML. Por lo tanto, me pregunto qué navegadores tendrían problemas para reconocer la comilla simple HTML.

Carreras de ligereza en órbita
fuente

Respuestas:

149

Esto es similar a ¿ Cuándo se hicieron tan populares las comillas simples en HTML? . Las comillas simples alrededor de los atributos en HTML son y siempre han sido permitidas por la especificación . No creo que ningún navegador los entienda.

Greg Hewgill
fuente
13
Una cosa que debo mencionar aquí es que algunos clientes HTML (navegadores no necesarios) tienen problemas de compatibilidad en las comillas simples. Un extraño ejemplo es que en Hotmail si usas <img src='cid:xxx' ... />para mostrar una imagen en línea, no aparecerá en absoluto porque la identificación de contenido fue ignorada. Debe usar `<img src =" cid: xxx "... /> en su lugar.
Earth Engine
52

Como señaló PhiLho, aunque existe una creencia ampliamente difundida de que las comillas simples no están permitidas para los valores de los atributos, esa creencia es incorrecta.

El estándar XML permite las comillas simples y dobles alrededor de los valores de los atributos.

El estándar XHTML no dice nada para cambiar esto, pero una sección relacionada que establece que los valores de los atributos deben ser citados usa comillas dobles en el ejemplo, lo que probablemente ha llevado a esta confusión. Este ejemplo simplemente señala que los valores de atributo en XHTML deben cumplir con el estándar mínimo para los valores de atributo en XML, lo que significa que deben citarse (a diferencia del HTML simple que no le importa), pero no lo restringe a uno solo o doble comillas.

Por supuesto, siempre es posible que encuentres un analizador que no cumpla con los estándares, pero cuando eso suceda, todas las apuestas estarán canceladas de todos modos. Por lo tanto, es mejor atenerse a lo que dice la especificación. Es por eso que tenemos especificaciones, después de todo.

Adam Bellaire
fuente
2
+1 para el enlace al estándar XML. Sé que este es un hilo viejo, pero para completar, las personas deben prestar especial atención a la especificación de gramática AttValue dentro del estándar. Si puede leer EBNF (muy similar a las expresiones regulares) verá que permite el uso de comillas simples y dobles para delimitar atributos.
daiscog
77
Pero HTML se basa en SGML (es XHTML que se basa en XML), por lo que citar la especificación XML no es muy útil ...
Donal Fellows
La verdadera confusión es si las comillas simples o dobles en un valor de atributo siempre necesitan escapar. Parece que si usa comillas dobles alrededor del valor del atributo, entonces debe escapar de las comillas dobles, pero no de las comillas simples. Si, en cambio, usa comillas simples alrededor del valor del atributo, entonces tendría que escapar de las comillas simples, pero no las comillas dobles. Y creo que ese es el punto de permitir cualquiera. Si tiene muchas comillas dobles en su valor, puede evitar escapar de ellas usando comillas simples alrededor de todo el valor, y viceversa.
Triynko
El hecho es que, si usa un modo de documento XHTML, se encontrará con problemas de intérprete de Javascript, donde intenta forzar a cualquier HTML creado con Javascript a usar comillas dobles, rompiendo atributos con comillas dobles sin escape dentro de ellos. Me encontré con este problema en Firefox y en IE hace varios años.
user2867288
16

He oído a gente decir que TODOS los navegadores no reconocen las comillas simples para los campos HTML

Esa persona está equivocada.

FlySwat
fuente
30
No necesariamente. Puedo crear un navegador en unos minutos que no reconoce comillas simples para campos HTML. Por supuesto, habrá muchas más cosas que no reconoce ...; P
Carreras de ligereza en órbita
@LightnessRacesinOrbit "¡¿Qué quieres decir con que este navegador no es compatible con CSS ?!"
BadHorsie
... o más importante, "ese navegador (que no lo hace) es carne muerta". : P
ToolmakerSteve
@LightnessRacesinOrbit, pero ¿y tú? Parece que cualquiera que esté lo suficientemente motivado para hacer que un navegador completo vaya a dedicar los 5 minutos adicionales para que acepte comillas simples.
user3413723
7

No creas todo lo que ves en Internet ...
Curiosamente, acabo de responder algo similar a alguien que declara que las comillas simples no son válidas en XHTML ...

Mmm, miro arriba mientras escribo, y veo que Adam N propaga la misma creencia. Si puede respaldar su afirmación, me retracto de lo que escribí ... AFAIK, XML es agnóstico y acepta ambos tipos de citas. Incluso probé y validé sin problemas una página XHTML con solo comillas simples.

PhiLho
fuente
4

El único problema son los datos que entran en los campos de ENTRADA DE TEXTO. Considerar

<input value='it's gonna break'/>

Lo mismo con:

<input value="i say - "this is gonna be trouble" "/>

No puedes escapar de eso, tienes que usarlo htmlspecialchars.

inteblio
fuente
2
Sin embargo, puede hacer:<input value='it&apos;s gonna break'/>
rink.attendant.6
44
Creo que la razón por la que tenemos la opción de usar comillas simples o dobles es para evitar tener que escapar de los personajes exactamente en este escenario. Si sólo tiene comillas dobles en su valor, lo rodean con comillas simples para evitar tener que escapar de las comillas, así: <input value="it's not gonna break"/>y viceversa: <input value='i say - "this is not gonna be trouble"'/>.
Triynko
1
@Triynko tiene razón. Además: para el contenido , considere no usar "comillas tontas" en primer lugar, sino "comillas tipográficas": la barra de Peter, no la barra de Peter. ☞ es.wikipedia.org/wiki/Quotation_mark#Quotation_marks_in_English
Frank Nocke
2

Como estaba buscando encontrar información sobre esto en una versión mucho más reciente de la especificación y me llevó bastante tiempo encontrarla, aquí está:

De

HTML 5.3

Borrador del editor, 18 de octubre de 2018

[...]

8.1.2.3. Atributos

Sintaxis de valor de atributo entre comillas simples

El nombre del atributo, seguido de cero o más caracteres de espacio, seguido de un solo carácter U + 003D EQUALS SIGN, seguido de cero o más caracteres de espacio, seguido de un solo carácter U + 0027 APOSTROPHE ('), seguido del valor del atributo, que, además de los requisitos dados anteriormente para los valores de los atributos, no debe contener ningún carácter APOSTROPHE U + 0027 literal (') y, finalmente, seguido de un segundo carácter APOSTROPHE U + 0027 (').

En el siguiente ejemplo, el atributo de tipo se proporciona con la sintaxis de valor de atributo entre comillas simples:

<input type='checkbox'>

Si un atributo que usa la sintaxis de atributo entre comillas simples debe ser seguido por otro atributo, entonces debe haber un carácter de espacio que los separe.

http://w3c.github.io/html/single-page.html#elements-attributes

connexo
fuente
1

También tiendo a usar comillas simples en HTML y nunca he tenido un problema.

UnkwnTech
fuente
1

Usé comillas simples en páginas HTML e inserté JavaScripts en él y funciona bien. Probado en IE9, Chrome y Firefox, parece funcionar bien.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
        <title>Bethanie Inc. data : geographically linked</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
        <script src='https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false' type='text/javascript'></script>
        <script type='text/javascript'> 
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                /////////////// Addresses ///////////////////
                var locations = new Array();
                var i = 0;
                locations[i++] = 'L,Riversea: Comp Site1 at Riversea,1 Wallace Lane Mosman Park WA 6012'
                locations[i++] = 'L,Wearne: Comp Site2 at Wearne,1 Gibney St Cottesloe WA 6011'
                locations[i++] = 'L,Beachside:Comp Site3 Beachside,629 Two Rocks Rd Yanchep WA 6035'

                /////// Addresses/////////
                var total_locations = i;
                i = 0;
                console.log('About to look up ' + total_locations + ' locations');
                // map options
                var options = {
                    zoom: 10,
                    center: new google.maps.LatLng(-31.982484, 115.789329),//Bethanie  
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true
                };
                // init map
                console.log('Initialise map...');
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);
               // use the Google API to translate addresses to GPS coordinates 
               //(See Limits: https://developers.google.com/maps/documentation/geocoding/#Limits)
                var geocoder = new google.maps.Geocoder();
                if (geocoder) {
                    console.log('Got a new instance of Google Geocoder object');
                    // Call function 'createNextMarker' every second
                    var myVar = window.setInterval(function(){createNextMarker()}, 700);
                    function createNextMarker() {
                        if (i < locations.length) 
                       {
                            var customer = locations[i];
                            var parts = customer.split(','); // split line into parts (fields)
                            var type= parts.splice(0,1);    // type from location line (remove)
                            var name = parts.splice(0,1);    // name from location line(remove)
                            var address =parts.join(',');   // combine remaining parts
                            console.log('Looking up ' + name + ' at address ' + address);
                            geocoder.geocode({ 'address': address }, makeCallback(name, type));
                            i++; // next location in list
                            updateProgressBar(i / total_locations);


                        } else 
                       {
                            console.log('Ready looking up ' + i + ' addresses');
                            window.clearInterval(myVar);
                        }
                    }

                    function makeCallback(name,type) 
                   {
                        var geocodeCallBack = function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                var longitude = results[0].geometry.location.lng();
                                var latitude = results[0].geometry.location.lat();
                                console.log('Received result: lat:' + latitude + ' long:' + longitude);
                                var marker = new google.maps.Marker({
                                    position: new google.maps.LatLng(latitude, longitude),
                                    map: map,
                                    title: name + ' : ' + '\r\n' + results[0].formatted_address});// this is display in tool tip/ icon color
                                   if (type=='E')  {marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')};
rchacko
fuente
-1

Recientemente he tenido un problema con la optimización de Búsqueda de Google. Si tiene comillas simples, no parece rastrear páginas vinculadas.

Gena Moroz
fuente
1
¿Esto es solo en <a href=''>atributos?
AntonChanning
-2

... o simplemente use heredocs. Entonces no necesita preocuparse por escapar de otra cosa que no sea END.

mcandre
fuente
Creo que te refieres a la capacidad heredoc en PHP .
DavidRR
No estoy seguro de por qué esta respuesta se rechaza dado el contexto de la pregunta original. No responde directamente al problema de las comillas simples de los versos dobles, pero sí aborda el problema de escape de php que lleva a OP a favorecer las comillas simples en primer lugar. Sin embargo, podría hacer con un ejemplo de uso.
AntonChanning
-10

Las comillas simples están bien para HTML, pero no hacen XHTML válido, lo que podría ser problemático si alguien usara un navegador que solo admitiera XHTML, pero no HTML. No creo que exista ningún navegador de este tipo, aunque es probable que existan algunos Agentes de usuario que requieran XHTML estricto.

Adam Ness
fuente
La peor parte es la gente que escribe páginas HTML pero las marca como XHTML porque es 'mejor'. Afortunadamente, esta moda parece estar bajando.
Javier
44
No creo que esta afirmación sobre XHTML sea cierta. Tanto "como" son aceptables en XML, y el validador W3C acepta documentos XHTML con atributos entre comillas simples. ¿Quizás esto puede ser una confusión con XHTML al eliminar atributos sin comillas que son legales en HTML?
Doug McClean
A menos que sirva su página como text / xhtml y no los navegadores text / html la representarán como HTML, por lo que se aplicarán las reglas HTML. Sin embargo, uno de los principios de w3C es NO ROMPER LA WEB. Debido a que funciona ahora, probablemente funcionará mañana.
Diodeus - James MacFarlane
8
XHTML requiere que las páginas sean XML bien formadas y XML permite comillas dobles o simples alrededor de los atributos.
Ned Batchelder
@SoftwareMonkey En realidad, necesitas application/xhtml+xmlo application/xml.
rink.attendant.6