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.
Block Level Elements
And… 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…