Block and inline elements in HTML

GitHub Daniel Munoz

HTML Block elements are elements that when displayed start on a line of their own, in effect making a block on the page. Inline elements do not appear on their own line, but share a line with other inline elements.

Goal

Follow along to learn about:

Tags vs Elements

Sometimes people use the words HTML tags and HTML elements interchangeably. HTML tags are just the opening or closing mark up. For example <p> and </p> are called HTML tags. HTML elements contain opening and closing tags, and content if there is any. For self-closing tags they are considered both.

Block elements

Block elements HTML elements that when displayed start on a line of their own, in effect making a block on the page.

block.html

<p>
  Sometimes a paragraph can be one sentence.
</p>

ouput of block.html

Sometimes a paragraph can be one sentence.

The <p> tag indicates a paragraph of text. By default, browsers automatically add some space (margin) before and after each <p> element.

HTML ignores empty spaces and blank lines, which is called whitespace. That’s why the extra line we might add between our p tag doesn’t do anything when it is displayed. We could take it out, or make it two spaces, and it would look exactly the same in the browser.

Inline elements

Inline elements do not appear on their own line, but share a line with other inline elements.

inline.html

<p>
  Inline Elements <strong>can</strong> be nested inside a block or inline element.
</p>

ouput of inline.html

Inline Elements can be nested inside a block or inline element.

The <strong> tag indicates that something is important. By default, it will make the text inside it bold. Something to note is that you can not set a width or height to an inline element. If you do, it won’t apply the applied style.

Conclusion

HTML Block elements are elements that when displayed start on a line of their own, in effect making a block on the page. Inline elements do not appear on their own line, but share a line with other inline elements.

html
Divs and spans in HTML

Classes are great for selectively applying styles to certain parts of your web pages. But sometimes you'll have entire sections of your pages that you want to style a certain way, and adding a style to every tag gets annoying. Divs and spans can help.
html
css
javascript
Re-writing A Git Commit

We always want to include clear and detailed messages with our commits. However, even the most careful developers can make mistakes. Git has several options to re-write git history, including a git commit.