https://developer.mozilla.org/en-US/docs/Web/HTML
Tags
<p>This is a paragaph.</p>- tags consists of opening
<>and closing</>
Comments
<!-- This is a comment -->HTML comments start with <!-- and end with -->
DOM (Document Object Model)
- elements are nested in HTML which creates a tree
- hierarchy and structure of HTML (like a tree)
Inline vs Block-Level
Inline and block have different response when CSS is applied
Inline tags that wrap around other words, eg. italic, bold, quote
Block Level tags that is entire block, eg. blockquote, headings
HTML File
Each HTML file must have a doctype declaration
<!doctype html>All the HTML content is enclosed in html element
<html lang="en-US" dir="ltr"></html>- that element can also have attributes that indicate the language and direction
head body (header and body element)
<head></head>
<body></body>The head is about the metadata and won’t be displayed on the page.
Body is for the content which will be displayed on page.
More information about html head
More information about html body
Paragraph
<p> </p>Without marking these, the browser by default renders everything in a single paragraph.
Headings
<h1> </h1>The headlines consists of 6 sizes from h1 to h6. Similar to markdown #
- h1 is the largest title hence the most important
Styling
<i> </i> <!-- Italic -->
<b> </b> <!-- Bold -->
<u> </u> <!-- Underline -->
<mark></mark> <!-- Highlighted -->
<del></del> <!-- Strikethrough -->- it the closing tag is not used, everything after the starting tag will have the styles applied
- you can also use
<em>and<strong>but sometimes these render the same as<b>
Lists
Lists starts with <ul> or <ol> and each individual items in a list are <li>
<ul> <li></li> </ul> <!-- List item -->
Unordered List <ul>
- group of list items that is not sorted
Ordered List<ol>
<ol start="10" type="A"> <li>List</li> </ol>- group of list item that can be counted like 123
- ordered list have
typeattribute with support for numbers, letters, Roman numerals - the
startattribute will start list counting from another number
Definition List<dl>
<dl>
<dt>Term</dt> <dd> Description </dd>
<dl>
- definition lists start as
<dl>and it can contain list of dictionaries with a term and its definition
Lists can be nested within a list (eg. list in a list)
Quotes
<blockquote>Entire Block of quote.</blockquote>
<q>inline quote</q>Add quotation to entire some text in a paragraph or entire block of text.
Time
<time>on some dates</time>Time tag is a human readable text that can have a datetime attribute applied to it (which must be machine-readable)
Code
<code>some code</code>
Code can be inline and will change the font to monospace.
Code can also be used to represent HTML entities so it doesn’t get rendered as HTML
<=%lt;>=%gt;&=&
List of many HTML entities
Symbols
Emojis
Smalltext
<small></small>Text that are smaller, good for copyright information or fine print.
Break
<br>
<hr>br add spacer in between content, while hr is also a break but add a line in between the break.
Pre
<pre> Already formatted text </pre>Pre stands for already formatted text, everything in the pre will have the spacing exactly as is; whereas in normal paragraph it will render as long line of text.
Sub/Superscript
<sub></sub>
<sup></sup>Subscripts and superscripts, eg. math and chemistry formulas and foornotes.
None Breaking Space
This is some text.Add between some texts and these will not break even where other characters will be on a new line.
Button
<button>Button Text</button>
Navbar
<nav>
<ul>
<li><a href="/home">Home</a></li>
</ul>
</nav>Element that is used for website navigation. Consists of an unordered list of links.
Div
<div></div>Generic block level element, captures everything inside the div in its block.
Div can be centered
div {width: 100px; margin:auto;}span
<span>Generic inline element.
Both div and span can be targeted via CSS.