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

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
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
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
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
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
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
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
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
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
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
 

Recently uploaded (20)

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
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
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
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
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
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
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
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
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
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
 

HTML - Basics and Good Practices