720.434.9189
BLOG
The Core HTML Elements Needed to Build Any Website
| Teaching

The Core Elements of HTML, or Hyper Text Markup Language

HTML is the backbone of all websites, making up the underlying structure of every page. Programming and styling languages like PHP and CSS use it as their base to create an appealing and interactive user experience. Even if you’re not looking to build templates yourself,  a core understanding of HTML is crucial for anybody in the web development world. 

The <head> tags vs text headers

The <head> tag is for the first thing the browser reads on the page. It is not readable to the consumer. It is only machine-readable information (metadata) about the document, such as title, required files like JavaScript and CSS style sheet, SEO rich snippets, and tons of crucial but behind-the-scenes information.

Headers, on the other hand, are tags that control the font of headings in your text. Your theme will have them preset when installed but you can change them in your settings. They are defined as h1, h2, h3, h4, h5, and h6. They range from h1 being the largest to h6 being the smallest, though you can customize them to suit your needs. Use h1 for your main header only, and even if your design doesn’t call for a big headline, there should be an h1 somewhere on the page for SEO purposes. In general, it’s good to have at least three headers prepared to help break up your content.

Create sections with <div>

A <div> divides section of the page. Divs act as a sort of bookends, wrapping the content in between in a group for easy targetting by other coding languages. Divs can also contain divs within themselves for nesting sub-categorization. Divs may seem simple, but they are a large part of how the website is structured. CSS can make a simple div greatly varied in how the content within is displayed, if the fonts are treated differently, if the section has a background or a border, and multitudes more attributes. Just think of one of the most complex elements you’ve seen, and think about the many nested, interlocking, overlapping divs that made it possible.

Paragraph and spans

Use an open and close paragraph tag for each paragraph within the page, like writing an essay. Write your text between the paragraph tags. You can get very creative with paragraphs by using a <span> (or multiple spans) within, which act as a separate element within the paragraph that can be targetted for unique styles or other treatments.

There are some elements that act as a sort of shorthand span, such as:

  • <u> underline,
  • <strong> bold,
  • <em> emphasize (italics)

Horizontal Rule and Line Breaks

Horizontal Rule is a horizontal line across the page ( <hr/> ). Many WordPress sites have this as a grey line by default, but just like every other HTML element, you can customize it to be however you’d like with CSS. Even give different elements different classes to have variations. Line Breaks ( <br/> ), are even simpler, just giving a break in the lines of a paragraph without inputting a new paragraph tag. Line breaks should still be used inside of paragraphs, to ensure you can target the text as a whole with your coding languages.

Notice these are also self-closing elements. Many elements like <div> and <span> require a closing tag to end the wrap: <div></div> and <span></span>. But since these elements are self-contained, they have the slash inside of their initial tag, and don’t require a closing tag.

Links

<a> tags stand for anchor.  By adding an “href” attribute, the anchor becomes attached to the referenced web or photo specified. It’s best to copy the web address that you are linking to directly from their page so you have no error. Sometimes, you will want to open in a new tab, so use the target attribute set to “_blank”.

Example: <a href=”https://www.mrwpress.com” target=”_blank> Text for link here </a>. 

Images

Like horizontal rules, images are self-contained elements, and don’t require a closing tag. But unless you just want a placeholder, you need to specify a source for the image to pull from. It’s also best practice to specify an “alt” attribute for screen readers and search engine crawler bots. Example: <img src=”website-link” alt=”Here’s an image description” />

FORMS

The <form> element is usually used to obtain user <input> and information such as their e-mail address and phone number. The form tag works similarly to a div tag. You use the opening tag, scroll down a few lines and close it so that you have space to work in. Each input type can also have a <label>, which uses the “for” attribute to specify which input it belongs to.

This is just a crash course of some of the key HTML elements, but there are many more out there like <ul> and <ol>. The best way to learn is to dive into the code for yourself! Try to build something, look up what kinds of elements are available, and see where you end up. Need a little help getting started?  Here is a brief list of Services MrWPress offers. Contact us for a free quote.

RELATED BLOG POST