HTML Personal notes

💎 Introduction

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It can be used to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.

HTML5 is the latest version of HTML, with new elements, attributes, and behaviors, and a larger set of technologies that can be used to build web pages and web applications ike WebGL, SVG and more.

🅱️ HTML Basics

HTML is the markup language we use to structure content that we consume on the Web.

HTML is served to the browser in different ways.

It can be generated by a server-side application that builds it depending on the request or the session data, for example a Rails or Laravel or Django application.
It can be generated by a JavaScript client-side application that generates HTML on the fly.
In the simplest case, it can be stored in a file and served to the browser by a Web server.

By convention, an HTML file is saved with a .html or .htm extension.

Inside this file, we organize the content using tags.

Tags wrap the content, and each tag gives a special meaning to the text it wraps.

When an HTML page is served by the browser, the tags are interpreted, and the browser renders the elements according to the rules that define their visual appearance.

Some of those rules are built-in, such as how a list renders or how a link is underlined in blue.

Some other rules are set by you with CSS.

HTML is not presentational. It's not concerned with how things look. Instead, it's concerned with what things mean.

It's up to the browser to determine how things look, with the directives defined by who builds the page, with the CSS language.

🗃️ HTML Page Structure

HTML pages basicly contains:

Elements : all kind of different types, e.g. images, tables, lists, etc.
Tags : tags are used to structure the elements, almost every element has an opening and a closing tag, e.g. <p> and </p>.

Note : Though every element has a closing tag, it's not always the case, some elements don't have a closing tag, e.g. <img> and <br>.
Text : text is the content of the elements, e.g. the text inside the <img> tag.

Example:

<h1>Hello, I am some text</h1>

Element: h1
Tag: <h1>
Text: Hello, I am some text

Note : The content of tag is not always text, you can nest elements inside other elements, e.g. <p> and <h1>

Example:

<p>
  <h1>Hello, I am some text</h1>
</p>

Adding Attributes:

Attributes are used to add extra information to the element, they are separated by a = sign and can be surrounded by quotes, e.g. <img src="..."> has a src attribute.
Elements can have multiple attributes, and an be separated by a space, e.g. <img src="..." alt="..."> has both src and alt attributes, or none attributes, e.g. <h1> has no attributes.

Example:

<img src="https://user-images.githubusercontent.com/62269745/
174906065-7bb63e14-879a-4740-849c-0821697aeec2.png#gh-light-mode-only" width="40%">

HTML file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="..." />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="..." />
    <link
      rel="stylesheet"
      href="..."
    />
    <title>...</title>
  </head>
  <body>
    
  </body>
</html>

Doctype tag: defines the language of the file code, e.g. <!DOCTYPE html> represents the HTML language.
html tag: defines the language of the file code, e.g. <html lang="en"> represents the HTML language and site language in english (helps screen readers).
head tag: defines the head of the page, e.g. <head> contains the meta tags, the link tags, the title tag, and the stylesheet tag.
meta tag: defines the meta tags of the page, e.g. <meta charset="utf-8"> defines the character set of the page.
title tag: defines the title of the page, e.g. <title>...</title> place plain text to define the title of the page.
link tag: defines the link tags of the page, e.g. <link rel="shortcut icon" href="..."> defines the shortcut icon of the page.
style tag: defines the style tags of the page, e.g. <style>...</style> place css code inside to style the page.
script tag: defines the script tags of the page, e.g. <script>...</script> place javascript code inside to program the page.
Note : Some important attributes are :
- async : defines if the script is asynchronous or not.
- defer : defines if the script is deferred or not.
body tag: defines the body of the page, e.g. <body>...</body> place html code inside to define the body of the page which will be visible for the user.

HTML Content:

Headings : <h1> to <h6> : defines the headings of the page, e.g. <h1>...</h1> place plain text to define the title of the page.

Note : The <h1> tag is the most important heading of the page, it defines the title of the page, and you should use only one <h1> tag on a single page.

Note : heading alignment by default on the left.
Paragraphs : <p> : defines the paragraphs of the page, e.g. <p>...</p> place plain text to define the paragraphs of the page.
breaks : <br> : thouh you think that when you add break inside the <p> element will add a break into the website, but it's not, you need to use <br> to define the breaks of the page.

Note : The browser ignores any spaces/tabs in the text just reads the tags and the text itself.
Go to HTML Elements for more information.

🗝️ The Old Content Model

The old content model is the one that is used by the browser to render the page, it has 2 main properties:

Inline: the content is rendered inline, e.g. the text inside the <b> tag is rendered inline.
- Don't start new line.
- Contains text or other inline elements.
- e.g. <span> and <a> tags.
Block: the content is rendered as a block, e.g. the text inside the <p> tag is rendered as a block.
- Start new line.
- Take up all available space.
- e.g. <div> and <h1> tags.

🆕 HTML 5 View of Content Model:

Html is about giving mening to content

e.g. Semantic elements
doesn't concern about layout, because it is handeled by the CSS code.
will descripe which content is expected.
an element may be a part of one or more categories.

New Model Content categories:

MetaData: defines element which establish the presentation and presentation of the page content, or create relation between a document and another external one.
Flow: defines element which are used in the body of the document e.g. <img>.
Sectioning: defines element which are used to create sections and orgnise the page in logical structure.
Phrasing: defines element related to text of the document.
Heading: defines element which are used to create headings.
Embedded: defines element which are used to create embedded elements e.g. video.
Interactive: defines element which are used to create interactive elements e.g. plain link <a>.

❇️ Semantic Content:

Sectioning Elements:
- <article>: used for stand-alone self contain content e.g. article.
- <aside>: used to represent related content of the document.
- <nav>: contains navigational links, not all links in a page shoud go to nav, only the real menu with aside.
- <section>: used for sections of the page, not just for layout porposes.
Flow Elements:
- <header>: container for header to content or navigational links.
- <footer>: defines footer content for document contains copyright or contact information.
- <main>: defines main content of the document.
- <address>: defines address and contact information.

🔥 Semantic Elements:

in <img>:
- alt: defines the alternative text for the image.
- <figure>: defines a figure element, it contains an image and a caption.
- <figcaption>: defines the caption of the image.
in <table>:
- <caption>: defines the caption of the table.
- <thead>: defines the header of the table.
- <tbody>: defines the body of the table.
- <tfoot>: defines the footer of the table.
- <tr>: defines a row of the table.
- <td>: defines a cell of the table.
- <th>: defines a header cell of the table.

📟 Inline & Block Elements:

Inline	Block
Special meaning to text	block elements create "larger" structures than inline elements.
Emphsize, quote, code...	Division, paragraph, section...
An inline element cannot contain a block-level element!	block-level elements may contain inline elements and (sometimes) other block-level elements

📚 Iframe:

used for embedding external content on a page, without having to redirect the user to other websites.

Warning: embedding external content on a page is a security risk.
the iframe tag has an extra attribute that allows us to control how it executes using the sandbox attribute the iframe is constrained, you can allow some of the features of the iframe to be used, like sandbox: allow-forms.
<iframe>: defines an inline frame.

🌐 Browser Support:

Old Browser still exists, so the semantic elements are not supported

ways to resolve this issue :
1. display block for all the semantic elements, because the old browser will make them inline.
2. The first method isn't the best, because we need to cover the styling porposes, we include this script in the head of the page: <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

💽 JavaScript APIs:

JavaScript allows us to write code in the browser

it powers the browser, it allows us to interact with the browser.
APIs expose certain functionality in the browser, like the window object, which allows us to interact with the browser.
Browsers come with several APIs built-in.

Commonly used APIs:

🌍 Geolocation: allows us to get the user's location, using the browser.
💾 Storage: gives access to the browser's local storage, which is a way to store data that is not visible to the user.
📱 Audio and video: allows us to play audio and video files in the browser.
✊ Drag and drop: allows us to drag and drop files in the browser using the mouse or the touch screen of the device (mobile).

💾 Local Storage:

Storing data in the browser

Small pieces of data that are stored locally in the browser, and are not visible to the user.
Sent to server by the browser with every request.
limited to 4KB of data.

Cookies:

The term cookie is used to describe a small piece of data that is stored on the user's computer by the browser.

Web storage API:

Through code, store key/value pairs in the browser.
Presistent on client.
More Space: 5MB

Types of storage:

localStorage: stores data locally in the browser.
sessionStorage: stores data in the browser, but only for the current session, deleted by the browser after closing window or tab.

Huthaifa-Dev / HTML