HTML Introdction

Attributes in HTML

Audio_Video in HTML

Basic HTML

Block _ Inline Elements HTML

Block Elements

Inline Elements

Charsets HTML

Classes HTML

Colors HTML

Comments HTML

Computer code HTML

CSS HTML

HTML Div

HTML Elements

HTML Formatting

HTML Forms _ Input

HTML Frames

Images HTML

Links HTML

Lists HTML

Semantic Elements HTML

HTML Tables

Styles _ Semantics HTML

Meta Info HTML

HTML Others

Programming HTML

Input Attributes HTML

Vertical Aligned Property

Christ Is Alive Ministry Learning Code for God

Far from being done please come back to visit

&nbsp
  • HTML Character Entity
  • Stands for non-breaking space, meaning that strings separated by this entity will not be separated and put into separate lines.
  • It is actually one of the most frequently used HTML entities.
  • Another, less common use for   is for creating multiple spaces.
<!---..-->
  • Defines a comment
!DOCTYPE
  • Defines the document type
  • All HTML documents must start with the document type declaration
  • The declaration helps the browsers to display web pages correctly and represents the document type
  • Only appearing once at the top of the page.
  • The declaration is not case sensitive
  • The declaration for HTML 1 to HTML 5 is
<a>
<acronym>
  • Defines an acronym but isn't supported in HTML5 Use <abbr> instead
<abbr>
  • Defines an abbreviation or an acronym

An HTML element is defined by a start tag, some content, and an end tag

<tagname> Content goes here ....</tagname>

Example: <p> My first paragraph </p>

<address >
  • Defines contact information for the author/owner of a document
<applet >
  • Defines an embedded applet but not supported in HTML5 Have to use <object> or <embed>
  • Use <embed> or <object>
<alt>
  • The alt attribute should reflect the image content, so users who can not see the image can get an understanding of what the image contains.
<area>
  • Defines an area inside an image map
<article>
  • The <article> tag specifies independent, self-contained content.
  • An article should make sense on its own
  • It should be possible to distribute it independently from the rest of the site.
  • An article should make sense on its own and Potential sources for the <article> element:
      • Forum post
      Blog post
      News story
<aside>
  • Independent content is specified by the article tag.
    •
  • Tag used to add a piece of content that is related to the main content. It could be a box to add a quote, or a sidebar.
 

DON'T FORGET THE END TAG: Some HTML elements will display correctly some will not.

<audio>
  • Defines embedded sound content
  • The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
  • The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
  • The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.
  • The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
  • There are three supported audio formats in HTML: MP3, WAV, and OGG.
<b>
  • Defines bold text will look the same on the page but not important like <strong>
<base >
  • The base tag, represented by <base> specifies the base URL for all relative links within the HTML code of a specific page or document.
  • The base tab must be within the <head> of the code and can only be one single <base> element in a document.
  • The tag must have either an href or a target attribute present, or both.
<basefont >
  • Did specified a default color, size, and font for all text in a document.
  • No longer supported in HTML5 use CSS
<baseline>
  • A image is aligned with the baseline of the parent (default)
<bdi>
  • Isolates a part of text that might be formatted in a different direction from other text outside it.

HTTML tags are not case sensitive: <P> (uppercase) means the same as <p> (lowercase)

<bdo>
  • Overrides the current text direction
<big>
  • Defines Big text But no longer supported Must use CSS
<blockquote>
  • Defines a section of Document that is quoted from other sources.
<body>
  • Defines the document's body
<bottom>
  • A image is aligned with the lowest element on the line
<br>
  • Defines a single line break
<button>
  • Defines a clickable button
<canvas>
  • Use JavaScript to draw graphics on the fly, via scripting
<caption>
  • Defines a table caption
  • Defines centered text,
  • No longer supported in HTML5
  • Use CSS
<cite>
  • Defines the title of a work
<code>
  • Defines a piece of computer code
<col>
  • Specifies column properties for each column within a <colgroup> element.
<!--- -->
  • Defines a comment that will not show on the web page,stays in the code section
<datalist>
  • Specifies a list of pre-defined options for input controls
<dd>
  • Defines a description/value of a term in a description list
<del>
  • Defines text that has been deleted from a document
<details>
  • Defines additional details that the user can view or hide
<dfn>
  • Specifies a term that is going to be defined within the content
<dialog>
  • Defines a dialog box or window
<dir>
  • Defines a directory list,
  • Use <ul> Not supported in HTML5
<disabled>
  • The input <disabled> attribute specifies that an input field should be disabled
  • The value of a disabled input field will not be sent when submitting the form
  • A disabled input field is unusable and un-clickable
<div>
  • Defines a section in a document.
<dl>
  • Stands for Description list.
  • Is a block-level element that the browsers automatically add a margin before and after the element and always starts on a new line.
  • Block-level element always stretches out to the left and right as far as it can taking up the full width available.
  • One of the three elements that is used to create a description list.
<dt>
<em>
  • This unit is relative to the font size of its parent element.
  • It will be twice the size of its parent element's font size if you set it to 2em
<embed>
  • Defines a container for an external application
<fieldset>
  • Groups related to elements in a form
<figcaption>
  • Defines a caption for a <figure> element
<figure>
  • Specifies self-contained content
  • Defines font, color, and size for text.
  • Use CSS Not supported in HTML5
<footer>
  • Defines a footer for a document or section
<form>
  • Defines an HTML form for user input
  • Defines a window (frame) in a frame set,
  • Not supported in HTML5
<frameset>
  • Defines an alternate content for users that do not support frames.
  • Not s upported in HTML5
<head>
  • Defines a header for a document or section
  • Contains meta date/information for the document
<h1>_<h6>
  • Defines HTML headings with the tags
  • <h1> defines the most important heading also the largest in text size with <h6> defing the least important heading and the smallest in text size.
<height_width>
  • Without the height and width for an <input type="image"> different browsers cannot reserve the appropriate space for the image to load into.
hgroup
  • Defines a header and related content
<href>
  • All Html elements can have attributes
  • Attributes usually come in name/value pairs like: name="value"
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • The href attributes the URL of the page the link is going to.
  • The<area> tag defines an area inside an image map (an image map is an image with clickable area).
  • <area> elements are always nested inside a <map> tag.
  • The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
<html>
  • Defines the root of an HTML document
<hr>
  • Defines a thematic change in the content
<i>
  • Defines a part of text in an alternate voice or mood.
<id>
  • Unique identifice dishinguishs the <a> from every other tag on that page
<iframe>
  • Defines an inline frame
<images>
  • HTML images are defined with the <img> tag
  • The source file <src> alternative text <alt>are provided as attributes
  • img src="../repel.jpg" width="100" height="100"
<input>
  • Defines an input control
ins
  • Defines a text that has been inserted into a document.
<kbd>
  • The <kbd> element defines keyboard input
<label>
  • Defines a label for an <input> elements
<lang>
  • All HtML elements can have attributes
  • Attributes usually come in name/value pairs like: name="value"
legend
  • Defines a caption for a <fieldset> element
<length>
  • Image that raises or lower an element by the specified length
  • Negative values are allowed.
<li>
  • Defines a list item
<link>
  • HTML links are defined with the <a> tag
  • The link's destination is specified in the <href>
  • Defines the relationship between a document and an external resuouce (most used to link to style sheets)
<list>
  • The list attribute refers to a datalist element that contains pre-defined options for an input element.
<main>
  • <main> tag a structural element that is representing the main content of a document.
  • Encapsulatine the primary content it is like the central hub of the web page
      • By wrapping your main content within this tag you are signaling to the developers and browsers taht is the core information that is being sought by the users.
  • Specifies the main content of a document, unique to the document
  • Shouldn't contain any content that is repeated across documents such as navigation links, copyright information, sidebars, site logos, and search forms
  • Have only one main element in a document and must not be a descendant of an <nav>, <header>, <article> and or a < hander>
<map>
  • Defines an area inside an image map
  • An image map is an image with clickable areas
  • <area> elements are always nested inside a <map> tag.
  • The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
<mark>
  • Defines highlighted text
<maxlength>
  • The input maxlength attribute specifies the mazimum number of charachters allowed in an input field
<menu>
  • Defines an alternative unordered list
meta
  • Defines metadata about an HTML document
<meter>
  • Defines within a known range a scalar measurement (a.gauge)
<middle>
  • A image that is place in the middle of the parent element
<min and max>
  • Used together the max and min attributes creates a range of legal values.
<multiple>
  • The multiple attribute specifies that the user is allowed to enter more than one value n an input field
  • The multiple attribute works with the following input types
      • email
      file
<noframes>
  • Defines an alternate content for users that do not support frames
  • Not supported in HTML5
<name>
  • Defines a table
<nav>
  • Defines navigation links
<Nested Elements>
  • HTML elements can be nested or that elements can contain other elements
<noscript>
  • Defines an alternate content for users that do not support client-side scripts
<object>
  • Defines a container for an external application
<ol>
  • Defines an ordered list
<optgroup>
  • Defines a group of related options in a drop-down list
<option>
  • Defines an option in a drop-down list
<output>
  • Defines a container for an external application
<p>
  • Defines a paragraph
<param>
  • Defines a parameter for an object
<paragraph>
  • The <p> is used to define HTML Paragraphs
<pattern>
  • The pattern attribute works witht he following input types:
      • text
      date
      search
      url
      tel
      email
      password
  • The input pattern attribute specifies a regular expression that the input field's value is checked against when the form is sumitted.
<picture>
  • Defines a container for multiple image resources
<percent>
  • a image that raises or lower an element by the specified percent of the line-height property.
  • Negative values are allowed.
<placeholder>
  • The placeholder attribute works with the following input types:
      • text
      search
      url
      number
      tel
      email
      password
<pre>
  • preformatted text
<progress>
  • Represents the progress of a task
<px>
  • This is a fixed unit.
  • What ever element's width is to (100px) it will always be (100px) wide regardless of the user's settings or screen size.
  • It is precise but not scalable
<q>
  • Defines a short quotation
<read-only>
  • The value of a read-only input field will be sent when submiting the form
<rem>
  • It is relative to the root HTML font size and similar to <em>
  • It doesn't depend on the parent element's size so it provides a more consistent sizing.
  • If the root size is 16px and the element's size is set to 2rem, it will be 32px
<required>
  • The input required attribute specifies that an input field must be filled out before submitting the form
  • The required attribute works with the following input tpes:
      • file
      radio
      checkbox
      number
      date-pickers
      password
      email
      tel
      url
      search
      text
<rp>
  • Defines what to show in browsers that do not support ruby annotations.
<rt>
  • Defines an pronunciation/explanation of a characters (for East Asian Typography)
<ruby>
  • Defines a ruby annotation ( for Asian Typography)
<s>
  • Defines text that is no longer correct
<samp>
  • Defines sample out put from a computer program
<section>
  • Defines a section in a document
<select>
  • Defines a drop-down list
<single>
  • When the attribute value itself contains double quotes, it is necessary to use single quotes
  • American English states that use of double quotation marks ("")for direct quotes and titles, while single quotation marks ('')are used for quotes within a quote.
<size>
  • Set a width for an input field
<small>
<source>
  • View HTML Source code by right clicking on a web page .
  • Click CTRL + U in an HTML page,
  • Right click on the page and select "View Page Source"
  • Right click on an element or a blank area and choose "inspect" to see what elements are made up of.
  • Your may copy and paste, however you can not change anything or delete it.
  • Defines multiple media resources for media elements (<picture> <video> <audio>)
<span>
  • The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
  • The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
  • The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
<src >
  • All HTML elements can have attributes
  • Attributes usually come in name/value pairs like: name="value"
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag.
  • The src attribute specifies the path to the image to be displayed
<step>
  • The input stsep attribute specidies the legal number intervals for an input field
      • step="3" legal numbers could be -3,0,3,6
  • The step attrubute works with the following input types:
      • time and week
      month
      datetime-local
      date
      range
      number
  • The max and min attributes can work together to create a range of legal values
<style>
  • All HTML elements can have attributes
  • Attributes usually come in name/value pairs: name="value"
  • Attributes provide additional information about elements.
  • Attributes are always specified in the start tag
  • The style attribute is used to add styles to an element such as color.
  • Defines strike through text
  • Not supported in HTML5 Use <del> or <s> instead
<strong>
  • Defines important text
<sub>
  • A image that is aligned with the subscript baseline of the parent
<summary>
  • De finds a visible heading for a <details> element
<sup>
  • A image with a superscript base line of the parent
<svg>
  • Defines a container for SVG graphics
<table>
  • Defines a table
<target>
  • Defines where the new page will be loaded into when the link is clicked on.
<tbody>
  • Used to group the body content in an HTML table.
  • The <tbody> element is used in conjunction with the <thead> and <tfoot> elements
    •
<td>
  • Defines a cell in a table
<template>
  • Defines a container for content that should be hidden when the page loads
<textarea>
  • Defines a multiline input control (text area)
<text-top>
  • A image that is aligned with the top of the parent element's font.
<text-bottom>
  • A image that is aligned with the bottom of the parent element's font
<tfoot>
  • Used to group footer content in an HTML table
  • the element must have one or more <tr> tags inside.
  • It is used in conjunction with the <tbody> and <thead> elements to specify each part of a table (footer, body, header)
  • As a child of a table </thead></olgroup></caption>element the tfoot tag must follow after any <caption> , <colgroup> , <thead> , and <tbody> elements.
    The <tfoot> tag must be used in the following context:
  • As a child of a <table> element, after any <caption>, <colroup>, <thead> and <tbody> elements
  • By default the <thead>, <tbody>, <tfoot>, elements will not affect the layout of the table.
<th>
  • Defines a header cell in a table
<thead>
  • Used in conjunction with the <tbody>and<tfoot>elements to specify each part of a table (header, body, footer).
  • By default the <thead>, <tbody>, <tfoot> elements will not affect the layout of the table.
<time>
  • Defines a specific time (or datetime)
<title>
  • The <title> tag defines the title of the document.
  • The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
  • The character encoding declaration should always be the first element of the head section.
  • The <title> element is required and it doesn't matter where it is put in the <head> section as long as it is beneath the character encoding declaration (i.e. <meta charset='utf-8'> ).
  • The contents of a page title is very important for search engine optimization (SEO)!
  • The page title is used by search engine algorithms to decide the order when listing pages in search results.
  • The <title>element:
      • defines a title in the browser toolbar
      provides a title for the page when it is added to favorites
      displays a title for the page in search-engine results
<top>
  • A image that is aligned with the top of the tallest element on the line
<tr>
  • Defines a row in a table
<track>
  • The <track> tag specifies text tracks for <audio> or <video> elements.
  • The element is used to specify subtitles caption files or other ..
  • Defines teletype text
  • Not supported in HTML5, use CSS instead
<u>
  • Defines an unordered list
<ul >
  • Defines an unordered (bulleted) list Tag with the <li> tag you create an unordered list. Added with the <ol> tag to concrete a ordered list
<value>
  • The input value attribute specifies an initial value for an input field
<var>
  • The <var> element defines a variable in programming or in a mathematical expression
<video>
  • Defines a video or movie
<width>
  • Attributes usually come in name/value pairs: name="value"
  • Attributes provide additional information about elements.
  • Attributes are always specified in the start tag
  • The <img> tag will also contain the height and width attributes which specify the height and width of the image in pixels.
  • Always specify the "border-style" property to set the borders first or the border width property will not work
  • The border-width property can have from one to four values (one for the top border, right border, bottom border, and the left border)
  • If you are placing different px for each border do not use : between them.
<wbr>
  • Defines a possible line-break