HTML5 Part1

9/2/2015
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)
NextChapter(html_intro.asp)
2/3
9/2/2015
HTMLTutorial
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRightsReserved.
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:
2/4
9/2/2015
IntroductiontoHTML
<html>
<head>
<title>Pagetitle</title>
</head>
<body>
<h1>Thisisaheading</h1>
<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
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)
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>
</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:
2/3
9/2/2015
HTMLEditors
Toopenafileinabrowser,doubleclickonthefile,orrightclick,andchooseopen
with.
Previous(html_intro.asp)
NextChapter(html_basic.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>
</body>
</html>
TryitYourself(tryit.asp?filename=tryhtml_basic_document)
HTMLHeadings
HTMLheadingsaredefinedwiththe<h1>to<h6>tags:
Example
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>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.
2/3
9/2/2015
Previous(html_editors.asp)
HTMLBasic
NextChapter(html_elements.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
</body>
</html>
Tryityourself(tryit.asp?filename=tryhtml_elements)
HTMLExampleExplained
The<html>elementdefinesthewholedocument.
Ithasastarttag<html>andanendtag</html>.
TheelementcontentisanotherHTMLelement(the<body>element).
<html>
<body>
</body>
</html>
The<body>elementdefinesthedocumentbody.
Ithasastarttag<body>andanendtag</body>.
TheelementcontentistwootherHTMLelements(<h1>and<p>).
<body>
</body>
The<h1>elementdefinesaheading.
Ithasastarttag<h1>andanendtag</h1>.
Theelementcontentis:MyFirstHeading.
The<p>elementdefinesaparagraph.
Ithasastarttag<p>andanendtag</p>.
2/4
9/2/2015
HTMLElements
Theelementcontentis:Myfirstparagraph.
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.
3/4
9/2/2015
Previous(html_basic.asp)
HTMLElements
NextChapter(html_attributes.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>
</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
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)
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)
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)
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>
1/1
9/2/2015
Exercisev1.3
Exercise:
Transformthetextbelowintoalinkthatgoesto"www.w3schools.com".
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
Thisisalink
Thisisalink
</body>
</html>
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>
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>
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
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
<hr>
<hr>
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.
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.
Exercise1(exercise.asp?filename=exercise_headings1)
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
3/4
9/2/2015
Previous(html_attributes.asp)
HTMLHeadings
NextChapter(html_paragraphs.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>
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>
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>
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>
Don'tForgettheEndTag
MostbrowserswilldisplayHTMLcorrectlyevenifyouforgettheendtag:
Example
<p>Thisisaparagraph
<p>Thisisanotherparagraph
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
2/4
9/2/2015
HTMLParagraphs
Example
<p>Thispoemwilldisplayasoneline:</p>
<p>
MyBonnieliesovertheocean.
MyBonnieliesoverthesea.
Oh,bringbackmyBonnietome.
</p>
TryitYourself(tryit.asp?filename=tryhtml_poem)
TheHTML<pre>Element
TheHTML<pre>elementdefinespreformattedtext.
Thetextinsidea<pre>elementisdisplayedinafixedwidthfont(usuallyCourier),anditpreserves
bothspacesandlinebreaks:
Example
<pre>
</pre>
TryitYourself(tryit.asp?filename=tryhtml_pre)
Exercise1(exercise.asp?filename=exercise_paragraphs)
Exercise2(exercise.asp?filename=exercise_paragraphs1)
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)
4/4
9/2/2015
Exercisev1.3
Exercise:
Addaparagraphtothisdocumentwiththetext"HelloWorld!".
Hint
EditThisCode:
SeeResult
Result:
ShowAnswer
<!DOCTYPEhtml>
<html>
<body>
</body>
</html>
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>
</p>
</body>
</html>
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">
</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>
TryitYourself(tryit.asp?filename=tryhtml_styles_textalign)
The<center>tag,supportedinolderversionsofHTML,isnotvalidinHTML5.
ChapterSummary
UsethestyleattributeforstylingHTMLelements
Usebackgroundcolorforbackgroundcolor
Usecolorfortextcolors
Usefontfamilyfortextfonts
Usefontsizefortextsizes
Usetextalignfortextalignment
Exercise1(exercise.asp?filename=exercise_styles1)
Previous(html_paragraphs.asp)
NextChapter(html_formatting.asp)
Exercise:
Changethetextcoloroftheparagraphto"blue".
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
ShowAnswer
Result:
Thisisaparagraph.
<pstyle="color:red">Thisisaparagraph.
</p>
</body>
</html>
Exercise:
Changethefontoftheparagraphto"courier".
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
Thisisaparagraph.
</body>
</html>
Exercise:
Centeraligntheparagraph.
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
Thisisaparagraph.
</body>
</html>
Exercise:
Changethetextsizeoftheparagraphto200%.
Hint
CorrectCode:
<!DOCTYPEhtml>
<html>
<body>
CorrectResult:
HideAnswer
Thisisaparagraph.
<pstyle="fontsize:200%">Thisisa
paragraph.</p>
</body>
</html>
Exercise:
Changethebackgroundcolorofthepagebelowtoyellow.
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
Thisisaheading
Thisisaparagraph.
</body>
</html>
Exercise:
Centeralignallcontentonthepage.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
<h2>Thisisalsoaheading</h2>
<p>Thisisalsoparagraph.</p>
ShowAnswer
Result:
Thisisaheading
Thisisalsoaheading
Thisisaparagraph.
Thisisalsoparagraph.
</body>
</html>
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><strong>Thistextisstrong</strong>.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_strong)
HTMLItalicandEmphasizedFormatting
TheHTML<i>elementdefinesitalictext,withoutanyextraimportance.
Example
<p><i>Thistextisitalic</i>.</p>
TryitYourself(tryit.asp?filename=tryhtml_formatting_i)
TheHTML<em>elementdefinesemphasizedtext,withaddedsemanticimportance.
Example
<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)
HTML Marked Formatting

TheHTML<mark>elementdefinesmarkedorhighlightedtext:
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)
Exercise1(exercise.asp?filename=exercise_formatting1)
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
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>
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>
Exercise:
Highlighttheword"FUN!"inthetextbelow.
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
ShowAnswer
Result:
HTMLisFUNtolearn!
<p>HTMLisFUNtolearn!</p>
</body>
</html>
Hiring 50 Java Architects

Earn $100k USD & Work From Home! Apply now through Crossover.
Exercise:
Applysubscriptformattingtothenumber"2"inthetextbelow.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
Result:
ShowAnswer
H2Oisthescientifictermforwater.
<p>H2Oisthescientifictermforwater.
</p>
</body>
</html>
Senior Frontend Developer

Earn $60k USD & Work From Home! Apply now through Crossover.
Exercise:
Addalinethrough(strikeout)theletters"blue"inthetextbelow.
Hint
EditThisCode:
SeeResult
<!DOCTYPEhtml>
<html>
<body>
ShowAnswer
Result:
Myfavoritecolorisbluered.
<p>Myfavoritecolorisbluered.</p>
</body>
</html>
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)
Exercise1(exercise.asp?filename=exercise_quotations1)
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
Exercise:
UseanHTMLelementtoaddquotationmarksaroundtheletters"cool".
Hint
EditThisCode:
<!DOCTYPEhtml>
<html>
<body>
SeeResult
Result:
ShowAnswer
Iamsocool.
<p>Iamsocool.</p>
</body>
</html>
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>
Exercise:
Makethetextbelowgorighttoleft.
Hint
CorrectCode:
<!DOCTYPEhtml>
<html>
<body>
HideAnswer
CorrectResult:
!yadlufituaebatahW
<bdodir="rtl">Whatabeautifulday!</bdo>
</body>
</html>
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>
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)
Exercise1(exercise.asp?filename=exercise_computercode_elements1)
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)
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>
<!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.
Exercise1(exercise.asp?filename=exercise_comments1)
Exercise2(exercise.asp?filename=exercise_comments2)
Previous(html_computercode_elements.asp)
NextChapter(html_css.asp)

HTML5 Part1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Part1

Uploaded by

Copyright:

Available Formats

9/2/2015

HTML Marked Formatting

Hiring 50 Java Architects

Senior Frontend Developer

You might also like