SlideShare a Scribd company logo
1 of 25
flickr.com/photos/apophysis_rocks




                                   Semantics in HTML
Gordon Brander
Front-end Developer at Crowd Favorite
What is Semantics?
Semantics = Meaning
 In HTML, semantics is about describing things
Why?
Meaning is what makes
  the web awesome
flickr.com/photos/i-capture/16136112/




                                  Free market of ideas
                                       You never know what people will do with them
Mapping the BP Oil Disaster
       http://www.ifitwasmyhome.com/
We Feel Fine
 http://www.wefeelfine.org/
How?
HTML is a
<markup> language
Hashtag:
#worldcup



HTML:
<a href=”http://fifa.com”>World Cup</a>
Tag start                                         Tag end




        <a href=”http://fifa.com”>World Cup!</a>

                  Attribute        Content
Top Three Semantic Hooks


• <head>: info about the document
• Tags: what a piece of content is
• Attributes: more granular info about the content
Two Guidelines


• Use the most specific available tag
• Pick good names for your classes
Fancy new tags


                        <header>

                         <nav>



            <article>                <aside>
            <article>                <aside>
            <article>                <aside>




                        <footer>


More: http://dev.w3.org/html5/markup/spec.html
Naming things
• Bad:
  <h1 class=”big-red-text”>Cats! LOL</h1>

• Bad:
  <span class=”green-italics”>Some intro text</span>

• Good:
  <h1 class=”article-title”>Cats! LOL</h1>

• Good:
  <strong class=”intro”>Some intro text</strong>
Describe what things are,
 not what they look like
flickr.com/photos/jurvetson/5268677/




                                      Microformats
                                       Why do all the work yourself?
Cool. Me
                                           too!
I’m going to mark up my
  contact info like this...
                              Cool. Me
                                too!
                                         Cool. Me
                                           too!
                              Cool. Me              Cool. Me
                                too!                  too!

                                         Cool. Me
                                           too!
                              Cool. Me
                                too!
<address class=”vcard”>
  <a class=”fn url” href=”http://gordonbrander.com”>
    <span class=”given-name”>Gordon</span>
    <span class=”family-name”>Brander</span>
  </a>
</address>
<address class=”vcard”>
  <a class=”fn url” href=”http://gordonbrander.com”>
    <span class=”given-name”>Gordon</span>
    <span class=”family-name”>Brander</span>
  </a>
</address>
<address class=”vcard”>
  <a class=”fn url” href=”http://gordonbrander.com”>
    <span class=”given-name”>Gordon</span>
    <span class=”family-name”>Brander</span>
  </a>
</address>
microformats.org
• People: vcard
• Syndication/Blogging: hAtom
 • News: hNews
• Events: hCalendar
• Copyright - rel-license
• Lots more...
Gordon Brander
   gordonbrander.com

More Related Content

What's hot

Searchlondon Tips for 2012
Searchlondon Tips for 2012Searchlondon Tips for 2012
Searchlondon Tips for 2012
Craig Bradford
 
Web Design Qus.doc
Web Design Qus.docWeb Design Qus.doc
Web Design Qus.doc
butest
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
Matthew Mobbs
 

What's hot (12)

SEO Before Yoast: WordCamp Rhode Island
SEO Before Yoast: WordCamp Rhode IslandSEO Before Yoast: WordCamp Rhode Island
SEO Before Yoast: WordCamp Rhode Island
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
Webdesign
WebdesignWebdesign
Webdesign
 
HTML all tags .........its to much helpful for beginners
HTML all tags .........its to much helpful for beginners HTML all tags .........its to much helpful for beginners
HTML all tags .........its to much helpful for beginners
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Searchlondon Tips for 2012
Searchlondon Tips for 2012Searchlondon Tips for 2012
Searchlondon Tips for 2012
 
Web Design Qus.doc
Web Design Qus.docWeb Design Qus.doc
Web Design Qus.doc
 
WordCamp Baltimore 2016
WordCamp Baltimore 2016WordCamp Baltimore 2016
WordCamp Baltimore 2016
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
How to Make WordPress Your Friend
How to Make WordPress Your FriendHow to Make WordPress Your Friend
How to Make WordPress Your Friend
 
√ Web designing company in mumbai
√ Web designing company in mumbai√ Web designing company in mumbai
√ Web designing company in mumbai
 

Viewers also liked

Idiomi, lecture 03, 12 13
Idiomi, lecture 03, 12 13Idiomi, lecture 03, 12 13
Idiomi, lecture 03, 12 13
Alen Šogolj
 
Copy Of Pragmatics Combine
Copy Of Pragmatics CombineCopy Of Pragmatics Combine
Copy Of Pragmatics Combine
Dr. Cupid Lucid
 
51285452 seven-types-of-meaning
51285452 seven-types-of-meaning51285452 seven-types-of-meaning
51285452 seven-types-of-meaning
Hina Honey
 
Pragmatics (Linguistics)
Pragmatics (Linguistics)Pragmatics (Linguistics)
Pragmatics (Linguistics)
Coltz Mejia
 

Viewers also liked (20)

Pragmatics 1
Pragmatics 1Pragmatics 1
Pragmatics 1
 
Idiomi, lecture 03, 12 13
Idiomi, lecture 03, 12 13Idiomi, lecture 03, 12 13
Idiomi, lecture 03, 12 13
 
Semantic Search Component
Semantic Search ComponentSemantic Search Component
Semantic Search Component
 
Hxe302 semantics1
Hxe302 semantics1Hxe302 semantics1
Hxe302 semantics1
 
Semantics
SemanticsSemantics
Semantics
 
SEMANTICS
SEMANTICSSEMANTICS
SEMANTICS
 
Semantics (04)
Semantics (04)Semantics (04)
Semantics (04)
 
The dimension of meaning
The dimension of meaningThe dimension of meaning
The dimension of meaning
 
Copy Of Pragmatics Combine
Copy Of Pragmatics CombineCopy Of Pragmatics Combine
Copy Of Pragmatics Combine
 
Word Meaning (Semantics)
Word Meaning (Semantics)Word Meaning (Semantics)
Word Meaning (Semantics)
 
Types of meaning
Types of meaningTypes of meaning
Types of meaning
 
51285452 seven-types-of-meaning
51285452 seven-types-of-meaning51285452 seven-types-of-meaning
51285452 seven-types-of-meaning
 
Semantics chapter 2 saeed
Semantics chapter 2 saeedSemantics chapter 2 saeed
Semantics chapter 2 saeed
 
Sentence meaning is different from speaker’s meaning
Sentence meaning is different from speaker’s meaningSentence meaning is different from speaker’s meaning
Sentence meaning is different from speaker’s meaning
 
1. introduction to semantics
1. introduction to semantics1. introduction to semantics
1. introduction to semantics
 
Pragmatics
PragmaticsPragmatics
Pragmatics
 
Semantics: Seven types of meaning
Semantics: Seven types of meaningSemantics: Seven types of meaning
Semantics: Seven types of meaning
 
Pragmatics - George Yule
Pragmatics - George YulePragmatics - George Yule
Pragmatics - George Yule
 
Pragmatics (Linguistics)
Pragmatics (Linguistics)Pragmatics (Linguistics)
Pragmatics (Linguistics)
 
SEMANTICS
SEMANTICS SEMANTICS
SEMANTICS
 

Similar to BDW - What is Semantics

[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
Christopher Schmitt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Terry Ryan
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Artdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group ProjectsArtdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group Projects
guestca5654
 

Similar to BDW - What is Semantics (20)

Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Html coding
Html codingHtml coding
Html coding
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
 
Pt3 Organic SEO Workshop for Wedding Pros
Pt3 Organic SEO Workshop for Wedding ProsPt3 Organic SEO Workshop for Wedding Pros
Pt3 Organic SEO Workshop for Wedding Pros
 
Basic HTML CSS Slides
Basic HTML CSS Slides Basic HTML CSS Slides
Basic HTML CSS Slides
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
 
Artdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group ProjectsArtdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group Projects
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Html intro
Html introHtml intro
Html intro
 
[SUTD GDSC] Intro to HTML and CSS
[SUTD GDSC] Intro to HTML and CSS[SUTD GDSC] Intro to HTML and CSS
[SUTD GDSC] Intro to HTML and CSS
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Modular HTML & CSS
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
 
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan ShroyerJoomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

BDW - What is Semantics

Editor's Notes

  1. - I design and build things with HTML, CSS, Javascript - I&amp;#x2019;ve done work for VC firms, Fortune 500 Companies, and startups - Sites with million+ visits per day
  2. - Study of meaning - Important for digital designers because... - There is no limit to what you can do in digital - We need things to make sense - HTML is just a plain text file, formatted in a specific way. A &quot;semantic way&quot;. - The web is built on this simple idea
  3. - Take content, make it meaningful, network it: that&amp;#x2019;s the web - Cool things happen. I found this by searching &amp;#x201C;awesome&amp;#x201D; - Open, Meaningful content is useful content - Searchable - Accessible - Interoperable - Every meaningful description is a facet you or a computer can use
  4. - More information = better markets = better-off people - The grand vision of the web: share our information - relationship between info is meaningful - EXAMPLE : Google
  5. - US govt (NOAA) publishing machine-readable semantic data - Data.gov - Everyblock - Future of journalism?
  6. - Looks at LiveJournal, MySpace, Blogger, Flickr, etc - Irony: it&amp;#x2019;s closed - OpenScience - But maybe your goal is as simple as getting eyeballs on your product - Semantics helps you do that by making it make sense to computers
  7. - With HTML!!!
  8. - What is a markup language? - How many of you use Twitter? - What is a hash tag? - Hash tag = markup language. - A plain-text pattern that makes sense to humans and computers. - Lets you add information to content
  9. - &lt;head&gt; describing what the page is about - Attributes: more specific description
  10. - Standardized names for things
  11. - hNews received Knight fellowship
  12. - I design and build things with HTML, CSS, Javascript - I&amp;#x2019;ve done work for VC firms, Fortune 500 Companies, and startups - Sites with million+ visits per day