Read HTML From

MDN: Document and website structure
Above is most useful/meaningful/lovable documentation i have ever found

Tags

Name desc
<a> (Anchors) Text is inside <a> and link/webaddress inside href(Hypertext Reference).

<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>

Image Link:
<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>
abbr (Abbreviations) <abbr>HTML</abbr>, Hypertext Markup Language
<address> marking up contact details — <address>. This wraps around your contact details
<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>
alt alt="Girl with a jacket". specifies an alternate text for an image
Attributes provide additional information about HTML elements. Specified in the start tag. comes in key=value pair
<article> Encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
<aside> Contains content that is not directly related to the main content but can provide additional information
<blockquote cite="url"> This tells content is taken from url
<p>
  <blockquote cite="http://www.worldwildlife.org/who/index.html">
    Below content is taken from this url
    For 50 years, WWF has been protecting the future of nature. The world's
    leading conservation organization, WWF works in 100 countries and is
    supported by 1.2 million members in the United States and close to 5
    million globally.
  </blockquote>
</p>
<body></body> The <body> element. This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.
<br> line break, Newline
class Used to specify a class for an HTML element.
<code> For marking up generic pieces of computer code.
combobox used for building forms in HTML. It is formed with select element and input type=”text” element.
<dl> (description lists) set of items and their associated descriptions, such as terms and definitions, or questions and answers
<dl>
  <dt>soliloquy</dt> Description Term
  <dd>
    Description Definition
    In drama, where a character speaks to themselves, representing their inner
    thoughts or feelings and in the process relaying them to the audience (but
    not to other characters.)
  </dd>
</dl>
doctype The doctype. The doctype is a historical artifact that needs to be included for everything else to work right.
<div> Is a block level non-semantic element, which you should only use if you can’t think of a better semantic block element to use, or don’t want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site. Now this widget is not <aside>, as it doesn’t necessarily relate to the main content. This widget is also not <section>, as it isn’t part of the main content of the page. So a <div> is fine in this case.

Warning: Divs are so convenient to use that it’s easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you’ll have a hard time updating and maintaining your documents.
<footer> The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.
<body>
  ..
  <footer>
    <p>©Copyright 2050 by nobody. All rights reversed.</p>
  </footer>
</body>
<hr> Horizontal line. used to separate content. Add a line
h1,h2,h3,h4,h5,h6: Headings Search engines use the headings to index the structure and content of your web pages
<header> Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.
<body>
  <header style="display: flex; align-items: center">
    <h1>Birdwatching</h1>
    <img src="dove.png" alt="a simple dove logo" />
  </header>
</body>
<head></head> Includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.
<html></html> html element. This element wraps all the content on the page. It is also known as the root element
<img> Embed image into page. Search engines also read image filenames and count them towards SEO. Therefore, you should give your image a descriptive filename; dinosaur.jpg is better than img835.png.
<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton. it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum"
/>
Why use alt at all?
- The user is visually impaired, and is using a screen reader to read the web out to them.
- The browser doesn’t support the image type. Some people still use text-only browsers, such as Lynx, which displays the alt text of images.
- Search engines match alt text with search queries.
- Users have turned off images to reduce data transfer volume and distractions. This is especially common on mobile phones
<input> used to create interactive controls for web forms. It can take various types, each defining a specific kind of user input

<form class="guess-form">
  <label for="guessField">Enter a guess: </label>
  <input type="number" min="1" max="100" required id="guessField" class="guessField" />
  <input type="submit" value="Submit guess" class="guessSubmit" />
</form>
label defines a label for several elements. provide a usability improvement for mouse users
lang lang attribute inside the <html> tag, to declare the language of the Web page. To assist search engines and browsers
link The <link> element should always go inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document’s stylesheet, and href, which contains the path to the stylesheet file
list (<ul> unordered list) <ul> this wraps around all the list items. Then <li> wraps around each item
<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>
<main> main content of page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn’t be nested within other elements.
list (<ol> ordered list) This is just same as list, but all elements are ordered
<ol>
  <li>get up</li>
  <li>fresh</li>
  <li>excercise</li>
  <li>breakfast</li>
</ol>
<meta> This element represents metadata.
<meta charset="utf-8" />
<meta name="author" content="Chris Mills" />
<meta name="description" content="...." />
<nav> Contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.
p Paragraph. Starts with newline & is block of text.
<pre> Defines preformatted text. text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
span We use it to wrap content when we want to apply CSS to it. Text inside span looks like h1.
<time datetime="2016-01-20"> can be written in different formats
<time datetime="2016-01-20">20 January 2016</time>

<span style="font-size: 32px; margin: 21px 0; display: block;">
  Is this a top level heading?
</span>
script <script> element should also go into the head, and should include a src attribute containing the path to the JavaScript you want to load
<span> When we cannot find a better semantic text element to wrap the content, then use span. Should be used preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.
<title></title> The <title> element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in.

style

To add color, font, size, and more. W3Schools HTML Styles 

<p style="color:red;font-size:300%;"> .. </p>
<body style="background-color:powderblue;">		//Background of page

Attributes of element

Attributes contain extra information about the element that won’t appear in the content. Example img tag can have following attributes:
1. src (required): Tells the location of the image.
2. alt: specifies a text description of the image
3. width: specifies the width of the image etc

boolean attributes

Attributes written without values. Boolean attributes can only have one value, which is generally the same as the attribute name. Example:
disabled: assign to form input elements. (You use this to disable the form input elements so the user can’t make entries) 

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

title

Defines some extra information about an element. The value of the title attribute will be displayed as a tooltip when you mouse over the element 

<p title="I'm a tooltip">This is a paragraph.</p>

Formatting elements

Tag Meaning
<b> Bold text
<strong> Important text
<i> Italic text
<em> Emphasized text
<mark> Marked text
<small> Smaller text
<del> Deleted text
<ins> Inserted text
<sub> Subscript text
<sup> Superscript text

Cascading Style Sheets (CSS)

Used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements CSS can be added to HTML documents in 3 ways:

1. Inline

using the style attribute inside HTML elements

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

2. Internal

using <style> element in the <head> section. Example: 

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

3. External (<link> in <head>)

An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a <link> to it in the <head> section of each HTML page 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

styles.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
  border: 2px solid powderblue; /* CSS border property defines a border around an HTML element */
  padding: 30px; /* defines a padding (space) between the text and the border */
  margin: 50px; /* defines a margin (space) outside the border */
}

Anatomy of an HTML document

See description of tags above

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Debugging HTML page errors

1. Feed your page address into Markup Validation Service. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your HTML.
2. Inspector. Press F12 on page.