HTML Learning - abdullahbintahir/Python-Snippet GitHub Wiki

Paragraph

<p> paragraph opening tag,  </p>  paragraph closing tag

Headers

<h1>  opening header </h1> closing header- Could be up to 6 levels

Italics

<i> visual only italics </i>, or <em> Emphasis italics </em>

Bold

<b> Bold </b>, or <strong> Importance, seriousness, urgency </strong>

Unordered/ unnumbered List

<ul>
 <li> List Item1 </li>
 <li> List Item2 </li>
</ul>

Ordered/ numbered List

<ol>
 <li> List Item1 </li>
 <li> List Item2 </li>
</ol>

Definition List

<dl>
 <dt> Definition Term or Header </dt>
 <dd> Definition Description, Explanation </dd>
</dl>

Cite i.e. Person's name

<cite> </cite>

BlockQuote i.e. a quote which looks like a paragraph and stands out in the articles

<blockquote> </blockquote>

In Line Quotes

<q> </q>

Date & Time

<time datetime="yyyy-mm-dd"> </time>
<time datetime="hh:mm:ss:ddd+-hh:mm"> </time>

Code i.e. making text look like a code

<code> </code>

Line breaks

<br> (no opening closing required)

Preserving the custom spacing in text

<pre> </pre>

Sub script i.e. the 2 in H2O (water)

<sub> </sub>

Superscript i.e. Exponents in Maths

<sup> </sup>

Small text i.e. Copyright at the bottom

<small> </small>

To put a horizontal (rule) line

<hr>

HTML tag's universal attributes

1. `accesskey`: Specifies a shortcut key to activate/focus an element.
2. `class`: Specifies one or more class names for an element.
3. `contenteditable`: Specifies whether the content of an element is editable or not.
4. `data-*`: Used to store custom data private to the page or application.
5. `dir`: Specifies the text direction for the content in an element.
6. `draggable`: Specifies whether an element is draggable or not.
7. `hidden`: Specifies that an element is not yet, or is no longer, relevant.
8. `id`: Specifies a unique id for an element.
9. `lang`: Specifies the language of the element's content.
10. `spellcheck`: Specifies whether the element is to have its spelling and grammar checked or not.
11. `style`: Specifies inline CSS style for an element.
12. `tabindex`: Specifies the tabbing order of an element.
13. `title`: Specifies extra information about an element, often shown as a tooltip text.
14. `translate`: Specifies whether the content of an element should be translated or not.

Commenting in HTML

<!-- Text Here -->

Entities/Special Characters in HTML

&nbsp;
&gt;
&lt;
&amp;
&copy;
&trade;
&star;

Hyperlinking in HTML- Use "anchor" element

<a href="www.google.com">Click This Link</a>

Image element

<img src="url" alt="description" width="width_value" height="height_value" title="tooltip_text">

Adding caption to a figure

<figure>
  <img src="image.jpg" alt="A descriptive alt text">
  <figcaption>This is the caption for the image.</figcaption>
</figure>

Image element with different sources based on screen size and caption

<figure>
  <picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-medium.jpg" media="(min-width: 500px)">
    <img src="image-small.jpg" alt="A descriptive alt text">
  </picture>
  <figcaption>This is the caption for the image.</figcaption>
</figure>

Table

‹table class="styled">
<tr> <th> Name </th> <th> Phone </th> </tr> 
<tr> <td> Bill LaVarre </td> <td> 555-2987 </td> </tr>
<tr> <td> Waymon LaVarre </td> <td> 555-4673 </td> </tr>
</table>
⚠️ **GitHub.com Fallback** ⚠️