HTML ANATOMY OF A SIMPLE WEBPAGE.
#coding #programming
#100DaysOfCode
BOOKMARK FOR LATER 🗃️
MEGA THREAD 🧵
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>
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.
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
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.
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
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.
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
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.
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.
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.
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.
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.
14. Table in HTML
- <table> tag in HTML is used to display tabular data.
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.
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
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.
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
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.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.