Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
HTMLTutorial
PrintPage
HTML(5)Tutorial
W3SchoolsHome(/default.asp)
NextChapter(html_intro.asp)
WithHTMLyoucancreateyourownWebsite.
ThistutorialteachesyoueverythingaboutHTML.
HTMLiseasytolearnYouwillenjoyit.
ExamplesinEveryChapter
ThisHTMLtutorialcontainshundredsofHTMLexamples.
WithouronlineHTMLeditor,youcanedittheHTML,andclickonabuttontoviewtheresult.
Example
<!DOCTYPEhtml>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>ThisisaHeading</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
TryitYourself(tryit.asp?filename=tryhtml_default)
Clickonthe"TryitYourself"buttontoseehowitworks.
StartlearningHTMLnow!(html_intro.asp)
HTMLExamples
AttheendoftheHTMLtutorial,youcanfindmorethan200examples.
http://www.w3schools.com/html/default.asp
1/3
9/2/2015
HTMLTutorial
Withouronlineeditor,youcaneditandtesteachexampleyourself.
GotoHTMLExamples!(html_examples.asp)
HTMLQuizTest
TestyourHTMLskillsatW3Schools!
StartHTMLQuiz!(html_quiz.asp)
HTMLReferences
AtW3Schoolsyouwillfindcompletereferencesabouttags,attributes,events,colornames,entities,
charactersets,URLencoding,languagecodes,HTTPmessages,andmore.
HTMLTagReference(/tags/default.asp)
HTMLExamGetYourDiploma!
(/cert/default.asp)
W3Schools'Online
Certification
Theperfectsolutionforprofessionalswhoneedtobalance
work,family,andcareerbuilding.
Morethan10000certificatesalreadyissued!
GetYourCertificate(/cert/default.asp)
TheHTMLCertificate(/cert/default.asp)documentsyourknowledgeofHTML.
TheHTML5Certificate(/cert/default.asp)documentsyourknowledgeofadvancedHTML5.
TheCSSCertificate(/cert/default.asp)documentsyourknowledgeofadvancedCSS.
TheJavaScriptCertificate(/cert/default.asp)documentsyourknowledgeofJavaScriptandHTML
DOM.
ThejQueryCertificate(/cert/default.asp)documentsyourknowledgeofjQuery.
ThePHPCertificate(/cert/default.asp)documentsyourknowledgeofPHPandSQL(MySQL).
TheXMLCertificate(/cert/default.asp)documentsyourknowledgeofXML,XMLDOMandXSLT.
W3SchoolsHome(/default.asp)
http://www.w3schools.com/html/default.asp
NextChapter(html_intro.asp)
2/3
9/2/2015
HTMLTutorial
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/default.asp
3/3
9/2/2015
IntroductiontoHTML
PrintPage
HTMLIntroduction
Previous(default.asp)
NextChapter(html_editors.asp)
WhatisHTML?
HTMLisamarkuplanguagefordescribingwebdocuments(webpages).
HTMLstandsforHyperTextMarkupLanguage
Amarkuplanguageisasetofmarkuptags
HTMLdocumentsaredescribedbyHTMLtags
EachHTMLtagdescribesdifferentdocumentcontent
HTMLExample
AsmallHTMLdocument:
<!DOCTYPEhtml>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
TryitYourself(tryit.asp?filename=tryhtml_intro)
ExampleExplained
TheDOCTYPEdeclarationdefinesthedocumenttypetobeHTML
Thetextbetween<html>and</html>describesanHTMLdocument
Thetextbetween<head>and</head>providesinformationaboutthedocument
Thetextbetween<title>and</title>providesatitleforthedocument
Thetextbetween<body>and</body>describesthevisiblepagecontent
Thetextbetween<h1>and</h1>describesaheading
Thetextbetween<p>and</p>describesaparagraph
http://www.w3schools.com/html/html_intro.asp
1/4
9/2/2015
IntroductiontoHTML
Usingthisdescription,awebbrowsercandisplayadocumentwithaheadingandaparagraph.
HTMLTags
HTMLtagsarekeywords(tagnames)surroundedbyanglebrackets:
<tagname>content</tagname>
HTMLtagsnormallycomeinpairslike<p>and</p>
Thefirsttaginapairisthestarttag,thesecondtagistheendtag
Theendtagiswrittenlikethestarttag,butwithaslashbeforethetagname
Thestarttagisoftencalledtheopeningtag.Theendtagisoftencalledtheclosing
tag.
WebBrowsers
Thepurposeofawebbrowser(Chrome,IE,Firefox,Safari)istoreadHTMLdocumentsanddisplay
them.
ThebrowserdoesnotdisplaytheHTMLtags,butusesthemtodeterminehowtodisplaythe
document:
HTMLPageStructure
BelowisavisualizationofanHTMLpagestructure:
http://www.w3schools.com/html/html_intro.asp
2/4
9/2/2015
IntroductiontoHTML
<html>
<head>
<title>Pagetitle</title>
</head>
<body>
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
<p>Thisisanotherparagraph.</p>
</body>
</html>
Onlythe<body>area(thewhitearea)isdisplayedbythebrowser.
The<!DOCTYPE>Declaration
The<!DOCTYPE>declarationhelpsthebrowsertodisplayawebpagecorrectly.
Therearedifferentdocumenttypesontheweb.
Todisplayadocumentcorrectly,thebrowsermustknowbothtypeandversion.
Thedoctypedeclarationisnotcasesensitive.Allcasesareacceptable:
<!DOCTYPEhtml>
<!DOCTYPEHTML>
<!doctypehtml>
<!DoctypeHtml>
CommonDeclarations
http://www.w3schools.com/html/html_intro.asp
3/4
9/2/2015
IntroductiontoHTML
HTML5
<!DOCTYPEhtml>
HTML4.01
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML1.0
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
AlltutorialsandexamplesatW3SchoolsuseHTML5.
HTMLVersions
Sincetheearlydaysoftheweb,therehavebeenmanyversionsofHTML:
Version
Year
HTML
1991
HTML2.0
1995
HTML3.2
1997
HTML4.01
1999
XHTML
2000
HTML5
2014
Previous(default.asp)
NextChapter(html_editors.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_intro.asp
4/4
9/2/2015
HTMLEditors
PrintPage
HTMLEditors
Previous(html_intro.asp)
NextChapter(html_basic.asp)
WriteHTMLUsingNotepadorTextEdit
HTMLcanbeeditedbyusingprofessionalHTMLeditorslike:
MicrosoftWebMatrix
SublimeText
However,forlearningHTMLwerecommendatexteditorlikeNotepad(PC)orTextEdit(Mac).
WebelieveusingasimpletexteditorisagoodwaytolearnHTML.
Followthe4stepsbelowtocreateyourfirstwebpagewithNotepad.
Step1:OpenNotepad
ToopenNotepadinWindows7orearlier:
ClickStart(bottomleftonyourscreen).ClickAllPrograms.ClickAccessories.ClickNotepad.
ToopenNotepadinWindows8orlater:
OpentheStartScreen(thewindowsymbolatthebottomleftonyourscreen).TypeNotepad.
Step2:WriteSomeHTML
WriteorcopysomeHTMLintoNotepad.
<!DOCTYPEhtml>
<html>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
http://www.w3schools.com/html/html_editors.asp
1/3
9/2/2015
HTMLEditors
Step3:SavetheHTMLPage
Savethefileonyourcomputer.
SelectFile>SaveasintheNotepadmenu.
Namethefile"index.html"oranyothernameendingwithhtmlorhtm.
UTF8isthepreferredencodingforHTMLfiles.
ANSIencodingcoversUSandWesternEuropeancharactersonly.
Youcanuseeither.htmor.htmlasfileextension.Thereisnodifference,itisupto
you.
Step4:ViewHTMLPageinYourBrowser
OpenthesavedHTMLfileinyourfavoritebrowser.Theresultwilllookmuchlikethis:
http://www.w3schools.com/html/html_editors.asp
2/3
9/2/2015
HTMLEditors
Toopenafileinabrowser,doubleclickonthefile,orrightclick,andchooseopen
with.
Previous(html_intro.asp)
NextChapter(html_basic.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_editors.asp
3/3
9/2/2015
HTMLBasic
PrintPage
HTMLBasicExamples
Previous(html_editors.asp)
NextChapter(html_elements.asp)
Don'tworryiftheseexamplesusetagsyouhavenotlearned.
Youwilllearnabouttheminthenextchapters.
HTMLDocuments
AllHTMLdocumentsmuststartwithatypedeclaration:<!DOCTYPEhtml>.
TheHTMLdocumentitselfbeginswith<html>andendswith</html>.
ThevisiblepartoftheHTMLdocumentisbetween<body>and</body>.
Example
<!DOCTYPEhtml>
<html>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
TryitYourself(tryit.asp?filename=tryhtml_basic_document)
HTMLHeadings
HTMLheadingsaredefinedwiththe<h1>to<h6>tags:
Example
<h1>Thisisaheading</h1>
<h2>Thisisaheading</h2>
<h3>Thisisaheading</h3>
TryitYourself(tryit.asp?filename=tryhtml_basic_headings)
http://www.w3schools.com/html/html_basic.asp
1/3
9/2/2015
HTMLBasic
HTMLParagraphs
HTMLparagraphsaredefinedwiththe<p>tag:
Example
<p>Thisisaparagraph.</p>
<p>Thisisanotherparagraph.</p>
TryitYourself(tryit.asp?filename=tryhtml_basic_paragraphs)
HTMLLinks
HTMLlinksaredefinedwiththe<a>tag:
Example
<ahref="http://www.w3schools.com">Thisisalink</a>
TryitYourself(tryit.asp?filename=tryhtml_basic_link)
Thelink'sdestinationisspecifiedinthehrefattribute.
AttributesareusedtoprovideadditionalinformationaboutHTMLelements.
HTMLImages
HTMLimagesaredefinedwiththe<img>tag.
Thesourcefile(src),alternativetext(alt),andsize(widthandheight)areprovidedasattributes:
Example
<imgsrc="w3schools.jpg"alt="W3Schools.com"width="104"height="142">
TryitYourself(tryit.asp?filename=tryhtml_basic_img)
Youwilllearnmoreaboutattributesinalaterchapter.
http://www.w3schools.com/html/html_basic.asp
2/3
9/2/2015
Previous(html_editors.asp)
HTMLBasic
NextChapter(html_elements.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_basic.asp
3/3
9/2/2015
HTMLElements
PrintPage
HTMLElements
Previous(html_basic.asp)
NextChapter(html_attributes.asp)
HTMLdocumentsaremadeupbyHTMLelements.
HTMLElements
HTMLelementsarewrittenwithastarttag,withanendtag,withthecontentinbetween:
<tagname>content</tagname>
TheHTMLelementiseverythingfromthestarttagtotheendtag:
<p>MyfirstHTMLparagraph.</p>
Starttag
Elementcontent
Endtag
<h1>
MyFirstHeading
</h1>
<p>
Myfirstparagraph.
</p>
<br>
SomeHTMLelementsdonothaveanendtag.
NestedHTMLElements
HTMLelementscanbenested(elementscancontainelements).
AllHTMLdocumentsconsistofnestedHTMLelements.
Thisexamplecontains4HTMLelements:
Example
<!DOCTYPEhtml>
<html>
<body>
http://www.w3schools.com/html/html_elements.asp
1/4
9/2/2015
HTMLElements
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
Tryityourself(tryit.asp?filename=tryhtml_elements)
HTMLExampleExplained
The<html>elementdefinesthewholedocument.
Ithasastarttag<html>andanendtag</html>.
TheelementcontentisanotherHTMLelement(the<body>element).
<html>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
The<body>elementdefinesthedocumentbody.
Ithasastarttag<body>andanendtag</body>.
TheelementcontentistwootherHTMLelements(<h1>and<p>).
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
The<h1>elementdefinesaheading.
Ithasastarttag<h1>andanendtag</h1>.
Theelementcontentis:MyFirstHeading.
<h1>MyFirstHeading</h1>
The<p>elementdefinesaparagraph.
Ithasastarttag<p>andanendtag</p>.
http://www.w3schools.com/html/html_elements.asp
2/4
9/2/2015
HTMLElements
Theelementcontentis:Myfirstparagraph.
<p>Myfirstparagraph.</p>
Don'tForgettheEndTag
SomeHTMLelementswilldisplaycorrectly,evenifyouforgettheendtag:
Example
<html>
<body>
<p>Thisisaparagraph
<p>Thisisaparagraph
</body>
</html>
Tryityourself(tryit.asp?filename=tryhtml_no_endtag)
Theexampleaboveworksinallbrowsers,becausetheclosingtagisconsideredoptional.
Neverrelyonthis.Itmightproduceunexpectedresultsand/orerrorsifyouforgettheendtag.
EmptyHTMLElements
HTMLelementswithnocontentarecalledemptyelements.
<br>isanemptyelementwithoutaclosingtag(the<br>tagdefinesalinebreak).
Emptyelementscanbe"closed"intheopeningtaglikethis:<br/>.
HTML5doesnotrequireemptyelementstobeclosed.Butifyouwantstrictervalidation,oryouneed
tomakeyourdocumentreadablebyXMLparsers,youshouldcloseallHTMLelements.
HTMLTip:UseLowercaseTags
HTMLtagsarenotcasesensitive:<P>meansthesameas<p>.
TheHTML5standarddoesnotrequirelowercasetags,butW3CrecommendslowercaseinHTML4,
anddemandslowercaseforstricterdocumenttypeslikeXHTML.
AtW3Schoolswealwaysuselowercasetags.
http://www.w3schools.com/html/html_elements.asp
3/4
9/2/2015
Previous(html_basic.asp)
HTMLElements
NextChapter(html_attributes.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_elements.asp
4/4
9/2/2015
HTMLAttributes
PrintPage
HTMLAttributes
Previous(html_elements.asp)
NextChapter(html_headings.asp)
AttributesprovideadditionalinformationaboutHTMLelements.
HTMLAttributes
HTMLelementscanhaveattributes
Attributesprovideadditionalinformationaboutanelement
Attributesarealwaysspecifiedinthestarttag
Attributescomeinname/valuepairslike:name="value"
ThelangAttribute
Thedocumentlanguagecanbedeclaredinthe<html>tag.
Thelanguageisdeclaredinthelangattribute.
Declaringalanguageisimportantforaccessibilityapplications(screenreaders)andsearchengines:
<!DOCTYPEhtml>
<htmllang="enUS">
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>
Thefirsttwolettersspecifythelanguage(en).Ifthereisadialect,usetwomoreletters(US).
ThetitleAttribute
HTMLparagraphsaredefinedwiththe<p>tag.
Inthisexample,the<p>elementhasatitleattribute.Thevalueoftheattributeis"About
W3Schools":
Example
http://www.w3schools.com/html/html_attributes.asp
1/5
9/2/2015
HTMLAttributes
<ptitle="AboutW3Schools">
W3Schoolsisawebdeveloper'ssite.
Itprovidestutorialsandreferencescovering
manyaspectsofwebprogramming,
includingHTML,CSS,JavaScript,XML,SQL,PHP,ASP,etc.
</p>
TryitYourself(tryit.asp?filename=tryhtml_attributes_title)
Whenyoumovethemouseovertheelement,thetitlewillbedisplayedasatooltip.
ThehrefAttribute
HTMLlinksaredefinedwiththe<a>tag.Thelinkaddressisspecifiedinthehrefattribute:
Example
<ahref="http://www.w3schools.com">Thisisalink</a>
TryitYourself(tryit.asp?filename=tryhtml_attributes_link)
Youwilllearnmoreaboutlinksandthe<a>taglaterinthistutorial.
SizeAttributes
HTMLimagesaredefinedwiththe<img>tag.
Thefilenameofthesource(src),andthesizeoftheimage(widthandheight)areallprovidedas
attributes:
Example
<imgsrc="w3schools.jpg"width="104"height="142">
TryitYourself(tryit.asp?filename=tryhtml_attributes_img)
Theimagesizeisspecifiedinpixels:width="104"means104screenpixelswide.
Youwilllearnmoreaboutimagesandthe<img>taglaterinthistutorial.
ThealtAttribute
http://www.w3schools.com/html/html_attributes.asp
2/5
9/2/2015
HTMLAttributes
Thealtattributespecifiesanalternativetexttobeused,whenanHTMLelementcannotbe
displayed.
Thevalueoftheattributecanbereadby"screenreaders".Thisway,someone"listening"tothe
webpage,i.e.ablindperson,can"hear"theelement.
Example
<imgsrc="w3schools.jpg"alt="W3Schools.com"width="104"height="142">
TryitYourself(tryit.asp?filename=tryhtml_attributes_alt)
WeSuggest:AlwaysUseLowercaseAttributes
TheHTML5standarddoesnotrequirelowercaseattributenames.
ThetitleattributecanbewrittenwithupperorlowercaselikeTitleand/orTITLE.
W3CrecommendslowercaseinHTML4,anddemandslowercaseforstricterdocumenttypeslike
XHTML.
Lowercaseisthemostcommon.Lowercaseiseasiertotype.
AtW3Schoolswealwaysuselowercaseattributenames.
WeSuggest:AlwaysQuoteAttributeValues
TheHTML5standarddoesnotrequirequotesaroundattributevalues.
Thehrefattribute,demonstratedabove,canbewrittenas:
Example
<ahref=http://www.w3schools.com>
TryitYourself(tryit.asp?filename=tryhtml_attributes_noquotes)
W3CrecommendsquotesinHTML4,anddemandsquotesforstricterdocumenttypeslikeXHTML.
Sometimesitisnecessarytousequotes.Thiswillnotdisplaycorrectly,becauseitcontainsaspace:
Example
<ptitle=AboutW3Schools>
TryitYourself(tryit.asp?filename=tryhtml_attributes_error)
http://www.w3schools.com/html/html_attributes.asp
3/5
9/2/2015
HTMLAttributes
Usingquotesarethemostcommon.Omittingquotescanproduceerrors.
AtW3Schoolswealwaysusequotesaroundattributevalues.
SingleorDoubleQuotes?
DoublestylequotesarethemostcommoninHTML,butsinglestylecanalsobeused.
Insomesituations,whentheattributevalueitselfcontainsdoublequotes,itisnecessarytousesingle
quotes:
<ptitle='John"ShotGun"Nelson'>
Orviceversa:
<ptitle="John'ShotGun'Nelson">
ChapterSummary
AllHTMLelementscanhaveattributes
TheHTMLtitleattributeprovidesadditional"tooltip"information
TheHTMLhrefattributeprovidesaddressinformationforlinks
TheHTMLwidthandheightattributesprovidesizeinformationforimages
TheHTMLaltattributeprovidestextforscreenreaders
AtW3SchoolswealwaysuselowercaseHTMLattributenames
AtW3Schoolswealwaysquoteattributeswithdoublequotes
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_attributes1)
Exercise2(exercise.asp?filename=exercise_attributes2)
Exercise3(exercise.asp?filename=exercise_attributes3)
Exercise4(exercise.asp?filename=exercise_attributes4)
Exercise5(exercise.asp?filename=exercise_attributes5)
http://www.w3schools.com/html/html_attributes.asp
4/5
9/2/2015
HTMLAttributes
HTMLAttributes
BelowisanalphabeticallistofsomeattributesoftenusedinHTML:
Attribute
Description
alt
Specifiesanalternativetextforanimage
disabled
Specifiesthataninputelementshouldbedisabled
href
SpecifiestheURL(webaddress)foralink
id
Specifiesauniqueidforanelement
src
SpecifiestheURL(webaddress)foranimage
style
SpecifiesaninlineCSSstyleforanelement
title
Specifiesextrainformationaboutanelement(displayedasatooltip)
value
Specifiesthevalue(textcontent)foraninputelement.
AcompletelistofallattributesforeachHTMLelement,islistedinour:HTMLTagReference
(/tags/default.asp).
Previous(html_elements.asp)
NextChapter(html_headings.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_attributes.asp
5/5
9/2/2015
Exercisev1.3
Exercise:
Addatooltiptotheparagraphbelowwiththetext"AboutW3Schools".
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
W3Schoolsisawebdeveloper'ssite.
<p>W3Schoolsisawebdeveloper'ssite.
</p>
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_attributes1
1/1
9/2/2015
Exercisev1.3
Exercise:
Changethesizeoftheimageto250pixelswideand400pixelstall.
Hint
EditThisCode:
SeeResult
Result:
ShowAnswer
<!DOCTYPEhtml>
<html>
<body>
<imgsrc="w3schools.jpg"width="104"
height="142">
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_attributes2
1/1
9/2/2015
Exercisev1.3
Exercise:
Transformthetextbelowintoalinkthatgoesto"www.w3schools.com".
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
Thisisalink
Thisisalink
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_attributes3
1/1
9/2/2015
Exercisev1.3
Exercise:
Changethedestinationofthelinkbelowto"www.wwf.org.uk".
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
Thisisalink
<ahref="http://www.w3schools.com">Thisis
alink</a>
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_attributes4
1/1
9/2/2015
Exercisev1.3
Exercise:
Theimagebelowisunavailableonpurpose.Specifyanalternatetextof"w3schools.com"to
beused,
soitcanbereadby"screenreaders".
Hint
EditThisCode:
SeeResult
Result:
ShowAnswer
<!DOCTYPEhtml>
<html>
<body>
<imgsrc="w3schooooools.jpg"width="135"
height="50">
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_attributes5
1/1
9/2/2015
HTMLHeadings
PrintPage
HTMLHeadings
Previous(html_attributes.asp)
NextChapter(html_paragraphs.asp)
HeadingsareimportantinHTMLdocuments.
HTMLHeadings
Headingsaredefinedwiththe<h1>to<h6>tags.
<h1>definesthemostimportantheading.<h6>definestheleastimportantheading.
Example
<h1>Thisisaheading</h1>
<h2>Thisisaheading</h2>
<h3>Thisisaheading</h3>
TryitYourself(tryit.asp?filename=tryhtml_headings)
Note:Browsersautomaticallyaddsomeemptyspace(amargin)beforeandaftereachheading.
HeadingsAreImportant
UseHTMLheadingsforheadingsonly.Don'tuseheadingstomaketextBIGorbold.
Searchenginesuseyourheadingstoindexthestructureandcontentofyourwebpages.
Usersskimyourpagesbyitsheadings.Itisimportanttouseheadingstoshowthedocument
structure.
h1headingsshouldbemainheadings,followedbyh2headings,thenthelessimportanth3,andso
on.
HTMLHorizontalRules
The<hr>tagcreatesahorizontallineinanHTMLpage.
Thehrelementcanbeusedtoseparatecontent:
Example
http://www.w3schools.com/html/html_headings.asp
1/4
9/2/2015
HTMLHeadings
<p>Thisisaparagraph.</p>
<hr>
<p>Thisisaparagraph.</p>
<hr>
<p>Thisisaparagraph.</p>
TryitYourself(tryit.asp?filename=tryhtml_headings_hr)
TheHTML<head>Element
TheHTML<head>elementhasnothingtodowithHTMLheadings.
TheHTML<head>elementcontainsmetadata.Metadataarenotdisplayed.
TheHTML<head>elementisplacedbetweenthe<html>tagandthe<body>tag:
Example
<!DOCTYPEhtml>
<html>
<head>
<title>MyFirstHTML</title>
<metacharset="UTF8">
</head>
<body>
.
.
.
TryitYourself(tryit.asp?filename=tryhtml_headings_head)
Metadatameansdataaboutdata.HTMLmetadataisdataabouttheHTML
document.
TheHTML<title>Element
TheHTML<title>elementismetadata.ItdefinestheHTMLdocument'stitle.
Thetitlewillnotbedisplayedinthedocument,butmightbedisplayedinthebrowsertab.
TheHTML<meta>Element
TheHTML<meta>elementisalsometadata.
http://www.w3schools.com/html/html_headings.asp
2/4
9/2/2015
HTMLHeadings
Itcanbeusedtodefinethecharacterset,andotherinformationabouttheHTMLdocument.
MoreMetaElements
InthechapteraboutHTMLstylesyoudiscovermoremetaelements:
TheHTML<style>elementisusedtodefineinternalCSSstylesheets.
TheHTML<link>elementisusedtodefineexternalCSSstylesheets.
HTMLTipHowtoViewHTMLSource
HaveyoueverseenaWebpageandwondered"Hey!Howdidtheydothat?"
Tofindout,rightclickinthepageandselect"ViewPageSource"(inChrome)or"ViewSource"(in
IE),orsimilarinanotherbrowser.ThiswillopenawindowcontainingtheHTMLcodeofthepage.
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_headings1)
Exercise2(exercise.asp?filename=exercise_headings2)
Exercise3(exercise.asp?filename=exercise_headings3)
Exercise4(exercise.asp?filename=exercise_headings4)
HTMLTagReference
W3Schools'tagreferencecontainsadditionalinformationaboutthesetagsandtheirattributes.
YouwilllearnmoreaboutHTMLtagsandattributesinthenextchaptersofthistutorial.
Tag
Description
<html>(/tags/tag_html.asp)
DefinesanHTMLdocument
<body>(/tags/tag_body.asp)
Definesthedocument'sbody
<head>(/tags/tag_head.asp)
Definesthedocument'sheadelement
<h1>to<h6>(/tags/tag_hn.asp)
DefinesHTMLheadings
<hr>(/tags/tag_hr.asp)
Definesahorizontalline
http://www.w3schools.com/html/html_headings.asp
3/4
9/2/2015
Previous(html_attributes.asp)
HTMLHeadings
NextChapter(html_paragraphs.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_headings.asp
4/4
9/2/2015
Exercisev1.3
Exercise:
Addahorizontalrulebetweentheheadingandtheparagraph.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
<h1>London</h1>
<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnited
Kingdom,withametropolitanareaofover
13millioninhabitants.</p>
Result:
ShowAnswer
London
LondonisthecapitalcityofEngland.Itisthe
mostpopulouscityintheUnitedKingdom,with
ametropolitanareaofover13million
inhabitants.
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_headings2
1/1
9/2/2015
Exercisev1.3
Exercise:
Addsixheadingstothedocumentwiththetext"Hello".
Startwiththemostimportantheadingandendwiththeleastimportantheading.
Hint
EditThisCode:
SeeResult
Result:
ShowAnswer
<!DOCTYPEhtml>
<html>
<body>
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_headings3
1/1
9/2/2015
Exercisev1.3
Exercise:
Markupthefollowingtextwithappropriatetags:
"UniversalStudios"isthemostimportantcontent.
"JurassicPark"isthenextmostimportantcontent.
"About"isoflesserimportancethanJurassicPark.
Thelastsentenceisjustaparagraph.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
UniversalStudiosPresents
Result:
ShowAnswer
UniversalStudiosPresentsJurassicParkAbout
OntheIslandofIslaNublar,anewparkhasbeen
built:JurassicParkisathemeparkofcloned
dinosaurs!!
JurassicPark
About
OntheIslandofIslaNublar,anewpark
hasbeenbuilt:JurassicParkisatheme
parkofcloneddinosaurs!!
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_headings4
1/1
9/2/2015
HTMLParagraphs
PrintPage
HTMLParagraphs
Previous(html_headings.asp)
NextChapter(html_styles.asp)
HTMLdocumentsaredividedintoparagraphs.
HTMLParagraphs
TheHTML<p>elementdefinesaparagraph.
Example
<p>Thisisaparagraph</p>
<p>Thisisanotherparagraph</p>
TryitYourself(tryit.asp?filename=tryhtml_paragraphs1)
Browsersautomaticallyaddanemptylinebeforeandafteraparagraph.
HTMLDisplay
YoucannotbesurehowHTMLwillbedisplayed.
Largeorsmallscreens,andresizedwindowswillcreatedifferentresults.
WithHTML,youcannotchangetheoutputbyaddingextraspacesorextralinesinyourHTMLcode.
Thebrowserwillremoveextraspacesandextralineswhenthepageisdisplayed.
Anynumberofspaces,andanynumberofnewlines,countasonlyonespace.
Example
<p>
Thisparagraph
containsalotoflines
inthesourcecode,
butthebrowser
ignoresit.
</p>
<p>
http://www.w3schools.com/html/html_paragraphs.asp
1/4
9/2/2015
HTMLParagraphs
Thisparagraph
containsalotofspaces
inthesourcecode,
butthebrowser
ignoresit.
</p>
TryitYourself(tryit.asp?filename=tryhtml_paragraphs2)
Don'tForgettheEndTag
MostbrowserswilldisplayHTMLcorrectlyevenifyouforgettheendtag:
Example
<p>Thisisaparagraph
<p>Thisisanotherparagraph
TryitYourself(tryit.asp?filename=tryhtml_paragraphs0)
Theexampleabovewillworkinmostbrowsers,butdonotrelyonit.
Forgettingtheendtagcanproduceunexpectedresultsorerrors.
StricterversionsofHTML,likeXHTML,donotallowyoutoskiptheendtag.
HTMLLineBreaks
TheHTML<br>elementdefinesalinebreak.
Use<br>ifyouwantalinebreak(anewline)withoutstartinganewparagraph:
Example
<p>Thisis<br>apara<br>graphwithlinebreaks</p>
TryitYourself(tryit.asp?filename=tryhtml_paragraphs)
The<br>elementisanemptyHTMLelement.Ithasnoendtag.
ThePoemProblem
http://www.w3schools.com/html/html_paragraphs.asp
2/4
9/2/2015
HTMLParagraphs
Example
<p>Thispoemwilldisplayasoneline:</p>
<p>
MyBonnieliesovertheocean.
MyBonnieliesoverthesea.
MyBonnieliesovertheocean.
Oh,bringbackmyBonnietome.
</p>
TryitYourself(tryit.asp?filename=tryhtml_poem)
TheHTML<pre>Element
TheHTML<pre>elementdefinespreformattedtext.
Thetextinsidea<pre>elementisdisplayedinafixedwidthfont(usuallyCourier),anditpreserves
bothspacesandlinebreaks:
Example
<pre>
MyBonnieliesovertheocean.
MyBonnieliesoverthesea.
MyBonnieliesovertheocean.
Oh,bringbackmyBonnietome.
</pre>
TryitYourself(tryit.asp?filename=tryhtml_pre)
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_paragraphs)
Exercise2(exercise.asp?filename=exercise_paragraphs1)
Exercise3(exercise.asp?filename=exercise_paragraphs2)
Exercise4(exercise.asp?filename=exercise_paragraphs3)
http://www.w3schools.com/html/html_paragraphs.asp
3/4
9/2/2015
HTMLParagraphs
HTMLTagReference
W3Schools'tagreferencecontainsadditionalinformationaboutHTMLelementsandtheirattributes.
Tag
Description
<p>(/tags/tag_p.asp)
Definesaparagraph
<br>(/tags/tag_br.asp)
Insertsasinglelinebreak
<pre>(/tags/tag_pre.asp)
Definespreformattedtext
Previous(html_headings.asp)
NextChapter(html_styles.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
http://www.w3schools.com/html/html_paragraphs.asp
4/4
9/2/2015
Exercisev1.3
Exercise:
Addaparagraphtothisdocumentwiththetext"HelloWorld!".
Hint
EditThisCode:
SeeResult
Result:
ShowAnswer
<!DOCTYPEhtml>
<html>
<body>
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs
1/1
9/2/2015
Exercisev1.3
Exercise:
Fixthedisplayofthepoembelow.Displaythepoemover4lines.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
MyBonnieliesovertheocean.MyBonnielies
overthesea.MyBonnieliesovertheocean.Oh,
bringbackmyBonnietome.
<p>
MyBonnieliesovertheocean.
MyBonnieliesoverthesea.
MyBonnieliesovertheocean.
Oh,bringbackmyBonnietome.
</p>
</body>
</html>
Exercisew3schools.com
http://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs2
1/1
PrintPage
HTMLStyles
Previous(html_paragraphs.asp)
NextChapter(html_formatting.asp)
IamRed
IamBlue
TryitYourself(tryit.asp?filename=tryhtml_styles_intro)
HTMLStyling
EveryHTMLelementhasadefaultstyle(backgroundcoloriswhiteandtextcolorisblack).
ChangingthedefaultstyleofanHTMLelement,canbedonewiththestyleattribute.
Thisexamplechangesthedefaultbackgroundcolorfromwhitetolightgrey:
Example
<bodystyle="backgroundcolor:lightgrey">
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
</body>
TryitYourself(tryit.asp?filename=tryhtml_styles_backgroundcolor)
Thebgcolorattribute,supportedinolderversionsofHTML,isnotvalidinHTML5.
TheHTMLStyleAttribute
TheHTMLstyleattributehasthefollowingsyntax:
style="property:value"
ThepropertyisaCSSproperty.ThevalueisaCSSvalue.
YouwilllearnmoreaboutCSSlaterinthistutorial.
HTMLTextColor
ThecolorpropertydefinesthetextcolortobeusedforanHTMLelement:
Example
<h1style="color:blue">Thisisaheading</h1>
<pstyle="color:red">Thisisaparagraph.</p>
TryitYourself(tryit.asp?filename=tryhtml_styles_color)
HTMLFonts
ThefontfamilypropertydefinesthefonttobeusedforanHTMLelement:
Example
<h1style="fontfamily:verdana">Thisisaheading</h1>
<pstyle="fontfamily:courier">Thisisaparagraph.</p>
TryitYourself(tryit.asp?filename=tryhtml_styles_fontfamily)
The<font>tag,supportedinolderversionsofHTML,isnotvalidinHTML5.
HTMLTextSize
ThefontsizepropertydefinesthetextsizetobeusedforanHTMLelement:
Example
<h1style="fontsize:300%">Thisisaheading</h1>
<pstyle="fontsize:160%">Thisisaparagraph.</p>
TryitYourself(tryit.asp?filename=tryhtml_styles_fontsize)
HTMLTextAlignment
ThetextalignpropertydefinesthehorizontaltextalignmentforanHTMLelement:
Example
<h1style="textalign:center">CenteredHeading</h1>
<p>Thisisaparagraph.</p>
TryitYourself(tryit.asp?filename=tryhtml_styles_textalign)
The<center>tag,supportedinolderversionsofHTML,isnotvalidinHTML5.
ChapterSummary
UsethestyleattributeforstylingHTMLelements
Usebackgroundcolorforbackgroundcolor
Usecolorfortextcolors
Usefontfamilyfortextfonts
Usefontsizefortextsizes
Usetextalignfortextalignment
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_styles1)
Exercise2(exercise.asp?filename=exercise_styles2)
Exercise3(exercise.asp?filename=exercise_styles3)
Exercise4(exercise.asp?filename=exercise_styles4)
Exercise5(exercise.asp?filename=exercise_styles5)
Exercise6(exercise.asp?filename=exercise_styles6)
Previous(html_paragraphs.asp)
NextChapter(html_formatting.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
Exercise:
Changethetextcoloroftheparagraphto"blue".
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
ShowAnswer
Result:
Thisisaparagraph.
<pstyle="color:red">Thisisaparagraph.
</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Changethefontoftheparagraphto"courier".
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
Thisisaparagraph.
<p>Thisisaparagraph.</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Centeraligntheparagraph.
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
Thisisaparagraph.
<p>Thisisaparagraph.</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Changethetextsizeoftheparagraphto200%.
Hint
CorrectCode:
<!DOCTYPEhtml>
<html>
<body>
CorrectResult:
HideAnswer
Thisisaparagraph.
<pstyle="fontsize:200%">Thisisa
paragraph.</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Changethebackgroundcolorofthepagebelowtoyellow.
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
<h1>Thisisaheading</h1>
SeeResult
ShowAnswer
Result:
Thisisaheading
Thisisaparagraph.
<p>Thisisaparagraph.</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Centeralignallcontentonthepage.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
<h1>Thisisaheading</h1>
<h2>Thisisalsoaheading</h2>
<p>Thisisaparagraph.</p>
<p>Thisisalsoparagraph.</p>
ShowAnswer
Result:
Thisisaheading
Thisisalsoaheading
Thisisaparagraph.
Thisisalsoparagraph.
</body>
</html>
Exercisew3schools.com
PrintPage
HTMLTextFormattingElements
Previous(html_styles.asp)
NextChapter(html_quotation_element
TextFormatting
Thistextisbold
Thistextisitalic
Thisissuperscript
HTMLFormattingElements
Inthepreviouschapter,youlearnedaboutHTMLstyling,usingtheHTMLstyleattribute.
HTMLalsodefinesspecialelements,fordefiningtextwithaspecialmeaning.
HTMLuseselementslike<b>and<i>forformattingoutput,likeboldoritalictext.
Formattingelementsweredesignedtodisplayspecialtypesoftext:
Boldtext
Importanttext
Italictext
Emphasizedtext
Markedtext
Smalltext
Deletedtext
Insertedtext
Subscripts
Superscripts
HTMLBoldandStrongFormatting
TheHTML<b>elementdefinesboldtext,withoutanyextraimportance.
Example
<p>Thistextisnormal.</p>
<p><b>Thistextisbold</b>.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_b)
TheHTML<strong>elementdefinesstrongtext,withaddedsemantic"strong"importance.
Example
<p>Thistextisnormal.</p>
<p><strong>Thistextisstrong</strong>.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_strong)
HTMLItalicandEmphasizedFormatting
TheHTML<i>elementdefinesitalictext,withoutanyextraimportance.
Example
<p>Thistextisnormal.</p>
<p><i>Thistextisitalic</i>.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_i)
TheHTML<em>elementdefinesemphasizedtext,withaddedsemanticimportance.
Example
<p>Thistextisnormal.</p>
<p><em>Thistextisemphasized</em>.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_em)
Browsersdisplay<strong>as<b>,and<em>as<i>.
However,thereisadifferenceinthemeaningofthesetags:<b>and<i>defines
boldanditalictext,
but<strong>and<em>meansthatthetextis"important".
HTMLSmallFormatting
TheHTML<small>elementdefinessmalltext:
Example
<h2>HTML<small>Small</small>Formatting</h2>
TryitYourself(tryit.asp?filename=tryhtml_formatting_small)
Example
<h2>HTML<mark>Marked</mark>Formatting</h2>
TryitYourself(tryit.asp?filename=tryhtml_formatting_mark)
HTMLDeletedFormatting
TheHTML<del>elementdefinesdeleted(removed)oftext.
Example
<p>Myfavoritecoloris<del>blue</del>red.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_del)
HTMLInsertedFormatting
TheHTML<ins>elementdefinesinserted(added)text.
Example
<p>Myfavorite<ins>color</ins>isred.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_ins)
HTMLSubscriptFormatting
TheHTML<sub>elementdefinessubscriptedtext.
Example
<p>Thisis<sub>subscripted</sub>text.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_sub)
HTMLSuperscriptFormatting
TheHTML<sup>elementdefinessuperscriptedtext.
Example
<p>Thisis<sup>superscripted</sup>text.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_sup)
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_formatting1)
Exercise2(exercise.asp?filename=exercise_formatting2)
Exercise3(exercise.asp?filename=exercise_formatting3)
Exercise4(exercise.asp?filename=exercise_formatting4)
Exercise5(exercise.asp?filename=exercise_formatting5)
HTMLTextFormattingElements
Tag
Description
<b>(/tags/tag_b.asp)
Definesboldtext
<em>
(/tags/tag_em.asp)
Definesemphasizedtext
<i>(/tags/tag_i.asp)
Definesitalictext
<small>
(/tags/tag_small.asp)
Definessmallertext
<strong>
(/tags/tag_strong.asp)
Definesimportanttext
<sub>
(/tags/tag_sub.asp)
Definessubscriptedtext
<sup>
(/tags/tag_sup.asp)
Definessuperscriptedtext
<ins>
(/tags/tag_ins.asp)
Definesinsertedtext
<del>
(/tags/tag_del.asp)
Definesdeletedtext
<mark>
(/tags/tag_mark.asp)
Definesmarked/highlightedtext
Previous(html_styles.asp)
NextChapter(html_quotation_element
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
Exercise:
Addextraimportancetotheword"degradation"intheparagraphbelow.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
<h1>WhatDoesWWFDo?</h1>
<p>WWF'smissionistostopthe
degradationofourplanet'snatural
environment.</p>
Result:
ShowAnswer
WhatDoesWWFDo?
WWF'smissionistostopthedegradationofour
planet'snaturalenvironment.
</body>
</html>
Exercisew3schools.com
Exercise:
Emphasizetheword"metropolitan"inthetextbelow.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
<h1>Tokyo</h1>
<p>TokyoisthecapitalofJapan,the
centeroftheGreaterTokyoArea,andthe
mostpopulousmetropolitanareainthe
world.</p>
Result:
ShowAnswer
Tokyo
TokyoisthecapitalofJapan,thecenterofthe
GreaterTokyoArea,andthemostpopulous
metropolitanareaintheworld.
</body>
</html>
Exercisew3schools.com
Exercise:
Highlighttheword"FUN!"inthetextbelow.
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
HTMLisFUNtolearn!
<p>HTMLisFUNtolearn!</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Applysubscriptformattingtothenumber"2"inthetextbelow.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
H2Oisthescientifictermforwater.
<p>H2Oisthescientifictermforwater.
</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Addalinethrough(strikeout)theletters"blue"inthetextbelow.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
ShowAnswer
Result:
Myfavoritecolorisbluered.
<p>Myfavoritecolorisbluered.</p>
</body>
</html>
Exercisew3schools.com
PrintPage
HTMLQuotationandCitationElements
Previous(html_formatting.asp)
NextChapter(html_computercode_ele
Quotation
HereisaquotefromWWF'swebsite:
For50years,WWFhasbeenprotectingthefutureofnature.Theworld'sleading
conservationorganization,WWFworksin100countriesandissupportedby1.2million
membersintheUnitedStatesandcloseto5millionglobally.
HTML<q>forShortQuotations
TheHTML<q>elementdefinesashortquotation.
Browsersusuallyinsertquotationmarksaroundthe<q>element.
Example
<p>WWF'sgoalisto:<q>Buildafuturewherepeopleliveinharmonywith
nature.</q></p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_q)
HTML<blockquote>forLongQuotations
TheHTML<blockquote>elementdefinesaquotedsection.
Browsersusuallyindent<blockquote>elements.
Example
<p>HereisaquotefromWWF'swebsite:</p>
<blockquotecite="http://www.worldwildlife.org/who/index.html">
For50years,WWFhasbeenprotectingthefutureofnature.
Theworld'sleadingconservationorganization,
WWFworksin100countriesandissupportedby
1.2millionmembersintheUnitedStatesand
closeto5millionglobally.
</blockquote>
TryitYourself(tryit.asp?filename=tryhtml_formatting_blockquote)
HTML<abbr>forAbbreviations
TheHTML<abbr>elementdefinesanabbreviationoranacronym.
Markingabbreviationscangiveusefulinformationtobrowsers,translationsystemsandsearch
engines.
Example
<p>The<abbrtitle="WorldHealthOrganization">WHO</abbr>wasfoundedin
1948.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_abbr)
HTML<address>forContactInformation
TheHTML<address>elementdefinescontactinformation(author/owner)ofadocumentorarticle.
The<address>elementisusuallydisplayedinitalic.Mostbrowserswilladdalinebreakbeforeand
aftertheelement.
Example
<address>
WrittenbyJonDoe.<br>
Visitusat:<br>
Example.com<br>
Box564,Disneyland<br>
USA
</address>
TryitYourself(tryit.asp?filename=tryhtml_formatting_address)
HTML<cite>forWorkTitle
TheHTML<cite>elementdefinesthetitleofawork.
Browsersusuallydisplay<cite>elementsinitalic.
Example
<p><cite>TheScream</cite>byEdwardMunch.Paintedin1893.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_cite)
HTML<bdo>forBiDirectionalOverride
TheHTML<bdo>elementdefinesbidirectionaloverride.
The<bdo>elementisusedtooverridethecurrenttextdirection:
Example
<bdodir="rtl">Thistextwillbewrittenfromrighttoleft</bdo>
TryitYourself(tryit.asp?filename=tryhtml_formatting_bdo)
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_quotations1)
Exercise2(exercise.asp?filename=exercise_quotations2)
Exercise3(exercise.asp?filename=exercise_quotations3)
Exercise4(exercise.asp?filename=exercise_quotations4)
HTMLQuotationandCitationElements
Tag
Description
<abbr>
(/tags/tag_abbr.asp)
Definesanabbreviationoracronym
<address>
(/tags/tag_address.asp)
Definescontactinformationfortheauthor/ownerofa
document
<bdo>(/tags/tag_bdo.asp)
Definesthetextdirection
<blockquote>
(/tags/tag_blockquote.asp)
Definesasectionthatisquotedfromanothersource
<cite>(/tags/tag_cite.asp)
Definesthetitleofawork
<q>(/tags/tag_q.asp)
Definesashortinlinequotation
Previous(html_formatting.asp)
NextChapter(html_computercode_ele
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
Exercise:
UseanHTMLelementtoaddquotationmarksaroundtheletters"cool".
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
Result:
ShowAnswer
Iamsocool.
<p>Iamsocool.</p>
</body>
</html>
Exercisew3schools.com
Exercise:
Thetextbelowshouldbeaquotedsection.
AddtheproperHTMLelementtoit,andspecifythatitisquotedfromthefollowingURL:
http://www.worldwildlife.org/who/index.html.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
For50years,WWFhasbeenprotectingthe
futureofnature.
Theworld'sleadingconservation
organization,
WWFworksin100countriesandis
supportedby
1.2millionmembersintheUnitedStates
and
closeto5millionglobally.
Result:
ShowAnswer
For50years,WWFhasbeenprotectingthe
futureofnature.Theworld'sleading
conservationorganization,WWFworksin100
countriesandissupportedby1.2million
membersintheUnitedStatesandcloseto5
millionglobally.
</body>
</html>
Exercisew3schools.com
Exercise:
Makethetextbelowgorighttoleft.
Hint
CorrectCode:
<!DOCTYPEhtml>
<html>
<body>
HideAnswer
CorrectResult:
!yadlufituaebatahW
<bdodir="rtl">Whatabeautifulday!</bdo>
</body>
</html>
Exercisew3schools.com
Exercise:
Theletters"WHO"inthetextbelowisanabbreviationof"WorldHealthOrganization".
UseanHTMLelementtoprovidethespecifiedabbreviationof"WHO".
Hint
CorrectCode:
<!DOCTYPEhtml>
<html>
<body>
HideAnswer
CorrectResult:
TheWHOwasfoundedin1948.
<p>The<abbrtitle="WorldHealth
Organization">WHO</abbr>wasfoundedin
1948.</p>
</body>
</html>
Exercisew3schools.com
PrintPage
HTMLComputerCodeElements
Previous(html_quotation_elements.asp)
NextChapter(html_comments.asp)
ComputerCode
varperson={
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
HTMLComputerCodeFormatting
Normally,HTMLusesvariablelettersize,andvariableletterspacing.
Thisisnotwantedwhendisplayingexamplesofcomputercode.
The<kbd>,<samp>,and<code>elementsallsupportfixedlettersizeandspacing.
HTMLKeyboardFormatting
TheHTML<kbd>elementdefineskeyboardinput:
Example
<p>Toopenafile,select:</p>
<p><kbd>File|Open...</kbd></p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_kbd)
HTMLSampleFormatting
TheHTML<samp>elementdefinesacomputeroutput:
Example
<samp>
demo.example.comlogin:Apr1209:10:17
Linux2.6.10grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2breslogv6.189
</samp>
TryitYourself(tryit.asp?filename=tryhtml_formatting_samp)
HTMLCodeFormatting
TheHTML<code>elementdefinesprogrammingcode:
Example
<code>
varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"}
</code>
TryitYourself(tryit.asp?filename=tryhtml_formatting_code)
The<code>elementdoesnotpreserveextrawhitespaceandlinebreaks:
Example
<p>CodingExample:</p>
<code>
varperson={
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</code>
TryitYourself(tryit.asp?filename=tryhtml_formatting_codelines)
Tofixthis,youmustwrapthecodeina<pre>element:
Example
<p>CodingExample:</p>
<code>
<pre>
varperson={
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</pre>
</code>
TryitYourself(tryit.asp?filename=tryhtml_formatting_codepre)
HTMLVariableFormatting
TheHTML<var>elementdefinesamathematicalvariable:
Example
<p>Einsteinwrote:</p>
<p><var>E=mc<sup>2</sup></var></p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_var)
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_computercode_elements1)
Exercise2(exercise.asp?filename=exercise_computercode_elements2)
Exercise3(exercise.asp?filename=exercise_computercode_elements3)
HTMLComputerCodeElements
Tag
Description
<code>
(/tags/tag_code.asp)
Definesprogrammingcode
<kbd>
(/tags/tag_kbd.asp)
Defineskeyboardinput
<samp>
(/tags/tag_samp.asp)
Definescomputeroutput
<var>
Definesamathematicalvariable
(/tags/tag_var.asp)
<pre>
(/tags/tag_pre.asp)
Definespreformattedtext
Previous(html_quotation_elements.asp)
NextChapter(html_comments.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
PrintPage
HTMLComments
Previous(html_computercode_elements.asp)
NextChapter(html_css.asp)
Commenttags<!and>areusedtoinsertcommentsinHTML.
HTMLCommentTags
YoucanaddcommentstoyourHTMLsourcebyusingthefollowingsyntax:
<!Writeyourcommentshere>
Note:Thereisanexclamationpoint(!)intheopeningtag,butnotintheclosingtag.
Commentsarenotdisplayedbythebrowser,buttheycanhelpdocumentyourHTML.
WithcommentsyoucanplacenotificationsandremindersinyourHTML:
Example
<!Thisisacomment>
<p>Thisisaparagraph.</p>
<!Remembertoaddmoreinformationhere>
TryitYourself(tryit.asp?filename=tryhtml_comment)
CommentsarealsogreatfordebuggingHTML,becauseyoucancommentoutHTMLlinesofcode,
oneatatime,tosearchforerrors:
Example
<!Donotdisplaythisatthemoment
<imgborder="0"src="pic_mountain.jpg"alt="Mountain">
>
TryitYourself(tryit.asp?filename=tryhtml_comment_out)
ConditionalComments
YoumightstumbleuponconditionalcommentsinHTML:
<![ifIE8]>
....someHTMLhere....
<![endif]>
ConditionalcommentsdefinesHTMLtagstobeexecutedbyInternetExploreronly.
SoftwareProgramTags
HTMLcommentstagscanalsobegeneratedbyvariousHTMLsoftwareprograms.
Forexample<!webbotbot>tagswrappedinsideHTMLcommentsbyFrontPageandExpression
Web.
Asarule,letthesetagsstay,tohelpsupportthesoftwarethatcreatedthem.
TestYourselfwithExercises!
Exercise1(exercise.asp?filename=exercise_comments1)
Exercise2(exercise.asp?filename=exercise_comments2)
Previous(html_computercode_elements.asp)
NextChapter(html_css.asp)
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.