what is html

HTML in a nutshell – What is HTML?

HTML is:

HTML stands for “Hyper Text Mark-Up Language”.
What is mark-up language? The red-pen on your english essay is “mark-up”(sp?).

With html, we use tags to denote start and end points (ie: the beginning and end of sentence fragment). The start-point (opening-tag), and end-point (closing-tag) together form an html-element.

<p> is used to begin a paragraph and </p> is used to end that paragraph. When element-A is contained within element-B we say: element-A is “nested” inside of element-B.

<element>This text is 'Nested' within an Element</element>

*Not all elements have opening and closing-tags. Elements such as <hr> and <img> (horizontal-rule and image respectively) do not have closing-tags and are called ‘Empty Elements’

There are many different kinds of html-elements.
<!-- You can add Helpful comments to your html likeso -->


Here we have some basic HTML:

<h2>A Heading Element</h2>
<hr>
<p>A Paragraph element often contains more than one sentence of text. A paragraph is a block-level element... The differences between block-level and inline-level elements <a href="#">Such as Links, or 'Anchor-Elements'</a> are important for web-designers to understand.
</p>

Now… here is the same HTML, After being processed by your internet browser:

A Heading Element


A Paragraph element often contains more than one sentence of text. A paragraph is a block-level element… The differences between block-level and inline-level elements Such as Links, or ‘Anchor-Elements’ are important for web-designers to understand.


In Brief:

Block Level Elements

And… Inline Level Elements

Going Further:

Block Level Elements, Block Level Elements, Block Level Elements, Block Level Elements, Block Level Elements, Block Level Elements…

vs Inline Level Elements, Inline Level Elements, Inline Level Elements, Inline Level Elements, Inline Level Elements, Inline Level Elements

In a simpler way


Block Elements vs Inline Elements

Understanding the difference between block-level elements and inline-level elements is crucial for web-designers. Block & inline elements interact with sibling elements very differently because each has different inherent rules or characteristics.

Block Elements Inherently:

  • Have a width equal to 100% the width of their parent-element
  • Cause a line-break before & after itself
  • Can be assigned a fixed width / height

Inline Elements Inherently:

  • Have a width equal to the context they contain
  • Do not cause a line-break before or after itself
  • Cannot be assigned a fixed-height. (padding top/bottom can work around this)

An element can also be an inline-block (img-elements are native inline-block elements)

Elements can have more than inline & block rules inherent to them. p-elements (paragraphs) and h1, h2, h3 etc… have a margin and/or padding above and below them. Why and OR? Because different browsers handle inherent element styling differently.

Google-Chrome may give the paragraph-element a margin-bottom of 10px, while Mozilla Firefox opts for padding-bottom of 10px. ul & ol-elements (un-ordered & ordered lists, respectively) often have padding to their left.

One may want to bypass these inherent rules by setting the rule to 0, ie: margin-left:0; … Zero on its own is great because zero is zero. That means zero-pixels, zero-%, zero-ems, etc…