HTML에서 작은 따옴표를 사용할 수 있습니까?


146

PHP에서 큰 따옴표를 사용하여 문자열을 연결하는 대신 변수를 보간 할 수있는 좋은 시간입니다. 결과적으로 HTML을 생성 할 때 종종 태그 필드를 설정하기 위해 작은 따옴표를 사용합니다. 예를 들면 다음과 같습니다.

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

이제 이것은 어느 것보다 훨씬 읽기 쉽습니다.

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

또는

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

간단한 검색에서 HTML 필드에 대한 작은 따옴표가 모든 브라우저에서 인식되지 않는다는 사람들의 말을 들었습니다. 따라서 작은 따옴표 HTML을 인식하는 데 어떤 브라우저가 문제가 될지 궁금합니다.


답변:


149

이것은 HTML에서 작은 따옴표언제 대중화 되었는가 와 비슷합니다 . . HTML의 속성에 대한 작은 따옴표 는 사양에서 항상 허용됩니다 . 어떤 브라우저도 이해할 수 없다고 생각합니다.


13
여기서 언급해야 할 한 가지는 일부 HTML 클라이언트 (필수 브라우저가 아님)가 작은 따옴표에 대해 호환 가능한 문제가 있다는 것입니다. 한 가지 이상한 예는 Hotmail <img src='cid:xxx' ... />에서 인라인 이미지를 표시하는 데 사용 하는 경우 컨텐츠 ID가 무시 되었기 때문에 전혀 나타나지 않는 것입니다. 대신`<img src = "cid : xxx"... />를 사용해야합니다.
어스 엔진

52

PhiLho가 지적했듯이 속성 값에 작은 따옴표가 허용되지 않는다고 널리 퍼져 있지만 믿음은 잘못되었습니다.

XML 표준은 속성 값의 주위에 모두 단일 및 이중 따옴표를 허용합니다.

XHTML 표준은 이것을 변경하기 위해 아무 말도하지 않지만 속성 값을 인용해야 한다는 관련 섹션 은 예제에서 큰 따옴표를 사용해야 하며이 혼동을 초래할 수 있습니다. 이 예제는 XHTML의 속성 값이 XML의 속성 값에 대한 최소 표준을 충족해야한다는 것을 지적합니다. 즉, 중요하지 않은 일반 HTML과 달리 따옴표로 묶어야하지만 단일 또는 큰 따옴표.

물론 표준을 준수하지 않는 파서가 발생할 가능성은 항상 있지만, 그렇게되면 모든 베팅이 중단됩니다. 따라서 사양에 명시된 내용 만 준수하는 것이 가장 좋습니다. 결국 우리는 사양을 갖습니다.


2
XML 표준에 대한 링크는 +1입니다. 나는 이것이 오래된 스레드라는 것을 알고 있지만, 완전성을 위해 사람들은 표준 내의 AttValue 문법 사양에 특별한주의를 기울여야합니다 . EBNF (정규 표현식과 매우 유사)를 읽을 수 있으면 작은 따옴표와 큰 따옴표를 모두 사용하여 속성을 구분할 수 있음을 알 수 있습니다.
daiscog

7
그러나 HTML은 SGML (XML을 기반으로하는 XHTML)을 기반으로하므로 XML 사양을 인용하는 것은 그리 유용하지 않습니다…
Donal Fellows

실제 혼란은 속성 값에서 작은 따옴표 나 큰 따옴표가 항상 이스케이프되어야하는지 여부입니다. 속성 값에 큰 따옴표를 사용하는 경우 큰 따옴표를 이스케이프해야하지만 작은 따옴표는 이스케이프 처리하지 않는 것 같습니다. 대신 속성 값 주위에 작은 따옴표를 사용하는 경우 작은 따옴표를 이스케이프해야하지만 큰 따옴표는 피해야합니다. 그리고 그것은 그것이 어느 쪽이든 허용하는 요점이라고 생각합니다. 값에 큰 따옴표가 많은 경우 전체 값 주위에 작은 따옴표를 사용하여 큰 따옴표를 피할 수 있으며 그 반대도 마찬가지입니다.
트리 인 코

문제는 XHTML 문서 모드를 사용하면 강제 로 Javascript 인터프리터 문제가 발생한다는 것입니다. 그 내부 이스케이프 따옴표와 특성을 깨는, 큰 따옴표를 사용하기 위해 자바 스크립트가 만든 HTML을. 몇 년 전 Firefox뿐만 아니라 IE 에서도이 문제가 발생했습니다.
user2867288 2016 년

16

사람들이 HTML 필드에 대한 작은 따옴표를 모든 브라우저에서 인식하지 못한다고 말하는 것을 들었습니다.

그 사람이 틀렸다


30
반드시 그런 것은 아닙니다. HTML 필드의 작은 따옴표를 인식하지 못하는 브라우저를 몇 분 안에 만들 수 있습니다. 물론, 그것을 인식하지 못하는 것보다 훨씬 더 많은 것들이있을 것이다 ...; P
Orbit in Lightbit Races

@LightnessRacesinOrbit "이 브라우저가 CSS를 지원하지 않는다는 것은 무엇을 의미합니까?!"
BadHorsie

... 또는 더 중요한 것은 "브라우저 (죽지 않은 브라우저)"입니다. : P
ToolmakerSteve

@LightnessRacesinOrbit-하지만 당신은? 전체 브라우저가 작은 따옴표를 허용하도록 추가 5 분을 추가로 만들도록 동기를 부여한 사람처럼 보입니다.
user3413723

7

인터넷에서 보는 모든 것을 믿지 마세요 ...
재미있게, 방금 작은 따옴표가 XHTML에서 유효하지 않은 선언 누군가 비슷한 대답 ...

음, 입력하는 동안 위를보고 Adam N이 같은 믿음을 전파한다는 것을 알 수 있습니다. 그가 확인을 뒷받침 할 수 있다면, 내가 쓴 것을 철회합니다. AFAIK, XML은 불가지론 적이며 두 종류의 인용을 모두 받아들입니다. 심지어 작은 따옴표 만있는 XHTML 페이지를 문제없이 시도하고 검증했습니다.


4

문제는 텍스트 입력 필드로 들어가는 데이터입니다. 치다

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

와 같다:

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

당신은 그것을 벗어날 수 없습니다, 당신은 사용해야 htmlspecialchars합니다.


2
그러나 여러분은 할 수 있습니다 :<input value='it&apos;s gonna break'/>
rink.attendant.6

4
작은 따옴표 나 큰 따옴표를 사용할 수있는 옵션은 정확히이 시나리오에서 문자를 이스케이프하지 않아도되는 것입니다. 값에 큰 따옴표 만있는 경우 큰 따옴표를 이스케이프 처리하지 않으려면 작은 따옴표로 묶으십시오 . <input value="it's not gonna break"/>반대의 경우도 마찬가지 <input value='i say - "this is not gonna be trouble"'/>입니다.
Triynko

1
@Triynko가 맞습니다. 게다가 : content의 경우 , "dumb quotes"를 사용 하지 말고 "typographic quotes"(Peter 's bar가 아니라 Peter 's bar)를 사용하십시오. ☞ en.wikipedia.org/wiki/Quotation_mark#Quotation_marks_in_English
Frank Nocke

2

훨씬 더 최신 버전의 사양 에서 이에 대한 정보를 찾고 있었고 그것을 찾는 데 시간이 걸렸습니다.

에서

HTML 5.3

편집자 초안, 2018 년 10 월 18 일

[...]

8.1.2.3. 속성

작은 따옴표로 묶은 속성 값 구문

속성 이름, 공백 문자 0 개 이상, 단일 U + 003D EQUALS SIGN 문자, 공백 문자 0 개 이상, 단일 U + 0027 APOSTROPHE 문자 ( '), 특성 값, 속성 값에 대해 위에 제공된 요구 사항 외에 리터럴 U + 0027 APOSTROPHE 문자 ( ')를 포함해서는 안되며 마지막으로 두 번째 단일 U + 0027 APOSTROPHE 문자 (')가 와야합니다.

다음 예에서 type 속성은 작은 따옴표로 묶은 속성 값 구문으로 제공됩니다.

<input type='checkbox'>

작은 따옴표로 묶은 속성 구문을 사용하는 속성 뒤에 다른 속성이 오는 경우 공백 문자가 있어야합니다.

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


1

또한 HTML에서 작은 따옴표를 사용하는 경향이 있으며 문제가 발생하지 않았습니다.


1

HTML 페이지에서 작은 따옴표를 사용하고 JavaScript를 포함 시켰으며 정상적으로 작동합니다. IE9, Chrome 및 Firefox에서 테스트되었습니다. 작동하는 것 같습니다.

<!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')};

-1

최근에 Google 검색 최적화에 문제가 발생했습니다. 작은 따옴표가 있으면 연결된 페이지를 크롤링하지 않는 것 같습니다.


1
이것은 단지 <a href=''>속성에 있습니까?
AntonChanning

-2

... 또는 heredocs를 사용하십시오. 그런 다음을 제외하고는 아무것도 걱정할 필요가 없습니다 END.


PHPheredoc 기능을 참조하고 있다고 생각합니다 .
DavidRR

원래 질문의 맥락 에서이 답변이 다운 투표 된 이유를 모르겠습니다. 이중 구절 작은 따옴표 문제에 직접 대답하지는 않지만 처음에는 작은 따옴표를 선호하는 OP로 이어지는 php 이스케이프 문제를 해결합니다. 그러나 사용법의 예와 관련이 있습니다.
AntonChanning

-10

작은 따옴표는 HTML에는 적합하지만 유효한 XHTML을 만들지 않습니다. HTML을 지원하지 않고 XHTML 만 지원하는 브라우저를 사용하는 경우 문제가 될 수 있습니다. 엄격한 XHTML이 필요한 일부 User-Agent가 있지만 그러한 브라우저는 존재하지 않는다고 생각합니다.


더 나쁜 부분은 HTML 페이지를 작성하지만 XHTML로 표시하는 사람들은 더 낫다는 것입니다. 운 좋게도이 유행은 사라지고있는 것 같습니다.
Javier

4
나는 XHTML에 대한이 진술이 사실이라고 믿지 않는다. XML에서는 "및 '를 모두 사용할 수 있으며 W3C 유효성 검사기는 작은 따옴표로 묶인 속성이있는 XHTML 문서를 허용합니다. 아마도 HTML에서 유효한 따옴표가없는 속성을 제거하는 XHTML과 혼동이 될 수 있습니다.
Doug McClean

텍스트 / html이 아닌 텍스트 / xhtml로 페이지를 제공하지 않으면 브라우저가 HTML로 렌더링하므로 HTML 규칙이 적용됩니다. w3C 원칙 중 하나는 웹을 깨뜨리지 않아야합니다. 그것은 지금 작동하기 때문에 내일 작동 할 것입니다.
Diodeus-James MacFarlane

8
XHTML은 페이지가 올바른 형식의 XML이어야하고 XML은 속성 주위에 큰 따옴표 나 작은 따옴표를 허용합니다.
Ned Batchelder

@SoftwareMonkey 사실, application/xhtml+xml또는 필요합니다 application/xml.
rink.attendant.6
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.