The Basic Web Page Structure – HTML5 List of Tags


You can think of an HTML page as a series of containers. After an opening statement that defines the type of page to follow, there is one large element, the <html> tag, that contains the two primary structural elements, and <body>.

HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as “<body>“, and an end tag, such as “</body>“. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)

Here’s how the basic essential code for an HTML5 web page looks:

<!DOCTYPE html>
<html>
<head>
<title> Title of document goes here </title>
</head>
<body>
Visible text goes here…
</body>
</html>

Before we can fully appreciate what these containers or placeholders do to our webpage we need to know how they function. Below is a list of HTML5 compliant tags we can use to study and familiarize ourselves with as to the description and function of each tag. Let’s do a little exercise. As you go through the list, pick a web page (any, even this one) and right click on it. Select “view page source” and try to find the tags listed here and look for them in the page source. Try to classify which ones are basic tags, formatting tags, image tags, and so on. While you are at it, challenge yourself to decode the code. Have fun!

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<time> Defines a date/time
<wbr> Defines a possible line-break
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
<figure> Specifies self-contained content
<audio> Defines sound content
<source> Defines multiple media resources for media elements ( and )
<track> Defines text tracks for media elements ( and )
<video> Defines a video or movie
<nav> Defines navigation links
<command> Defines a command button that a user can invoke
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<hgroup> Groups heading elements
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a details element
<embed> Defines a container for an external (non-HTML) application

Don’t forget that WordPress uses PHP but PHP is a server-side technology (runs on a server) that dynamically generates the HTML that will be sent to the browser (IE, Safari, Firefox, Chrome). HTML is whatever you view on a website.

Harmony Theme: Coming Soon from Elegant Themes

It’s the age of the boy band, the rocker chicks, and the indie alternative rock group and fans have been stalking their favorite bands social network sites. But what if these bands had their very own websites to give them and their fans an online address where they can all converge and have fun?

Elegant Themes is coming up with its version of the music/band/artist WordPress theme and it looks quite exciting. We wonder how Nick Roach is going to combine elegance and swag all at the same time. No doubt, it will be something good.

Sneak peeks can be seen on the Elegant Theme’s blog page. A few features that’s been talked about are:

    The theme is compatible with the standard soundcloud plugin, and that you can add your soundcloud social media Icon in the header
  • Highly visual, clean and responsive experience
  • Includes an eStore / eCommerce compatible
  • Alternate color schemes
  • Major features: showcase songs, sell swag, cultivate fants, notify them of upcoming shows
  • Define your own background image for each location

Check out the Elegant Themes blog or even our blog regularly for the latest updates on the release of this new theme from Elegant Themes, Harmony theme.

Get 77 Premium Themes for $39

30 of the Best Shopify Themes (Free & Awesome)

Do you prefer to shop from shabby looking shops? Well, I am sure that all of us will be answering this question with a resounding NO. If that is the case, then why should shopping online be any different. It is imperative these days for a website owner to have an inviting, user-friendly experience lest you go the way of obscurity.

Application of a useful and at the same time beautiful theme in the website therefore becomes extremely important. Readily downloadable themes or templates compatible with different kinds of websites are available on the internet which can be used by designers as a starting point of their projects. Or it can be useful for novice designers who want to draw valuable inspiration from these examples thereafter start developing their own unique template. If you download a free shopify theme, then the work of the designer will be simplified and become much faster as well. These templates come with many useful features like ability to connect with the social networking sites, full customization features whereby the developer can amend it according to his own needs and all the latest technologies. With the use of these templates your website is surely going to stand out from the rest. It doesn’t end with having a unique template and features, its all depends on how well and different you do business. You can find experiences of popular ecommerce experts and help articles on blogs like Shopify ecommerce blog.

In addition to our article on some of the best ecommerce WordPress Themes of 2013, we have also created this detailed list of the 30 best and most diverse shopify websites for you designers out there. They can build up a unique, attractive and at the same extremely interactive platform with the help of these themes.

(more…)

Building Blocks to WordPress Grammar

The primary reason we learn a language is to be able to communicate more effectively. When we travel to new places or visit countries we’ve never been to before we usually buy one of those 15-minute language translation mini books and stuff them into our pockets, ready to be pulled out at any opportune time. We try to familiarize ourselves with the local translation of useful terms and phrases such as “Hello”, “Good Morning”, “How much?”, “Where’s the restroom?”, and other basic words to get us by. At this point, the primary goal is to understand and be understood. Sentence structure and rules of grammar are not the need of the hour just yet. Learning what these common and necessary basic words and phrases mean is the starting point to building your vocabulary and practicing your communication skills.

Similarly, we can learn to speak the language of “WordPress” by first simplifying our goals. Our goal at the moment is to understand and be understood. The semantics and structures can come later on as we first familiarize ourselves with the language and build our basic vocabulary.

Here are some of the most common words and phrases that you will encounter often as you begin to learn how to speak “WordPress.”

Content Management System (CMS)

A Content Management System, or CMS, is software for facilitating the maintenance of content, but not design, on a web site. A blogging tool is an example of a Content Management System.

WordPress

WordPress is web software you can use to create a beautiful website or blog. It is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It has many features including a plug-in architecture and a template system.

WordPress installation

Setting up WordPress for the first time is is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. There are several installation guides on WordPress.org to guide you through the process.

Hosting Provider

A hosting provider is a company or organization which provides, usually for a fee, infrastructure for making information accessible via the web. This involves the use of a web server (including web server software such as Apache), and may involve one or more related technologies, such as FTP, PHP, MySQL, and operating system software such as Linux or Unix.

Web Server

A web server is a computer containing software for, and connected to infrastructure for, hosting, or serving, web sites written inHTML. The most common web server software on the internet is Apache, which is frequently used in conjunction with PHP, Perl, and other scripting languages.

Domain Name

A domain name is a name used for identification purposes on the Internet. In WordPress a domain name usually identifies a server where WordPress is installed. To make this work, the Internet’s domain name system (DNS) maps the domain name to a server’s IP apress. For example, the domain name example.com maps to the IP apress 192.0.43.10. Many domain names can map to the same IP apress, allowing a single server to run many websites.

cPanel

cPanel is a popular web-based administration tool that many hosting providers provide to allow users to configure their own accounts using an easy-to-use interface.

Site

In the WordPress user interface, a site can simply be the website created by WordPress, or it can be a virtual website created as part of a network by the multisite feature. A site in a network is virtual in the sense that it does not have its own directory on the server, although it has its own URL and it might have its own domain name. In WordPress code the site is the website created by WordPress. If multisite is in use, then the site is the network website and each virtual website is known as a blog.

FTP

FTP, or File Transfer Protocol, is rather predictably, a client-server protocol for transferring files. It is one way to download files, and the most common way to upload files to a server. An FTP client is a program which can download files from, or upload files to, an FTP server. You may need to use an FTP client to upload your WordPress files to your web server, particularly if you use a hosting provider.

HTML

HTML, or Hypertext Markup Language, is the W3C standard language with which all web pages are built. It is the predecessor toXHTML, but HTML is often still used to describe either one. It is often used in conjunction with CSS and/or JavaScript.

CSS

CSS, or Cascading Style Sheets, is a W3C open standards programming language for specifying how a web page is presented. It allows web site designers to create formatting and layout for a web site independently of its content.

PHP

PHP is a recursive acronym for PHP: Hypertext Preprocessor. It is a popular server-side scripting language designed specifically for integration with HTML, and is used (often in conjunction with MySQL) in Content Management Systems and other web applications. It is available on many platforms, including Windows, Unix/Linux and Mac OS X, and is open source software. WordPress is written using PHP and requires it for operation.

MySQL

MySQL is a popular open source SQL (Structured Query Language) database implementation, available for many platforms, including Windows, Unix/Linux and Mac OS X. WordPress requires a MySQL database to store all blog information, including posts, comments, metadata, and other information. WordPress also works with MySQL-compatible databases such as MariaDB and Percona Server.

XML

XML, or Extensible Markup Language, is written in Standard Generalized Markup Language (SGML) and essentially allows you to define your own markup language. XML is extremely useful in describing, sharing, and transmitting data across the Internet. Typically used in conjunction with HTML, XML defines data and HTML displays that data.

AJAX

AJAX is a technique that web pages use to have the server perform certain processing without reloading the web page. For example, when you approve a comment in a WordPress blog, WordPress uses AJAX to change the comment’s status, and you see the change without having to reload the Comments screen.

Script

Script is an automated series of instructions carried out in a specific order.

Theme

A theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. A theme modifies the way the weblog is displayed, without modifying the underlying software. Essentially, the WordPress theme system is a way to skin your weblog.

Template

In WordPress a template is a file that defines an area of the web pages generated by a theme. For example, there is typically a template for the header area at the top of the web pages, a template for the content, a template for the sidebars, and so on. The templates are like building blocks that make up the complete web page.

Frontend

The front end is what your visitors see and interact with when they come to your website, www.YourSite.com.

Backend

The back end is the area that authorized users can sign into to ap, remove and modify content on the website. This may also be referred to as “WordPress,” “admin” or “the administration area.”

Sitemap

A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.

Perhaps these words are already familiar to you but for those who are taking this WordPress journey with us, a lot of these terms will sound Greek. As you encounter these words over and over again and see how they work in real life situations, your understanding will gradually increase. Everything, like pieces of giant jigsaw puzzle, will eventually fall into place and reveal the bigger picture. In this situation, the sum of parts is greater than the whole. More next week!

Learning the ABC’s of WordPress Grammar

“Code is poetry” – the WordPress mantra that’s been read by probably every WordPress user on the planet. If you haven’t then maybe you’re on a different planet or probably using another Content Management System apart from WordPress.

It is kinda romantic if you really think about it. The challenge is, not everyone understands the code. We all know Shakespeare wrote great poetry, as did Edgar Allan Poe, Elizabeth Browning, Alfred Tennyson and so many other great poets and authors. But how many who belong to this current generation truly understand what the sonnets and the verses mean? How many can dissect and decode the true meaning behind the words and symbolisms these authors used? We can all give our opinions and interpretations about these works of literary art but unless we “decode” and study the context behind those words that have been so beautifully strung together, in accordance with generally accepted standards, we might create a mental image quite different from the author’s intent. These standards need to be the foundation from which these “works of art” can be evaluated and interpreted.

How does all that apply to our understanding of WordPress? A WordPress theme is actually a unique “work of art.” It is a combination of both the literary and the visual. It is quite easy to appreciate the visual product that results from the string of commands and codes that have been strung together by a WordPress author or designer. But the true beauty behind this visual delight is the code or language that brings it to life. Every line of code is a brush stroke that layers on top of each other to create the functional art we know as WordPress themes. Perhaps that is why some WordPress purists are so passionate about what they do. They are in fact modern-day technological artists who use code as their medium to express their art. Hence, to them, code is sacred. Code is poetry.

In order for us to understand and appreciate code we need to learn the language. We need to study its vocabulary and apply grammar rules that will help us interpret it. For many of us we still need to learn our ABC’s. Many of us are scared to touch code because we fear making mistakes. How many times have we messed up our websites because we took out a portion of a code without fully understanding why it was there in the first place?

The secret to learning a language fast is by immersion. One needs to be immersed in an environment where one is forced to communicate using whatever language is available. We will attempt to do that in the next few weeks. Our goal is to learn the language of WordPress and make it easily understood even by the most novice of beginners. Hopefully, we can help you, our readers, achieve a level of fluency or perhaps spur you on to start creating your own WordPress themes, your own works of art. If that sounds exciting to you, then make the journey yours as well. Stay tuned!