html • CodeHype

HTML Basics

<!DOCTYPE> – Define HTML Version
<html> – Root of an HTML Document
<body> – Content Of HTML Document
<style> – Internal CSS Styling
<script> – Scripting
<noscript> – Disable Script

Document Structure

<p> – Paragrap | Block
<h[1-6]> – Headings | Block
<div> – Block Section In Document
<span> – Inline Section In Document
<br /> – Inserts Single Line Break
<hr /> – Inserts Horizontal Line
<!– –> – Comment

Meta Information

<head> – Info About Document
<title> – Defines Document Title
<meta> – Contains Metadata
<base> – To Specify Default URL

HTML Semantic Elements

<header> – header for docm/section
<nav> – Set of navigation links
<main> – Main content of documnt
<footer> – Footer for docm/section
<section> – Section of a document
<article> – Self-contained content
<aside> – Aside from content | Sidebar
<details> – Details | User can view/hide
<summary> – Heading for a <details>
<figure> – Self-contained Content
<figcaption> – Caption for <figure>
<mark> – Marked/highlighted text
<time> – Defines a date/time

HTML Media

<img> – Used to embed images
<audio> – Used to embed audios
<video> – Used to embed videos
<picture> – Multiple sources for image
<iframe> – Embed extrnl WebPage/Doc
<embed> – Container | Extrnl Resources
<canvas> – Draw graphics & animation
<svg> – Container | SVG graphics
<map> – Clickable areas on image
<area> – In conjunction with <map>

HTML Forms

<form> – Defines HTML Form
<fieldset> – Collection Of Fields
<legend> – ↑ Caption For Content
<label> – Label for <input>
<input /> – Defines Input Controls
<select> – Drop-down Box
<optgroup> – Group Of Options
<option> – Drop-down Options
<textarea> – Large Text Input
<button> – Clickable Button

HTML Images

<img /> – Embeds Image | “src”
<map> – Clickable areas on image
<area /> – In conjunction with <map>

HTML Lists

<ul> – Unordered List
<ol> – Ordered List
<li> – List Item
<dl> – Definition List
<dt> – Definition Term
<dd> – Description Details

HTML Tables

<table> – Defines Table
<caption> – Table Caption
<th> – Header Cell In Table
<tr> – Defines Table Row
<td> – Define Table Data
<thead> – Header of Column
<tbody> – Set Of Table Row | Body
<tfoot> – Summarizing Columns

HTML Input Types

<input type=”text”>
– Single line text input
<input type=”number”>
– Numeric input field
<input type=”email”>
– Input field for e-mail address
<input type=”password”>
– Password Field
<input type=”reset”>
– Reset all values to default values
<input type=”submit”>
– Form data to a form-handler
<input type=”button”>
– Defines a button
<input type=”search”>
– Used for search fields

HTML Links

<a> – Anchor Element | “href”
<link /> – Relative | External Source
<a href=”mailto:”> – Email Link
<a href=”#name”> – Link To Anchor

HTML Text Formatting

<strong> – Strong Emphasis | Bold
<em> – Emphasis | Italic
<blockquote> – Long Quotation
<q> – Short Quotation
<cite> – Title of a creative work
<abbr> – Abbrieviation | “title”
<def> – Definition
<address> – Address | Contact Info
<pre> – Pre-Formatted Text
<code> – Display Computer Code
<bdo> – Text Direction | dir=”rtl/ltr”
<ins> – Text Inserted | Underline

Most Useful Attributes

class – Specifies a class for Element
id – Speci Unique id for Element
src – Specifies the location (URL)
href – Specifies the URL
target – Speci Where to Open <a>
download – Target will be downloaded
title – Title for an HTML element
alt – Alternative text for <img>
type – Specify the type of content
rel – Relatinshp betwn Document

HTML Media Attributes

autoplay – Auto Playing audio/video
controls – Display Media Controls
loop – Start overAgain audio/video
muted – Muted output | audio/video
poster – Cover image (Video) | “URL”