SlideShare a Scribd company logo
HTML
P R I S C I L A C N G
basics and good practices for developers
FRONT-END
IS NOT THAT
EASY
C O M P A N Y . C O M
BASIC
ELEMENTS
THAT
EVERYONE
KNOWS
MEANWHILE
IN HEADER
HOW TO
PROPERLY
SEPARATE
ELEMENTS
not with <br>
DIV SPAN
W H E N T O U S E
A block-level element
always starts on a new
line and takes up the
full width available
An inline element
doesn't start on a new
line and only takes up as
much width as necessary
h1, h2, h3, h4, h5, h6
form
ul
p
div
button, input, select
small, strong
img
a
span
BLOCK
ELEMENTS
"INLINE"
ELEMENTS
A semantic element clearly
describes its meaning to
both the browser and the
developer
LET'S TALK
ABOUT
SEMANTIC
HOW TO
PROPERLY USE
SEMANTIC
TAGS
not for their display properties
HOW
TO
FORM
H O W T O F O R M
OTHER FORM
ELEMENTS
O T H E R F O R M
E L E M E N T S
OTHER
FORM
ELEMENTS
O T H E R F O R M
E L E M E N T S
It is a new version of the
HTML, with new elements,
attributes, behaviors, and a
larger set of technologies
that allows more diverse
and powerful Web sites and
applications.
WHAT
ABOUT
HTML5
INPUT NEW
O T H E R F O R M
E L E M E N T S
color, date, datetime
datetime-local, email
month, number, range
search, tel, time, url, week
datalist
output
HOW
TO
HEADER
H O W T O H E A D E R
HOW
TO
CONTENT
H O W T O C O N T E N T
HOW
TO
LIST
H O W T O L I S T
HOW
TO
TABLE
H O W T O T A B L E
HOW TO
FOOTER
H O W T O F O O T E R
http://bit.ly/1exYIWj
http://bit.ly/1bfAZGt
https://mzl.la/1qTSVwu
THAT
REFERENCE
THANK YOU
VERY MUCH
priscilacng
E A G E N T E S E V Ê P O R A I

More Related Content

Similar to HTML - Basics and Good Practices

IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
Bartosz Chrabski
 
What's New with GreenRope
What's New with GreenRopeWhat's New with GreenRope
What's New with GreenRope
GreenRope
 
Cap Training Session 1
Cap Training Session 1Cap Training Session 1
Cap Training Session 1
Daniel Harding
 
WordPress Marketing Funnel Fundamentals
WordPress Marketing Funnel FundamentalsWordPress Marketing Funnel Fundamentals
WordPress Marketing Funnel Fundamentals
Parisa Vassei, MS
 
How to improve Customer Engagement
How to improve Customer EngagementHow to improve Customer Engagement
How to improve Customer Engagement
Susanne B. Böck
 
Lean responsive - Expanded
Lean responsive - ExpandedLean responsive - Expanded
Lean responsive - Expanded
Josh Jeffryes
 
Kryssplatform mobilutvikling i C# vha. Xamarin.Forms
Kryssplatform mobilutvikling i C# vha. Xamarin.FormsKryssplatform mobilutvikling i C# vha. Xamarin.Forms
Kryssplatform mobilutvikling i C# vha. Xamarin.Forms
Runar Ovesen Hjerpbakk
 
home inspection demo
home inspection demohome inspection demo
home inspection demo
dominique harris
 
Internship presentation.pptx
Internship presentation.pptxInternship presentation.pptx
Internship presentation.pptx
juveriyasidd35
 
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation20192019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
TYPO3 CertiFUNcation
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
The Advanced Guide to SEO
The Advanced Guide to SEOThe Advanced Guide to SEO
The Advanced Guide to SEO
Calvin Nguyen
 
Advanced seo guide
Advanced seo guideAdvanced seo guide
Advanced seo guide
Connecticut SEO Experts
 
120888 advanced seo g
120888 advanced seo g120888 advanced seo g
120888 advanced seo g
isaivarigal.com
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
reshmy12
 
HTML5 for dummies
HTML5 for dummiesHTML5 for dummies
HTML5 for dummies
Ran Bar-Zik
 
Role of html in web development
Role of html in web developmentRole of html in web development
Role of html in web development
Opti Matrix Solution
 
Vormfout English portfolio
Vormfout English portfolioVormfout English portfolio
Vormfout English portfolio
rogierbr
 

Similar to HTML - Basics and Good Practices (20)

IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
IBM Agile Engineering Summit 18: IBM Rational Publishing Engine and DNG in 30...
 
What's New with GreenRope
What's New with GreenRopeWhat's New with GreenRope
What's New with GreenRope
 
Cap Training Session 1
Cap Training Session 1Cap Training Session 1
Cap Training Session 1
 
WordPress Marketing Funnel Fundamentals
WordPress Marketing Funnel FundamentalsWordPress Marketing Funnel Fundamentals
WordPress Marketing Funnel Fundamentals
 
How to improve Customer Engagement
How to improve Customer EngagementHow to improve Customer Engagement
How to improve Customer Engagement
 
Lean responsive - Expanded
Lean responsive - ExpandedLean responsive - Expanded
Lean responsive - Expanded
 
Kryssplatform mobilutvikling i C# vha. Xamarin.Forms
Kryssplatform mobilutvikling i C# vha. Xamarin.FormsKryssplatform mobilutvikling i C# vha. Xamarin.Forms
Kryssplatform mobilutvikling i C# vha. Xamarin.Forms
 
home inspection demo
home inspection demohome inspection demo
home inspection demo
 
Internship presentation.pptx
Internship presentation.pptxInternship presentation.pptx
Internship presentation.pptx
 
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation20192019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
2019-CertiFUNcation-update-seo-dashboard-initiative-certifuncation2019
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
 
The Advanced Guide to SEO
The Advanced Guide to SEOThe Advanced Guide to SEO
The Advanced Guide to SEO
 
Advanced seo guide
Advanced seo guideAdvanced seo guide
Advanced seo guide
 
120888 advanced seo g
120888 advanced seo g120888 advanced seo g
120888 advanced seo g
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
 
HTML5 for dummies
HTML5 for dummiesHTML5 for dummies
HTML5 for dummies
 
Role of html in web development
Role of html in web developmentRole of html in web development
Role of html in web development
 
Vormfout English portfolio
Vormfout English portfolioVormfout English portfolio
Vormfout English portfolio
 

Recently uploaded

Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
Claudio Di Ciccio
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 

Recently uploaded (20)

Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 

HTML - Basics and Good Practices