Thanks for sticking with me through this dense material! We’ve been through a basic introduction to HTML and the most basic required elements of HTML, so we’re diving a little deeper this time. Keep reading to go beyond the required to the most common elements you’ll find on a web page. These elements are what starts to make your page look like you’ve put some real effort into it.

As discussed in the first couple posts about web development basics, websites are built on HTML, and HTML revolves around tags. Tags are not displayed on your browser; they’re used on the back end to label pieces of content. A level beyond the required tags are common tags, which are found within the body tags and are used to display content. These include:  

• Heading tags
• Paragraph tags
• Bulleted/unordered list tags
• Anchor tags
• Div tags

Heading Tags

Heading tags are used for content organization. The available heading tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>; each always has its own closing tag. Imagine the complete heading structure for a webpage as a pyramid. With the most important content at the top, supporting details on the next two levels, sidebar details on the two levels after that, followed by the least relevant info at the very bottom. The heading at the top would be used the least, and as you go down each level in the pyramid, those headings would be used more and more. See the example below (and stay tuned for more info on this and how it affects your site’s SEO).

Paragraph Tags

These tags, <p></p>, are primarily used to contain paragraphs. Typically, any content that is not a heading or bulleted list should be put in these tags. Try to only use these tags in the main content area of a website. It’s not wrong to use them in other places, but keeping these tags in the main content area help with code clarity and overall document organization.

List Tags

Bulleted and numbered lists are considered “unordered” and “ordered” lists (respectively) in HTML. These elements consist of a single pair of <ul> or <ol> tags to denote the starting and stopping points of a list. These tags house numerous list item, <li>, elements inside. See the following examples.

Bulleted List = HTML Unordered List

Numbered List = HTML Ordered List

Anchor Tags

These tags are used to create links across and outside your website – it is typically used for anything you want to make clickable. These include an opening and closing tag, along with a URL you want to direct the user to and the text you want displayed in the hyperlink, also known as the anchor text. The most basic format looks like the example below.

<a href=”www.url-to-link-to.com”>Visible text you want to make a clickable link</a>

That would end up being displayed like this : Visible text you want to make a clickable link

There are other ways to make elements clickable, but we’ll get into that more when we discuss more complex concepts that use JavaScript.

Div Elements

This simple tag is like the 2×4 brick of the Lego world — it’s versatile and you can do many things with it. It’s basically a simple container surrounding other elements of the page that makes it easy to organize and divide the document. It can be used to group elements and assign CSS styles to the group at one time.

Stay tuned for more on HTML in my next post!