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

Web pages are created using HTML elements, which are code blocks created using tags that surround the contents you want to display on a webpage. There are a large number of tags available for use on webpages, but the most commonly used tags are div, a, ul, ol, li, p, img, span, h1, h2, h3 and h4.

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:

After opening a tag, you will add the contents that will show to visitors; for example, <div class=”myDiv”>Awesome Page Content.

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=”” alt=”a brief description.” class=”myImageClass” />.

Working with Tags

When you start building pages, you will build element structures to produce the layout desired for the page contents. Each of the tags mentioned earlier in this tutorial have very specific purposes on the page.

Earlier, we briefly mentioned block level and inline elements. The main difference between the two is: block-level elements are treated as blocks, which are stacked on top of each other with a single line break between each element.

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!

Kyle Carter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque augue nec convallis posuere. Quisque vehicula sapien lacinia velidfsdf sdfsdfasdfggf fddfgdfgdfgd