HTML elements

Heading

Heading represent h1 to h6

Paragraph

<p> element defines Paragraph . here important line break (<br>) and pre formated text (<pre>)

with <pre> element . this element helps return same output . with it return out one line .

span

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate.

Hooks attributes

id

ID's are unique

Each element can have only one ID
Each page can have only one element with that ID

class

Classes are NOT unique

You can use the same class on multiple elements.
You can use multiple classes on the same element.

Inline text semantics

anchor `<a>`

The HTML <a>element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL. . attributes >>
href,target,rel

`<br>`

<br> element represnt line break.

`<em>`

Emphasis <em> element is define italic text .

`<i>`

<i> element represent italic .

`<strong>`

`<small>`

The HTML <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser’s minimum font size.

`<code>`

<code> represents programming language.

`<abbr>`

Defines an abbreviation, and usually includes its full description.

list

HTML has two list type ordered list (<ol>) and unordered list (ul)

`<ol>`

ordered list :

optional attribute : <ol type="1/a/A/i/I" , start="3",reversed>

`<ul>`

`<dl>`

definition list . elements: <dl>,<dt>,<dd>

<dl> = Definition list
<dt> = Definition term
<dd> = Describes

table

elements for table : <table>,<thead>,<tfoot>,<tr>,<th>,<tbody>,<td>

<thead> = table head
<tfoot> = table foot
<tr> = table row
<th> = table header cell
<tbody> = table body
<td> = table cell
~ element also part of table.

Forms

Element	Description
`<button>`	The HTML `<button>` element represents a clickable button.
`<datalist>`	The HTML `<datalist>` element contains a set of
`<fieldset>`	The HTML `<fieldset>` element is used to group several controls as well as labels () within a web form.
`<form>`	The HTML `<form>`element represents a document section that contains interactive controls to submit information to a web server.
`<input>`	The HTML `<input>` element is used to create interactive controls for web-based forms in order to accept data from the user.
`<label>`	The HTML `<label>` element represents a caption for an item in a user interface.
`<legend>`	The HTML `<legend>` element represents a caption for the content of its parent `<fieldset>`.
`<meter>`	The HTML `<meter>` element represents either a scalar value within a known range or a fractional value.
`<optgroup>`	The HTML `<optgroup>` element creates a grouping of options within a `<select>` element.
`<option>`	The HTML `<option>` element is used to define an item contained in a `<select>`, an `<optgroup>`\, or a`<datalist>` element. As such, `<option>`can represent menu items in popups and other lists of items in an HTML document.
`<output>`	The HTML `<output>` element represents the result of a calculation or user action.
`<progress>`	The HTML `<progress>` element represents the completion progress of a task, typically displayed as a progress bar.
`<select>`	The HTML `<select>` element represents a control that provides a menu of options:
`<textarea>`	The HTML `<textarea>` element represents a multi-line plain-text editing control.

button

The HTML <button> element represents a clickable button. Attributes >> name,value,type,disabled,autofocus

<button type="submit" name="button" autofocus value="primary">submit_button</button>

input

input Defines an interactive control within a web form. Attributes

type = text , email ,number , checkbox, radio , submit
name = "first_name" .The name value must be unique within the context of a
container.
It can only contain alphanumeric characters a-z A-Z 0-9 and some special characters like - _… but no space.
required = must be full up input
disabled = input not active
placeholder = "e.g. [email protected]"

fieldset

Defines a group of controls within a form. <fieldset>.....</fieldset>

legend

Defines a caption for a parent’s content.

lavel

The HTML <label> element represents a caption for an item in a user interface.

textarea

The HTML <textarea> element represents a multi-line plain-text editing control.Attributes >>
name,autocomplete,minlenght,maxlength,placeholder,required,autofocus,disabled

form

<form> element represents the form . Attributes >> action , method

image & Multimedia

Image

The HTML <img> element represents an image in the document. atrribute >> src="images/logo.png",alt="logo",style="width:304px;height:228px;"

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

optional atrribute >> srcset,sizes

video

<video> element define video . video attributes >> src, autoplay,buffered, controls,crossorigin,loop,muted,played,preload,poster,height,width

audio

<audio> element define audio . atrributes >> src, volume,autoplay,controls,loop,muted,preload

canvas

Use the HTML <canvas> element with the canvas scripting API to draw graphics and animations . attributes >> width,height,moz-opaque

embed

Defines a container for external application. Attributes >>src, type,height,width

iframe

Defines a container for a nested browsing context: you can include a web page within another web page. attributes >> src,allowfullscreen,width,height

Semantic

`div`

The HTML

element is the generic container for flow content and does not inherently represent anything. Use it to group elements for purposes such as styling (using the class or id attributes), marking a section of a document in a different language (using the lang attribute), and so on. efines a generic block of content, that does not carry any semantic value. Used for layout elements like containers.

<div>.....</div>

`article`

Defines a self-contained block of content that can exist in any context.
It can have its own header, footer, sections… Useful for a list of blog posts.

figure

Defines a single self-contained element, usually an image.

figcaption

`<header>`

Defines the header of a web page or section.

`<nav>`

Defines a section with navigation links.

`<main>`

Defines the main content of a web page. Can be displayed with a sidebar. see aside code

`aside`

Defines a block of content that is related to the main content. Displayed as a sidebar usually.

`footer`

Defines the footer of a web page or section.

`section`

Defines a section within a web page.

`time`

Defines a time on a 24h clock. atrribute >> datetime

`<mark>`

Higlight some text .

HTML Master