2. Did you know that every webpage has a structure? Maybe it comprises of small divisions?
A div?
Another div?
4 more divs?
3. Things don’t work the way like we always want!
We need to have some common standard for building web pages so that each and every one of us can follow that and grow
the internet together!
Why do we need a structure at all?
Moreover, In order to maintain scalability (being able to grow the web site) and maintainability, we use proper HTML
tags defined by World Wide Web Consortium (W3C) and thus divide a particular web page into small scalable components!
4. Some facts?
> HTML stands for Hypertext Markup Language.
> It describes the structure of a web page & also known as the most basic building block of the web.
> In other words, it tells the browser how to actually display a particular web page.
> The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
> A browser does not display the HTML tags, but uses them to determine how to display the document.
Hypertext Markup Language
"Hypertext" refers to links that
connect web pages to one another,
either within a single website or
between websites.
HTML uses "markup" to annotate text, images, and
other content for display in a Web browser. HTML
markup includes special "elements" such as <head>,
<title>, <body>, <header>,
Language?... Duh?
5. Anatomy of HTML
Can’t believe I’m here! <p> Can’t believe I’m here! </p>
How should we tell browsers!
Opening tag Closing tag
Content
6. Behind the scenes!
Root element of
a webpage
Contains meta information about
the HTML page
Specifies a title
for the HTML
page (which is
shown in the
browser's title
bar or in the
page's tab)
Defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
7. HTML Semantics (HTML5) - Let’s put some meaning into our code!
> Semantic HTML is the use of HTML markup
to reinforce the semantics, or meaning, of the
information in web pages and web applications
rather than merely to define its presentation or
look. Semantic HTML is processed by traditional
web browsers as well as by many other user
agents.
> Semantic tags are essentially just <div>
elements that wrap particular types of content
on the page. They are not required but help the
browser, assistive devices, and search engines
determine what the structural outline of the
page actually looks like.
8. You know where to find me!
webcrat.tech@gmail.com
PS. Keep the subject line as:
[ Web Dev BootCamp ‘ 20 ]
Github @webber2408
LinkedIn @rahul-sharma-25b30b114
Medium @webcrat.tech
9. References
> Amazon.com
> Undraw.co
> Icons made by Freepik from www.flaticon.com
> MDN (HTML): https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
> MDN (CSS - Important): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks
> W3Schools: https://www.w3schools.com/html/
> HTML Semantics: vikingcodeschool.com/html5-and-css3/html5-semantic-tags
> WikiPedia: https://en.wikipedia.org/wiki/Semantic_HTML