DEV Community: Setor Kwame

The Definitive Guide to HTML Block Level and Inline Level Elements

Setor Kwame — Wed, 17 Aug 2022 16:27:00 +0000

In your journey as a web developer, one thing you will need understanding of to make web development smooth is the concept of block level and inline level elements in your HTML. An understanding of these elements and the properties will aid you in styling your HTML with little to no hassle.

What are the Differences between Block Level and Inline Level HTML Elements?#

HTML element types can be divided into two categories - block level elements and inline level elements.

Block level elements start on a new line and take up the entire width of a page and by default the browser automatically adds some space (a margin) before and after the element.
Some block level elements include:

<div></div>
<hr>
<li></li>
<ul></ul>

Block level elements by default are set to a display of block and to be able to 'hack' into their default setting and manipulate their behavior, one will have to reassign the value of the display property to an inline, or flex or whatever value they will prefer.

Inline level elements do not start on a new line but instead flow with text around them and only takes up as much width as necessary. Here are some in-line level elements:

<a></a>
<button></button>
<img>

To be able to change the default behavior of an in-line level element, one will have to change the value of its, display property to a block or any desired value.

That's all there is to it. Nothing complex here. So the next time you are trying to position or align an element that isn't responding, check what type of element it is and let this short article be your guide.

Web Standards: A Declaration (Doctypes and Charsets)

Setor Kwame — Sat, 06 Aug 2022 09:53:00 +0000

Doctype and charset are two meta tags that declare to the browser the type of document the browser is to expert. Doctype declares to the browser about the author's view about a document such as whether a document is XHTML or HTML and it also dictates the code that a browser should proceed with. The charset is used by the browser so that it knows which character encoding should be read by it.

The doctype declaration is the first line of a document and contains information about the type of document being used. It is also known as the Document Type Declaration or DTD.

The most common doctypes are HTML5 and XHTML 1.1. The HTML5 doctype has been around since 2004, but it was not supported by all browsers until sometime around 2010/2011. The XHTML 1.1 doctype is also widely used today.

There are many other types of doctypes that can be used for different purposes, such as for XML documents or even for CSS stylesheets.

The main reason why you should use a doctype declaration is to inform the browser what type of document it should expect to receive from you (in case there's no content-type header sent). Without a doctype declaration, browsers would simply assume that they were receiving plain text and would render your page differently (and probably incorrectly) than expected.

In addition to informing the browser about what kind of document it should expect, a doctype declaration usually also provides some additional information about how it should interpret your markup (things like which elements can be used and what attributes they may have).

Without a doctype declaration, the browser will assume that you don't care about how it renders your page (and therefore don't care about the markup being valid or not).

The doctype declaration for HTML5 is pretty simple:

<!DOCTYPE html>

This basically informs the browser that it should interpret any markup it finds as HTML5. This makes sense since it's likely that you're using HTML5 to build your page in the first place.

In the end, which doctype you chose will depend on which one best fits your website and your audience. Is it a blog, a portfolio site, or a news site? This will help determine which doctype you choose. But in the end, there is no wrong answer—each doctype has its own positives and negatives. It's easy to get caught up in doctype wars with developers—but really, neither side is right or wrong. Ultimately, it comes down to what works for you.

HTML5 is the Future of Web Design! But What is it? A blog about HTML5 and how it's changing the web.

Setor Kwame — Sun, 20 Mar 2022 16:02:00 +0000

If you have heard of HTML before, but don't really know what it is just yet. HTML is a markup language you can use to build websites and applications. You are probably thinking, “why do I need more than one language to build a website?” The answer is simple: HTML and CSS work together to provide the structure of your website while providing the styles and other visual hooks that can be accomplished with CSS.

The web has changed a lot over the past two decades. We've gone from just hyperlinks and paragraphs to fully multimedia experiences that can only be created with HTML, CSS, and PHP (or JavaScript). So, as part of the HTML5 standard, we have a whole new way to build these beautiful experiences.

HTML5 is an upcoming major version of the HTML standard. It introduces several new elements and extends many of the existing elements.

HTML5 is a major revision of the HTML standard. It includes new structures and tags, such as

<section>, <time>, and <article>

It also provides support for multimedia and more semantic markup. The main goal of HTML5 is to create a standard that can be used across all devices, including mobile phones and tablets.

The new elements in HTML5 can be used to make your website more semantic, or “meaningful” for the browser to be able to read the website. This means that instead of using tags like

to organize your content, you should use the new semantic tags that HTML5 has introduced. Here is a list of some of the new elements;

<header>, <section>, <article>, <time>, <nav>, <footer>, <aside, <figcaption>

etc.

HTML5 also helps with accessibility with the introduction of attributes such as alt. For example, people who use screen readers can more easily navigate your site because they are able to find what they need by reading the tags instead of just relying on images and CSS styling. Lastly, search engines such as Google will be able to better understand what is going on in each section of your page and determine how relevant it is to their users.

One important thing to note is that while HTML5 has introduced many new tags, it hasn’t removed any of the old ones. So you can still use the

<div>

and other legacy tags if you want to.

You can read more about how to use HTML5 elements here: https://developers.google.com/webmasters/guides/best-practices#semantic_markup.

Although it's quite complex, understanding HTML5 is well worth the effort considering the newest and coolest features that it brings. For example, you can now create interactive elements that respond to user input. This means that you can make buttons that change color or move around the page when a user clicks them.