A Marketer's Starter Guide to HTML
The best way to scare any marketer? Ask them to learn to code. Coding may not be a marketer’s forte, but it is still crucial for all digital marketers to have a basic understanding on how to code in HTML. As a digital marketer, when my professor, Mark Staton, asked us to learn basic HTML code using Codecademy, I was excited. Mainly because I currently work for web developers and assist them with code in my position, so I’m excited to readily use these coding tools in my current job, as well as using the knowledge in my future digital marketing career.
HTML Let’s Get Down to the Basics
HTML stands for HyperText Markup Language, essentially it provides structure to all the content on the website. It is how web developers are able to add images, text, videos, and anything appearing on the webpage. HTML is a language, it has elements and tags to provide the structure and presentation of the raw text. A HTML element is formed by the HTML tags, which is the element name, it is surrounded (most of the time) with an opening tag and a closing tag.
Different Types of HTML Elements
The <p> element is nested inside the <body> element. So in terms of structure, this means that the <body> is the parent, and the <p> is the child.
In HTML, there are six different headings, <h1> is used for main headings, and <h2>, <h3>, <h4>, <h5>, and <h6> are all used as subheadings.
The <div> element is known as the division element, it acts as a divider for the page, it chunks the webpage into sections. This element can contain links, images, and videos.
A break in the lines would be <br>.
More into HTML elements, within an element can be attributes. Attributes are used to expand on the element’s tag, it is the content that is added to the opening of a tag. Attributes are separated into two parts: the name of the attribute and the actual value of the attribute.
Within the elements are the tags. There are a lot of different tags you can use while coding in HTML, here the basics:
- To create a unordered list, use the tag <ul>
- Remember to use an list item tag <li> when you are describing an item
- To create an ordered, use the tag <ol>
- Remember to use an list item tag <li> when you are describing an item
- To add in an image to the web, use the tag <img src=”image url”>
It is important to be careful with adding in images, and always remember to add alternative text, you can do this by adding alt=”” in the image tag. Alternative text is what defines the image, it is essential for website accessibility. I stress this topic so much, because in my current position, I’ve worked a little over 250 hours in website accessibility, with a main focus on alternative text. Website accessibility is helpful for those who do have disabilities, and need alternative ways on using the internet. Not only is website accessibility good, but having alternative text in images is useful for SEO. If a search engine can not view an image when crawling, the alternative text will work as a back up. Alternative text can help with the ranking of your website in search engines.
Codecademy is a great place to learn to code online for free, but there are a long list of other resources to use. Skillcrush gives a good synopsis of 64 ways to learn to code, of those mentioned: Codewars, topics taught are CoffeeScript, JavaScript, Python, Ruby, Java, Clojure, and Haskell. Coursera is another great one to use, the courses are free, but the actual certifications do have a price point of about $30-$100. edX is an open-source program governed by MIT and Harvard, it has courses on Java, C#, Python, and many more.
As for web building platforms, Squarespace and Wordpress are two very popular platforms used today. In the article, “Squarespace vs Wordpress (2019)- Which is the Best Website Builder?” by Chris Singleton, he compares and contrasts the two platforms. Squarespace is a SaaS website builder, it has everything to build and maintain a website including templates, content management system, hosting, and e-commerce. In order to edit the code in Squarespace, you would need the developer’s version, this will allow more customization for the website.
Wordpress has two different versions: Hosted and Self-Hosted. Hosted Wordpress is a SaaS, very similar to Squarespace, but does not have the e-commerce feature, and users have to use third party like Ecwid or Shopify to create e-commerce. Hosted Wordpress is much more flexible than Squarespace, you are able to add more applications and buy more templates. On the other hand, Self-Hosted Wordpress is software download and used on your web server, this version is open-source so editing the code is easily available. Both Squarespace and Wordpress are great options for web building, Squarespace would fit for beginners, while Wordpress has more options and can be utilized better for more advanced web developers.