DIY Responsive Design Part I: HTML Elements and Tags

With the growing popularity of mobile web browsing, it is becoming common practice to create web pages that can work effectively across multiple devices. In this 3-part guide, we’ll help DIY business owners understand some of the basic concepts and tools used when creating a responsive store template. No prior code knowledge is needed, but studying some HTML and CSS basics will greatly help in understanding all the topics covered here. To get started, check out our post about the best online tutorials for learning to code.

In Part I, we'll focus on providing an introduction to HTML elements and tags and how you will work with these areas for your responsive page design.

Creating Elements

To create an HTML element, first open a tag; for example, <div class=”myDiv”>. Notice the class part in the example. This is a tag attribute.

Attributes help describe the contents of a tag and provide information to the browser about how some special tags (like the a and img tags) should work. The most common attributes you will be using are:

• id – Only one element can have an id attribute on your page. This describes a single occurring element.
• class – A collection of elements that share similar presentation and or functionality. Multiple classes can be used on a page.
• href – Hyperlink reference attribute. It can only be used on a tags and link tags
• src – Source attribute. Contains the URL for locating a page resource such as a script file or image file. This is commonly used on the img tag, for example: <img src=”resource.jpg”>.
• alt – Alternative text tag. Included on the img tag to provide a description for screen readers and search engines about the contents of an image.

At the end of the content for visitors, a closing tag is added; for example, <div class=”myDiv”>Awesome Page Content</div>. The closing tag is basically the same thing as the open tag without the attributes and with a a forward slash after the left angle bracket (</>). This tag tells the browser where to end an element and is very useful in helping the browser know when to stop applying certain styles.

Note the structure of this example <div class=”myDiv”>Awesome Page Content</div>. The open tag always consists of the left and right angle brackets surrounding the tag name first, followed directly in any order by the tag attribute(s). Then comes the content of the element immediately followed by the closing tag. We emphasize this because many presentation problems are typically the result of broken tag.

There are exceptions to this overall structure; for example, the img tag does not require a closing tag, and typically looks like this:

<img src=”https:// www. mydomain. com/folder/img.jpg” alt=”a brief description.” class=”myImageClass” />.

Working with Tags

• div – A block level tag used to surround other elements. Typically, div tags are used to create page division by defining rows and content splits.
• ul, ol, li – Unordered and ordered lists and their individual list items. Unordered list <ul> tags create lists with bullets and ordered list <ol> tags create lists with numbers starting at 1. The list item <li> tag is used inside both ul and ol tags to define a single block of bulleted content. Although ul and ol tags can only contain li tags as their children, li tags can contain any type of child content.
  • For example: Unacceptable: <ul><div class=”myDiv”>Awesome Page Content</div></ul> Acceptable - <ul><li><div class=”myDiv”>Awesome Page Content</div></li></ul>
  • Keep in mind that ol, ul and li items are block level elements, meaning they occupy the entire space of their parent element (container), creating a block.
• img – As discussed earlier, this is an image tag and the src and alt attributes are required for this tag. This is typically an inline element but some styles may present it as a block element.
• h1, h2, h3, h4, h5 and h6 – Heading tags. The numbers 1-6 represent the importance of the heading tag where h1 is most important and h6 is least important. h1 is typically reserved for the page title, h2 represents major section headings, h3 is used for subsection headings, h4 represents minor page titles and so on. All heading tags are block level elements.
• p – A paragraph tag, used to present a collection of body text that represents a single paragraph of content. This is a block level element.
• span – The span tag is used to wrap a group of words in a header or paragraph tag. It is treated as an inline element and is meant to encompass phrases to apply text styling such as bold and italics.
• a – An anchor tag is used to create hyperlinks on a page that links to other pages on or off your site. This is an inline element and requires the href attribute, which defines the URL that the content links to.

Inline elements, on the other hand, flow with the text on a page. There are no line breaks applied after them and they can only contain other inline elements or text. Block level elements can contain other block level elements, inline elements and text.

Coding Tip: It is generally considered bad practice to include div and ul/ol elements inside p and h1-h4 tags.

That wraps up Part 1 of our DIY Responsive Webpages guide. In the next post, we’ll discuss Bootstrap and building responsive pages for your site.

Interested in having our team design a responsive template or page for your business? Check out our custom design services and premium templates!