I’m curious about why you were under the impression that you needed to type
' twice. Since you are a newbie, I will provide some background information that might inform you about what’s going on.
In computer programming, a series of arbitrary characters is called a string. “Arbitrary” in this context means that the characters are not to be read as code in the context they exist in (much like how quotations in a sentence such as the ones I just used mean that the text in quotes is removed from its typical context and isn’t meant to be read as a part of that sentence’s semantics). A statement like
<div class="article" style="font-size: 2em;"> tells the browser to make a
div element and assign it attributes named
style with values equal to the strings that follow them. In this case, the
style attribute contains code that is meaningful when the browser goes to compute the style rules for the page, but during the phase of rendering when the HTML is being built, that code is not read at all and has no effect.
" are valid delimiters for strings. “Delimiter” refers to a form of punctuation that has the specific use of telling the computer where to break apart the plain-text document in order to parse it into instructions that the renderer understands. In the case of human-readable languages like HTML, delimiters usually follow English rules pretty closely. However, the computer has no conception of how things look. It only knows that the characters associated with ASCII codes
00100010 in binary) are symbols that mean to not read the text inside them right now, but to save it to a variable stored on the element being created (the attributes I mentioned earlier). So
'' could not be further from
": it’s not just one character, but two. It’s worth noting, since many ASCII-novices who are first getting into HTML encounter the idea that smart quotes aren’t the same thing as regular quotes. If you copy text from a forum like this, or from a word processor document, that contains the characters
“”, you will find that they also don’t work and confuse the browser.
atom-beautify is a package that automatically formats code in a human readable fashion. @d_l suggested it because you can use it as an improvisational debugger: if the package breaks up your code in a way that seems nonsensical, it’s probably because you have written something that doesn’t make sense according to the rules of the language.