One place for hosting & domains

      How To Use Inline and Block Elements in HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      When arranging elements in an HTML document, it’s important to understand how these elements take up space on a webpage. Certain elements can take up much more space on the webpage than the content they contain. Understanding the behavior of different element types will help you anticipate how they affect the position of other elements on the page.

      In general, there are two different types of elements—inline-level elements and block-level elements—whose spacing defaults behave differently from one another. Below, we’ll describe how the default settings of these elements determine their position on the webpage and relative to the position of nearby elements.

      Inline-level Elements

      Inline elements are elements whose horizontal width is determined by the width of the content they contain. The <strong> element and the <em> element we covered in the last tutorial are both examples of inline elements.

      We can use Firefox’s Web Developer Inspector to inspect the size of HTML elements on a webpage. (If you are using Chrome, you can use the Developer Inspect Elements tool instead but this tutorial will give instructions for Firefox’s Web Developer tool.)

      Return to the index.html file that you loaded in your browser. If you need to reload it and don’t remember how, refer to the instructions Loading an HTML File in your Browser from the last tutorial.

      Then navigate to the Tools menu item in the top menu bar and select “Web Developer/Inspector.” Selecting this menu item will open up the Inspector interface that allows you to inspect the HTML and CSS of a webpage. Next, hover your cursor over the text My strong text, which should highlight the text in light blue. This highlighting shows the full extent of the space occupied by the element that your cursor is hovering over. As you may have expected, the element’s occupied space is just large enough to contain its text content:

      This gif illustrates the process of using the Inspector tool as described in the paragraph above.

      Unlike block-level elements, which we’ll cover in the next section, inline elements do not take up their own line of horizontal space. Thus, inline elements will rest side by side on a webpage if you do not specify a break with an additional HTML element, such as the line break <br> element. This sizing default is often convenient, as you may want to mark up single words in a paragraph with an inline element such as <strong> or <em> without pushing subsequent text to the next line.

      Try adding the <br> tag in between your two lines of code in the index.html file. (You will need to return to your file in the text editor.) Note that the <br> element only requires an opening tag and does not wrap around any text:

      <strong>My strong text</strong>
      <br>
      <em>My emphasized text</em>
      

      Save and reload the document in your browser to check your results. You should receive something like this:

      My strong text
      My emphasized text

      Your two phrases should now be on separate lines as they are now separated by the line break element <br>.

      If you use the Firefox Web Developer Inspector to check the size of the elements, you can confirm that the width of each of the text elements is still determined by the width of the text content:

      Inspect Element again

      Block-level Elements

      Block-level elements behave differently than inline-level elements in that they take up an entire line of horizontal space on a webpage. This means that they automatically start on a new line and that they automatically push subsequent elements onto a new line as well.

      For example, the HTML heading elements (<h1> through <h6>) are block-level elements that automatically place their content onto a new line and push any content that follows onto a new line. Each of these six heading elements represent a different heading size.

      Let’s study how this works in practice. At the bottom of your index.html file, try pasting in the highlighted code snippet:

      <strong>My strong text</strong>
      <br>
      <em>My emphasized text</em>
      
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      

      Save your file and reload it in the browser. You should receive something like this:

      HTML Headings

      Let’s now inspect the block-level heading elements to study how they differ from the inline-level text elements above. Open up the Firefox Web Developer Inspector and hover over each of the elements to inspect their occupied space as indicated by the blue highlighting. You should be able to confirm that the occupied horizontal space of each of the inline-level elements is determined by its text content, while the occupied horizontal space of each of the block-level elements stretches across the entire web page:

      This gif illustrates the process of using the Inspector tool as described in the paragraph above.

      Block-level elements will always push inline-level elements down to the next line, even if you write those HTML elements on the same line of the HTML document. To confirm this for yourself, try writing a block-level element and an inline-level element on the same line of your index.html file. Erase the existing content from your file and add the following code snippet:

      <strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a>
      

      Can you guess how this HTML code will render in the browser? Save your file and reload it in the browser. You should receive something like this:

      Inline and block level elements

      Notice that the heading element <h1> has started on a new line and pushed the subsequent text element to a new line even though the elements were written on the same line in the HTML document.

      You should now have an understanding of how inline-level and block-level elements are positioned and how they affect the position of nearby elements. Remembering their distinct behaviors can be useful when arranging HTML elements in the future.

      We’ll continue learning about new inline and block elements in the tutorials ahead.



      Source link

      Use Cases for Block Storage


      Updated by Linode

      Contributed by

      Linode

      What is Block Storage

      Block Storage is a type of persistent cloud data storage that is similar to a traditional block device, like the hard drive in a PC. With Block Storage, your data is divided into blocks, which are the small, discrete units that Block Storage can read from and write to. These blocks are assigned unique identifiers, but these are generally not human-readable, so a filesystem is usually installed which maps your files to the underlying blocks they correspond to. This relationship is also analogous to your PC’s filesystem and hard drive.

      A Block Storage Volume houses these blocks of data. Volumes can be attached to a cloud computing instance, which makes its data and filesystem available to the instance. If your instance is running Linux, then mounting a Volume’s filesystem is just like mounting any other filesystem.

      Volumes are stored separately from your cloud instances, but inside the same data center, and they are attached via the data center’s private networking. A Volume can be detached from a cloud instance and its data will persist, even if the cloud instance is deleted. The Volume can also be re-attached to a different instance (though only one attachment at a time is possible). Volumes can also be increased in size at any time, independent of an instance’s built-in storage.

      Benefits and Limitations

      A Block Storage Volume augments the raw storage capacity of a cloud instance, which can be useful if your storage needs are greater than your computing demands. Because a Volume is scalable, it can adapt as your data grows in size. Additionally, all data stored with Linode Block Storage is replicated three times, so your Volumes are highly available and fault tolerant.

      Note

      While the health and uptime of Linode Block Storage is closely monitored by Linode Support, we still recommend making separate backups of your Volumes.

      Because Volumes are directly connected to an instance, their I/O speeds are much faster than those of an alternative storage solution like Object Storage. As well, the nature of Block Storage allows you to read and write small parts of your data, which means that you can incrementally update your files. This is in contrast to Object Storage, which requires a full re-upload of a file to update it.

      Some aspects of Block Storage lead to natural limitations. In particular, a Volume needs to be attached to a cloud instance for its data to be accessible. In comparison, a file stored in Object Storage can be downloaded by any internet connected client at any time.

      Below you will find some of the more popular use cases for Block Storage.

      Use Cases

      Databases

      Databases require quick read/write operations, and Block Storage Volumes are mounted directly to a cloud instance’s filesystem, so there is a minimal delay in writing and retrieving data. Growing businesses often have increasing data storage demands, so it’s also important for a database to be scalable. A Volume that stores your database can be resized to meet your storage needs.

      Persistent Storage

      Block Storage Volumes can be detached from a cloud instance just as easily as they are attached, meaning that it’s possible to create hot-swappable drives with Block Storage. This is useful if you need to perform the same kind of tasks across a fleet of instances with the same data.

      Caution

      While the Block Storage service has full support for hot swapping, it is important to follow the detachment instructions outlined in our Using Block Storage guide. If a Volume is not safely detached, there is a risk of data loss for the Volume.

      Container Storage

      Containers, like those created with Docker or inside Kubernetes Pods, can benefit from having some type of persistent storage. This helps to keep a container’s size down and makes it easy to maintain data outside of the normal lifecycle of the container or Pod.

      If you are using Docker, you can use the Docker Volume Driver for Linode to create a Docker volume from a Block Storage Volume. Similarly, if you are using Kubernetes you can use the Container Storage Interface (CSI) Driver for Linode Block Storage to create a Persistent Volume Claim that’s backed by a Block Storage Volume.

      Running Cloud Software

      In a climate where ownership over one’s data is an important need for many individuals and organizations, hosting your own cloud software is a great use case for Block Storage. Create and mount a Block Storage Volume, install an application like OwnCloud, and point its data folder to a location on your Volume. If you ever run out of space on your Volume you can always increase its size.

      Storage for Media Library Applications

      There are a few media library applications, most notably Plex, that offer media streaming functionality to internet enabled devices. The media libraries these applications serve can quickly grow in size, depending on the number of movie and audio files they contain. Using a Block Storage Volume can provide you with storage capable of growing with the needs of your library.

      Note

      Ephemeral Storage

      Various stages of the software development lifecycle can create large amounts of temporary data, such as buffers, builds, and cache and session data. While this data might only exist for a short period of time, it requires and utilizes storage space. Creating a Block Storage Volume just for ephemeral data is a good use case for times when the storage supplied with your instance is not enough, or for when you need extra space for a short period of time.

      Data Backups

      Having backups of your data is always a good idea, and Block Storage Volumes make for scalable and quickly accessible backup mediums. Store anything that you might need to quickly transfer to another instance, or anything that you might need at a moment’s notice.

      Boot Disks

      You can boot from disk images installed to a Block Storage Volume. This provides a cost effective means of maintaining an image that can be attached to a new Linode. For example, you could save money by creating and removing on-demand Linode instances that boot from a Volume. As well, you can boot from a Volume to access and recover an instance whose normal operating system may not be running as expected.

      Note

      Linode provides a built-in Rescue Mode feature, but maintaining your own rescue Volume can allow you to include the recovery tools you prefer to use.

      Next Steps

      For more information on how to use Block Storage, consult our How to Use Block Storage with Your Linode guide.

      Find answers, ask questions, and help others.

      This guide is published under a CC BY-ND 4.0 license.



      Source link

      How to Update Your Old WordPress Posts With the Block Editor


      Since the Block Editor is now the default tool for creating new WordPress content, site owners are having to address the question of what will happen to their older posts and pages. This content will inevitably need updating since the Classic Editor plugin won’t be around forever.

      Fortunately, there are methods in place for handling this exact situation. If you need to make changes to an old post, you can easily do so without any help from the Classic Editor. This makes it much easier to bring your old and new content into alignment.

      In this post, we’ll discuss the Block Editor (you might know it by its nickname: Gutenberg) and then we’ll show you two methods for updating your old posts using this new tool. Let’s get started!

      Understanding the Differences Between the Classic and Block Editors

      For many years, WordPress users created new content for their websites in a visual editor, now known as the Classic Editor. It consisted primarily of one large field where you could add text, images, and other media.

      The WordPress Classic Editor.

      The main downside to the Classic Editor was that some elements — such as tables and content columns — required coding or extra plugins to implement. This arguably made the publishing process more complicated and time-consuming than it needed to be.

      To address that issue, the Block Editor was created. It enables you to use a system of ‘blocks’ to create content in WordPress. Each block holds a specific type of content, such as a paragraph, an image, a table, a list, or just about any other element you might want to add to a post or page.

      The WordPress Block Editor.

      With blocks, WordPress users can create more complex content without the need for coding. Each block has individual settings so you can customize specific elements. Additionally, you can more easily move content around the page to create columns or other unique layouts.

      Generally speaking, the Classic Editor is considered the ‘simpler’ of the two options because of its interface. There’s just one field where all of your content goes, as opposed to many separate blocks. However, the Block Editor is built for ease-of-use and can be more user-friendly — especially for those new to WordPress.

      Get More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Switching Over from the Classic Editor to the Block Editor

      The Block Editor has been ‘live’ since December 2018 and now serves as the default editor for anyone running WordPress 5.0 or later. However, some users have chosen to disable it in order to continue using the old – or Classic – editor.

      If you’ve been using WordPress for some time and are familiar with the Classic Editor, using the Block Editor may not seem very appealing. After all, it still has compatibility issues with some plugins and themes, and learning a new interface isn’t the most fun way to use your time.

      However, there are a few reasons to embrace the change. To start with, the Block Editor should streamline your content creation. Once you get past the learning curve, adding blocks can be much faster than stopping to code a table or columns by hand. More importantly, you may want to make this transition for the sake of your site in the long term. While right now you can keep the Classic Editor in place using a plugin, WordPress plans to stop support for that system eventually.

      For now, support is promised until 2022. However, once updates are no longer being released, having this plugin installed on your site could pose a security risk. At a certain point, moving over to the Block Editor will be in the best interests of your website.

      What the Block Editor Means for Your Existing Content

      Fortunately, old posts and pages created in the Classic Editor are preserved in their current format with the Block Editor. Each one features a single, large block called a Classic block. All of your text, images, and other content will be found inside this block, unchanged.

      A Classic block in the WordPress Block Editor.

      The Block Editor’s effect on your theme and plugins is a little more complicated. There have been compatibility issues between the new editor and some themes and plugins, so it’s possible that enabling it will cause problems on your site.

      In particular, page builders and other plugins that affect the way the WordPress editor looks and functions tend to have trouble with the Block Editor. However, updates have been released for many of these plugins to fix these issues. It’s a good idea to check each of your major plugins (especially any that affect the editor) to see if they are compatible.

      The Block Editor should be useable with just about any theme. That said, it works better with some than with others. Ideally, you’ll want to use a theme that has been updated for use with the Block Editor or a theme that was created after the new editor’s release and built with compatibility in mind.

      The best way to avoid any potential issues is to create a staging version of your site. Then you can thoroughly test for any problems before updating your live site.

      How to Update Your Old WordPress Posts With the Block Editor (2 Methods)

      Of course, you may not want to leave your old WordPress content as-is. Fortunately, you can update your old posts, pages, and other content types in the Block Editor. There are two primary methods you can use, and each has its pros and cons.

      Before you can use either of them, you’ll need to make sure you have the Block Editor enabled. For most sites, this is already the case.  In other words, if your site is up-to-date and you haven’t done anything to disable the Block Editor, it should be currently active. Therefore, you won’t need to do anything.

      Otherwise, either deactivate the Classic Editor plugin or upgrade to WordPress 5.0 or above to automatically switch your site over to the new editor. Then, you can use one of the following two techniques to work on your existing content.

      Method 1: Continue Editing Your Posts in a Classic Block

      As we described earlier, existing posts and pages will be converted into Classic blocks. If you want, you can edit your content inside these blocks, just as you would in the Classic Editor.

      All you have to do is open the post you wish to update, and click on the Classic block. When you do, you’ll see the TinyMCE toolbar appear at the top of the block. It should look very familiar.

      A Classic block in the Block Editor with the TinyMCE toolbar.

      You can edit within this block exactly as you would in the Classic Editor. If you need to access the Text Editor, you can do so by clicking on the three-dot icon to the right of the toolbar, and selecting Edit as HTML.

      The Edit as HTML option in the Classic block.

      When you select this option, the block’s content will be shown as code, and you can edit it as needed.

      Editing a Classic block in HTML.

      To return to the Visual Editor, simply click on the three-dot icon again and select Edit Visually. That should be all you need to update your old posts using the Classic block.

      Method 2: Convert Your Old Content into Blocks

      The other option you have available is to convert a post or page’s Classic block into new blocks. This will divide up your content up into individual elements, just as if you had created it using the Block Editor.

      To do this, click on the three-dot icon and select Convert to Blocks.

      Selecting the Convert to Blocks option in a Classic block.

      Your post should then split up into separate pieces. Each paragraph will become its own block, as will every heading, image, list, video, button, and element.

      An old Classic Editor post converted into new blocks.

      You can click on an individual block to edit the content within it. While this process usually goes off without a hitch, you’ll want to make sure that each element of your post has converted to the correct type of block.

      For example, if a pull quote from your old post has converted into a regular paragraph block, you can change it by clicking on the leftmost icon in the block toolbar.

      The Change Block Type option in a block.

      You can then select the correct block type from the options listed. Once all of your blocks are set to the correct types, you can use the toolbar at the top of each to make any specific changes related to alignment and placement within the post. You can also make edits related to each block’s type, such as by altering text styling or image size. In other words, you can now use the Block Editor’s full range of capabilities to work on your content.

      New Kid on the Block (Editor)

      Updating old posts is a smart way to freshen up your content and give your site a facelift. If you’re worried about how your old posts will fare in the age of the Block Editor, however, never fear. You can easily make changes to your old posts and pages.

      While you’re updating your WordPress site, why not upgrade your hosting service too? Our DreamPress plans include 24/7 WordPress support to help with all your Block Editor questions.



      Source link