Lil🕸️Adonise Profile picture
Jun 20 22 tweets 10 min read
HTML ANATOMY OF A SIMPLE WEBPAGE.
#coding #programming
#100DaysOfCode
BOOKMARK FOR LATER 🗃️

MEGA THREAD 🧵 Image
1. What is HTML?

- HTML - Hyper Text Markup Language
- Standard Language for creating webpages
- Defines structure of webpage
- Consists of content enclosed inside tags.
2. Basic HTML Structure

<!DOCTYPE html>

<html lang=”en”>

<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>HTML page structure</title>
</head>

<body>
<h1>Heading Content</h1>
<p>Paragraph Content</p>
</body>

</html> Image
3. <HTML>
The texts between <html> and </html> describes an HTML document.
The html lang attribute(<html lang=”en”>) is used to identify the language of text content on the web. This information helps search engines return language specific results.
4. Header in HTML
The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. Image
5. Body in HTML
The texts between <body> and </body> describes visible page content. The <body> element contains all contents of an html document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc

Note: There can only be one <body> element in an html document Image
6. Text tags in HTML
- These tags are used to display text on the webpage.
▪️Heading Tags
The heading elements are <h1>, <h2>, <h3>, <h4>, <h5>, <h6> with <h1>
▪️Paragraph element
The <p> element represents a paragraph. A paragraph always starts on a new line. ImageImageImage
7. Anchor element
The <a> element defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
Links in HTML ImageImage
8. Link element in HTML
The <link> element defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets. The <link> element is an empty element, it contains attributes only. Image
9. Lists in HTML
The <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ).
In ordered lists, list items are displayed using numbers or alphabets.
Example of Ordered Lists Image
Cont on 9. In HTML Lists, <ul> tag list starts with unordered list and list item starts with <li> tag. It is also called as a bulleted list because list items are marked with bullets. Image
10. Image tag in HTML

Images in HTML
- An image in HTML is displayed with either a “<img/>” tag of “<picture/>” tag.
- Picture tag lets you display multiple images for various screen conditions. ImageImage
11. Video tag in HTML
The <video> element is used to embed video content in a document, such as a movie clip or other video streams. ImageImage
12. Forms in HTML
The html <form> element is used for creating a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL. ImageImage
13.Buttons in HTML

- Button tag in HTML is used to represent a clickable button.
- Buttons can be created using <button> and <input type=”submit” > tags.
- You can put <p>,<img> tag inside a button tag but not <input> tag. Image
14. Table in HTML

- <table> tag in HTML is used to display tabular data. ImageImageImage
15. Nav tag
The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. Image
16. Section element in HTML
The <section> element is a structural html element used to group together related elements.The <section> element defines sections in a document, such as chapters, headers, footers, or any other sections of the document Image
17. Aside tag in HTML
<aside> element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. It is mostly used for showing ads on websites. Image
18. The <footer> element defines a footer for a document or section. A footer element typically contains: authorship information, copyright information, contact information, back-to-top links, related documents Image
That's all for now.

If you like this thread, make sure to :

▪️Follow me @LilAdonise

▪️kindly Retweet the first tweet

Thank you so much for getting to the end of this thread 🫂💪

Let me know what you think below😊🧎

Also my DM's always open for you


You can also Sign up at @aptlearn_io for Free to start your Frontend journey.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Lil🕸️Adonise

Lil🕸️Adonise Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(