HTML Glossary - Codecademy

29/07/2016
HTMLGlossary|Codecademy
UpgradetoPro
Catalog
CodecademyArticles>web
HTMLGlossary
ProgrammingreferenceforHTMLelements
Attributes
class
HTMLelementscanhaveoneormoreclasses,separatedbyspaces.YoucanstyleelementsusingCSSby
selectingthemwiththeirclasses.
Example
<divclass="bigboxyellowbox">Thisisabigyellowbox.</div>
id
AnHTMLelementcanhaveanidattributetoidentifyit.idelementsshouldalwaysbeuniquetothatsingle
element,andeachelementshouldneverhavemorethanoneid.
Example
<divid="mybox">Thisismybox!Putyourtextinsomeotherbox.</div>
href
Linkstellthebrowserwheretogousinganhrefattribute,whichstoresaURL.
Example
<ahref="http://google.com">Googleit!</a>
BasicFormatting
Youcaneasilyformattexttobebold,italic,orunderlinedusingsimpleformattingtags.
Example
https://www.codecademy.com/articles/glossaryhtml
1/7
29/07/2016
Thistextis<b>bold</b>,<i>italicized</i>,and<u>underlined</u>.
Body
Thebodyisthecontainerforallofapage'scontent.Comesafterthe<head>tag,withintheoverall<html>
tag.
Example
<html>
<head>
<title>Anexampleofthebodytag</title>
</head>
<body>
Thisisinsidethebody!
</body>
</html>
Readmore
https://developer.mozilla.org/enUS/docs/Web/HTML/Element/body
Usage
Almostallcontentbelongsinsidethebodytag.Themainexceptionsarescriptandstyletags,aswellasthe
pagetitletag.Asyoucanseeinthisexample,thereisaheading,animage,andalinkallinsidethebodytag.
Theheadtagcontainsonlyexternalfilesandthepagetitle.
Example
<html>
<head>
<title>Myhomepage</title>
<linkrel="stylesheet"type="text/css"href="homepage.css"/>
<scripttype="text/javascript"src="homepage.js"></script>
</head>
<body>
<h1>Hello,thisisapictureofmycat!</h1>
<imgsrc="cat.jpg"/>
<ahref="mailto:cat@codecademy.com">Emailmycat</a>
</body>
</html>
Children
Anelementthatisanimmediatedescendentofanotherelementornestedwithinanotherelementiscalleda
child.ThesebecomeusefulwhenusingCSSchildselectorsandpsuedoelements.
Example
<ulid="parent">
<liid="child">I'machildofparent!</li>
</ul>
Comments
HTMLcommentsaresometimesusedincodetoexplainpartsofthemarkup.Theyaresimilartocomments
inotherlanguages.Usersdonotseecommentsintheirbrowser.
Syntax
2/7
29/07/2016
<!ThisisanHTMLcomment!>
Div
Ablocklevelcontainer(or'division'ofthewebpage)forcontentwithnosemanticmeaning.
Syntax
<div>Thisisadivelement.</div>
Head
Tagthatsurroundsimportantcontentthatisinvisibletotheuser,butisimportanttothebrowser.Elements
withinthistagcontainmetadataaboutthepageandlinkstostylesheets,scripts,etc.
<html>
<head>
</head>
<body>
</body>
</html>
Headings
Headingelementslike<h1>,<h2>,<h3>,...allowyoutousesixlevelsofdocumentheadings,rangingfrom
largesttosmallest,breakingupthedocumentintologicalsections.Forexample,theword'Headings'aboveis
wrappedina<h2>tag.
Syntax
<h1>Thisisaheader!</h1>
Horizontalrules
Thistagcreatesablacklineonepixelthickthatrunstheallthewayacrossitscontainer.Itcanbestyledto
lookdifferentlywithCSS.
Example
Thistextisdivided
<hr>
...fromthistext!
Readmore
https://developer.mozilla.org/enUS/docs/Web/HTML/Element/hr
HTML
WhatisHTML?
HTMLstandsforHyperTextMarkupLanguage.Itisthelanguageusedtocreateallwebsites.
Readmore
http://www.w3.org/wiki/HTML/Training/What_is_HTML
<html>tag
3/7
29/07/2016
AllHTMLfileslivewithinanoverarchinghtmltag.Thisisthebasictagthatdefinesanhtmldocument.
Syntax
<html>
Therestofyourwebpagegoesinhere!
</html>
Readmore
https://developer.mozilla.org/enUS/docs/Web/HTML/Element/html
Hyperlinks
Hyperlinks(orjustlinks)taketheusertoanotherwebpagewhentheyclickonit.Themostcommonattribute
usedwithlinksishref,whichtellsthebrowserwherethelinkgoes.
Syntax
<ahref="urlthislinkgoesto">Linktext</a>
Example
Thefollowingtextis<ahref="http://google.com">goestoGoogle</a>.
Images
TheimgtagembedsanimageintoyourHTML.Alwaysfoundwiththe'src'attribute,whichtellsthebrowser
wheretofindtheimage.Notethatthe<img/>tagisselfclosing.
Syntax
<imgsrc='mylocalimage.jpg'/>
Linebreaks
Thistagisusedinablockoftexttoforcealinebreak.Thisistobeusedforthingswhichareasingle
paragraph,butwherethisformattingisnecessarysuchaspoemsoraddresses.Toseparateparagraphs,
separateeachparagraphintoaseparateelementinstead.Theresultingelementonawebpagewilllooklike:
Example
<p>Sometext<br/>thatspanstwolines</p>
Links
Linkelementsareusedtoconnectyourdocumenttoarelatedresource(verydifferentfromhyperlinks,
whichtakeyoutoanotherwebpagewhenyouclickonthem).Linksappearonlyintheheadsectionofa
documentsotheydonotalterthecontent,butonlythepresentation.Linksaremostcommonlyusedto
connecttoastylesheet,script,favicon,oralternateformatofthepagesuchasanRSSfeedorPDF.
Exampl
<linktype="text/css"rel="stylesheet"href="styles.css"/>
Lists
HTMLsupportstwokindsoflists:orderedlistsandunorderedlists.Withinlistseachindividuallistitemhas
itsowntag.
4/7
29/07/2016
UnorderedLists
Unorderedlistsarejustlistswhoseitemsaredenotedwithbulletpoints.
Example
Shoppinglist
<ul>
<li>Dishsoap</li>
<li>Kittylitter</li>
<li>Tomatosauce</li>
</ul>
Readmore
https://developer.mozilla.org/enUS/docs/Web/HTML/Element/ol
OrderedLists
Orderedlists'itemsaredenotedwithnumbers.
Example
Mynumberedlist
<ol>
<li>Firstitem!</li>
<li>Seconditem!</li>
<li>Lastitem!</li>
</ol>
Readmore
https://developer.mozilla.org/enUS/docs/Web/HTML/Element/li
Paragraphs
<p>
OneofthemostcommontagsinHTMLitdenotesaparagraphoftext.Itoftenhasotherelementsnested
insideofit,suchas<img/>,<a>,<strong>and<em>.
Syntax
<p>Thisisparagraphtext!</p>
Semanticformatting
Thesetagsaresimilartothepreviouslymentionedformattingtagswhichhavefallenoutoffavor.The
differenceisthatthesetagshavesemanticvalue(meaning).<em>isusedforsomethingthatyouwishto
emphasizeand<strong>isusedforsomethingthatisimportant.Withbothoftheseelements,youcanconvey
thelevelofemphasisorimportancewithnesting.Themoretimesthatyounesttheelementwithinitself,the
higherthemagnitudeofthetextitcontains.
Example
<p><strong><strong>Warning:</strong>Acidcancausesevereburns</strong></p>
5/7
29/07/2016
Tables
Anelementfordisplayinginformationinrowsandcolumns.Supportsheadersandfootersforlabeling
columns.Dividesinformationintorows(denotedbythetrtag)whichcontaincells(denotedbythetdtag).
Example
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td>$56.75</td>
</tr>
<tr>
<td>Yogurt</td>
<td>$12.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$69.74</td>
</tr>
</tfoot>
</table>
Tags&Elements
Tagsarebasiclabelsthatdefineandseparatepartsofyourmarkupintoelements.Theyarecomprisedofa
keywordsurroundedbyanglebrackets<>.Contentgoesbetweentwotagsandtheclosingoneisprefixed
withaslash(Note:therearesomeselfclosingHTMLtags,likeimagetags).Tagsalsohaveattributes,which
are
Syntax
<tagattribute='value'>content</tagkeyword>
Title
Thistagtellsthebrowserwhattodisplayasthepagetitleatthetopandtellssearchengineswhatthetitleof
yoursiteis.Itgoesinside<head>tags.Tryandmakeyourpagetitlesdescriptive,butnotoverlyverbose.
Example
<title>HTMLGlossary</title>
Teachingtheworldhowtocode.
Company
6/7
29/07/2016
About
Stories
We'rehiring
Blog
Resources
Articles
Schools
Help
LearnToCode
MakeaWebsite
MakeanInteractiveWebsite
LearnSass
DeployaWebsite
LearnRails
RubyonRailsAuthentication
LearnAngularJS
IntroductiontoReact.js:PartI
IntroductiontoReact.js:PartII
LearntheCommandLine
LearnSQL
SQL:TableTransformation
SQL:AnalyzingBusinessMetrics
LearnJava
LearnGit
HTML&CSS
JavaScript
jQuery
PHP
Python
Ruby
LearnAPIs
PrivacyPolicyTerms
MadeinNYC2016Codecademy
English
7/7

HTML Glossary - Codecademy

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Glossary - Codecademy

Transféré par

Droits d'auteur :

Formats disponibles

29/07/2016

Vous aimerez peut-être aussi