27:["$","div","3",{"className":"mb-8","children":[["$","h2",null,{"id":"attributes-the-extra-settings","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Attributes — the extra settings"}],"$undefined","$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"Attributes go inside the opening tag"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"\nVisit RadarTrek\n\n\n $\"RadarTrek$ \n\n\n

This paragraph has the class \"intro\".

\n\n\n

My Page Title

"}]}]]}],["$","div",null,{"className":"flex gap-3 p-4 rounded border mb-4","style":{"borderColor":"#E34C2630","background":"#E34C2608"},"children":[["$","div",null,{"className":"shrink-0 text-lg leading-none mt-0.5","children":"💡"}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold mb-0.5","style":{"color":"#E34C26"},"children":"Attributes are like dialog box settings in Word"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"When you insert a hyperlink in Word, a dialog box appears: \"What URL should this link go to? Should it open in a new window?\" Those are settings. In HTML, attributes are those same settings, written right inside the opening tag. href=\"...\" tells the tag what URL to link to. src=\"...\" tells the tag which image file to show."}]]}]]}],"$undefined","$undefined",["$","div",null,{"className":"flex gap-3 p-4 rounded border border-blue/20 bg-blue/5 mb-4","children":[["$","div",null,{"className":"w-5 h-5 rounded border border-blue/40 bg-blue/10 flex items-center justify-center shrink-0 mt-0.5","children":["$","span",null,{"className":"text-blue text-xs font-bold","children":"→"}]}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold text-blue mb-0.5","children":"Try this"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"Add a link to your index.html: Search Google. Open it in your browser and click the link. Change href to a different URL. Notice how the text stays the same but the destination changes — the attribute controls behaviour, the content controls what you see."}]]}]]}],["$","div",null,{"className":"mt-6 p-4 rounded border","style":{"borderColor":"#E34C2630","background":"#E34C2608"},"children":[["$","p",null,{"className":"data-label mb-3","style":{"color":"#E34C26"},"children":"Key concepts"}],["$","div",null,{"className":"grid grid-cols-1 sm:grid-cols-2 gap-1","children":[["$","code","0",{"className":"text-xs font-mono text-text-dim bg-bg px-2 py-1 rounded border border-border block","children":"content — standard element"}],["$","code","1",{"className":"text-xs font-mono text-text-dim bg-bg px-2 py-1 rounded border border-border block","children":" — with extra setting"}],["$","code","2",{"className":"text-xs font-mono text-text-dim bg-bg px-2 py-1 rounded border border-border block","children":" — self-closing (img, br, hr, input, meta)"}],["$","code","3",{"className":"text-xs font-mono text-text-dim bg-bg px-2 py-1 rounded border border-border block","children":" — not shown to user"}]]}]]}]]}]

Tags and Elements