Even if you do not know HTML, you can inspect the code and infer some of the meaning. To access the code in Drupal click the “Source” button, in WordPress click the “Text” tab.
HTML consists of tags that wrap around your content and give instructions to the browser. Usually, the tags have a beginning and an end:
An opening tag is between less than and grater than signs: <tag>
An end tag has a / after the less than sign: </tag>
Your content goes between these two tags.
There are a few tags that do not have a closing tag, for example the image tag, example:
<img src=”path/to/file/image.jpg” />
Tags can have additional attributes. For example:
<tag attribute=”some_attribute”>
Sometimes, with content management systems, the rich text editor gets confused and nests tags in the wrong order, or people inadvertently erase a closing tag, or code pasted from an external source really makes things weird.
To make things even harder, some tags have special rules about the order they can be in or if they can be nested inside of other tags or not.
Block Vs. Inline Tags
There are block level tags that give instruction to the browser to start on a new line and take up the full available width of the screen. These include:
paragraph – <p>
horizontal rule – <hr />
headers – <h1> thru <h6>
There are inline level tags that only take up as much width as is necessary. These include:
emphasis – <em>
strong – <strong>
citation – <cite>
In our Drupal sites Rich Text fields, there is a “Show Blocks” button that’s purpose is to help you identify block level elements while creating content.
Examples
The following code could be caused by putting the cursor within a block level element to start new content while in the Rich Text editor. Because the tags are not nested properly, the following code will cause the video to display over the top of the heading, in essence making it appear that the heading completely vanished:
<div class=”responsive-video”>
<hr />
<p>
<iframe title=”description of video” src=”https://player.vimeo.com/video/234518290″></iframe>
</p>
<h2>Title for this section</h2>
</div>
To fix the issue, the “responsive-video” div needs to end before the heading starts. No visible issues are caused by the horizontal rule tag being inside of the video tag content but logically it should be before the”responsive-video” div:
<hr />
<div class=”responsive-video”>
<p>
<iframe title=”description of video” src=”https://player.vimeo.com/video/234518290″></iframe>
</p>
</div>
<h2>Title for this section</h2>
Learn More
Get the confidence you need to dig deeper with Code Academy’s HTML Fundamentals. The V School Web Development site takes an in-depth look at all you could want to learn about Block and Inline elements.
