It’s a good idea to become familiar with some basic HTML code. Once you are familiar, we encourage you to inspect the code regularly. You’ll be surprised at what you can infer.
Common Tags
Headings – use for hierarchical structure of your content as titles and subtitles.
<h1> A Heading </h1>
Paragraphs
<p> Some text </p>
Links – learn how to write effective link text.
<a href=”about”> About </a>
<img src=”photo.jpg” alt=”descriptive text about the image” />
Common HTML Errors
You MUST Edit the HTML
There are some things that a Content Management Rich Text Editor just can’t do.
Acronyms and Abbreviations
Acronyms and abbreviations that aren’t coded properly will cause issues for people using assistive technologies. Learn to edit the HTML for acronyms and abbreviations.
Foreign Language
Assistive Technologies also don’t know what to do with foreign languages if not coded properly. Learn how to edit the HTML for foreign languages.
Telephone Numbers
Smartphones can call a telephone number with one click, if it’s coded correctly. Learn how to create telephone number links.
Rows of floated images
Create rows of content floated next to images, such as in an aggregated list of teasers, like news. Usually these kinds of layouts are set up to automatically generate but sometimes you may want to simulate the layout.
Word Break Opportunity
Handle long words within narrow columns. Especially an issue with responsive websites.
Troubleshooting
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>
Example
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.
