-
code-review-000 | HTML5 Basics | Lessons
8-
Lecture1.1
-
Lecture1.2
-
Lecture1.3
-
Lecture1.4
-
Lecture1.5
-
Lecture1.6
-
Lecture1.7
-
Lecture1.8
-
HTML5 Basics – Display Types (Part5)
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
Things You Should Know
- There are two important categories of elements in HTML, which you should know about — block-level elements and inline elements.
- Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigationSite architecture, menus and other navigation tools in the web design must be created with consideration of how users browse and search. The goal is to help the user to move around the site with ease, efficiently finding the information they require. menus, footers, etc. A block-level element wouldn’t be nested inside an inline element, but it might be nested inside another block-level element.
- Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an <a> element (hyperlink) or emphasis elements such as <em> or <strong>.
- You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it’s even easier. inline-block elements are like inline elements but they can have a width and height. Let’s look at examples of both approaches.
- Empty Elements
- Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the <img> element embeds an image file onto a page in the position it is included in:
- <img src=”https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png”>
- Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the <img> element embeds an image file onto a page in the position it is included in: