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.
*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.
Here we have some basic HTML:
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.
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…