Want to see some HTML code? Just hit Ctrl+U on your keyboard!

Does this scare you? You'll soon realize that these weird signs are important to know about when doing Digital Marketing.

They're not just about the code.

CSS, on the other hand, is a complementary programming language that applies a style sheet to a given HTML page, changing its appearance to better match your brand.

Summary

1 - Introduction
2- What are programming languages
3 - What is HTML?
4 - What is CSS?
5 - What are the differences between HTML and CSS?
6 - HTML tags to know
7 - How to update a CSS file
8 - HTML AND CSS: pitfalls to avoid
9 - Educational resources: trainings, courses and books to discover

Introduction

HTML and CSS are among the most commonly used languages by front-end developers (i.e., for the part of a website visible on a browser), marketers, and designers.
While these languages seem very technical, there are nonetheless many ways to use them in a simple way in everyday marketing activities.

In fact, you've probably already used HTML code without realizing it when formatting a hyperlink, updating a page header, or editing a page on your website or blog post.

As a marketer, knowing the basics of HTML and CSS will save you time and get you better results in customization, optimization and SEO.

Adding keywords to the HTML header tags of a blog post improves its SEO in search engines.

Thus, by learning how to use a few simple HTML elements and better understanding how HTML and CSS work together, it will be possible for you to improve your marketing strategy and easily solve problems that can usually cost time and money if your company does not have a developer on staff.

This guide will cover the most common uses of HTML and CSS for marketers. It will review the basics of each language and their differences, and also provide you with resources to learn more.

What are programming languages?

Computer languages, such as HTML and CSS, also known as programming languages, are written instructions that tell software what to do, how to display content, or how to process an algorithm.

The most well-known programming languages are Java, Python, and SQL. HTML and CSS are also known to be declarative programming languages that indicate what should be on a website page and how it should look.

Developers typically use elements of HTML or CSS code to communicate with the software and tell it how to scroll the page, tell it to display your brand colors, place an image in the center of the page, or tell it how to behave when a user decides to, for example, click on a hyperlink that will redirect him or her to another section of the page.

HTML was originally designed to differentiate structural elements in website pages, such as paragraphs, body text, and headers in .html format.

It lacked design functionality, however, so the CSS language was created to fill this gap. The css file thus consists of a separate file that includes the code related to the layout of web content.

Using HTML and CSS code together allows you to create website pages that are optimized for design, customization and SEO.

Right-clicking and then pressing inspect accesses the code of a web page

What is HTML?

What is HTML ? HTML, or HyperText Markup Language, uses tags to change the structure or how text and objects appear on a web page.

HTML tags help you organize your content, improve the readability of a page, and tell search engines which keywords are most important through header tags.

Here is an example of an HTML code snippet for a hyperlink. HTML is the source code most often found in website pages, emails and blog posts.

<a href="https://www.hubspot.fr">click here</a>

The HTML elements you need to know and their formatting will be discussed later in this guide.  

Many content management systems (CMS) offer the ability to edit content in two ways. One is through the content editor, which allows you to change items such as the font style, size and color used through a drop-down menu.

The other involves the content editor.

The other involves using the HTML editor, in other words, making changes directly in the source code. It is also possible to edit an HTML document in a standalone HTML editor.

What is CSS?

CSS stands for Cascading Style Sheets, or cascading style sheets. The CSS code tells the software what layout, color scheme and formatting should be used for the HTML content of the web page.

So CSS is a list of rules that should be applied to the HTML content of the page for everything from background colors, fonts, line spacing, or alignment.

CSS can be applied to a page using an internal or external style sheet. An internal stylesheet consists of adding to the HTML document indications such as background color, fonts, and any other design elements that apply to the entire page or just one section.

External style sheets are linked to the page, but these files exist on their own as pages of design code. Here's an example of an internal CCS style applied to some text

This is an h1 header tag that indicates that this header is the
main header of the page. This code snippet also includes a
CSS style tag signaling that the header should be red.

What are the differences between HTML and CSS?

HTML is the technical structure of any website page. CSS is the style, which allows you to show the end user the branding, colors and fonts that make your brand identity unique. An HTML page, without CSS, is functional but does not present aesthetic content.

HTML allows you to format and update the structure of a website page, add links and images, create lists and tables, and change the text on a page.

CSS updates design elements and can change a page's background color and font color, set an image as a background, change margins and borders, or change elements on a page, such as hiding them, based on actions taken by the user.

Here is an example of a blog post in HTML format without CSS.

Here's the same blog post, but this time with a CSS style sheet.

Main differences between HTML and CSS:

The main features of HTLM and CSS

The HTML tags to know

There are common HTML tags that are always used the same way, regardless of the editor used to write the HTML content.

Here is the basic structure of an HTML document:

Any HTML tag begins with an opening tag <html> and ends with a closing tag </html>.

In the example above, the first tag tells the browser that this is
an HTML document. The tag <body> indicates that this is the body text, <h1> that this is the main header, i.e., the title of the page, and <p> that this is a paragraph.

Main HTML tags to know for marketers:

• HTML tag: <html>Your web page here </html>

This indicates that it is an HTML page. The opening tag appears at the very beginning of the document and the closing tag is added at the very end of the document.

• Header tag: <h1>Your title here </h1>
                             <h2> Your subtitle here </h2>

Header tags are crucial for blog posts. They structure your posts and help you draw the reader's eye to the different sections. They are also useful for on-page SEO, as search engine algorithms give more importance to keywords in headers.

Each header (h1, h2, h3) can be formatted using CSS code, which specifies the style to be applied such as font, font size, presence of bold or italics, or spacing on the page.

• Hyperlink tag: <a href="url">Link to text</a>

Hyperlinks are common in emails, blog posts and other HTML files.

• List tags:
  
  Bulleted list
  <ul>
  <li> first item in list</li>
  <li> second item in list</li>
  <li> third item in list</li>
  </ul>
  Numbered list
  <ol>
  <ol> first item in list</ol>
  <ol> second item in list</ol>
  <ol> third item in list</ol>
  </ol>

Lists help separate and organize content. CSS code allows you to change the type of bullets, numbering or alignment within the list itself.

• Paragraph tag: <p>this is a paragraph </p>
  This tag delimits a portion of the text to form a paragraph.
• Image tag:

This tag allows you to add an image to the document from an image file, change the size of the image, and add alternative text, which contributes to better SEO. Afterwards, it is possible to add a different fill or
other attributes using the .css file.

• Text formatting tags:

Bold <strong> text </strong>
Underline <u> text </u>
Italicize <em> text </em>

To format font size, family and thickness, line height, as well as other style elements of the text, it is necessary to use CSS style tags. Otherwise, the same style will apply to all your text.

• Share tag on social networks:

LinkedIn: http://www.linkedin.com/shareArticle?mini=true&url=URL
Facebook: http://www.facebook.com/sharer/sharer.php?u=URL

By adding the desired URL in the section of the code that says "URL", anyone who clicks on that link will automatically be redirected to LinkedIn or Facebook and can post a pre-defined message from the link, without having to manually copy it into a new post.

This promotes content sharing on social networks and allows you to increase traffic to your page. These tags can be used in
blog posts or emails and added to a LinkedIn or Facebook logo icon.

• Title tag: <title> your title </title>

This tag determines the title of your page, which will appear in your browser tab.

• Body tag: <body>Content of your web page </body>

This tag, which appears in the sample HTML document on page 9, delimits all content: lists, paragraphs, hyperlinks and images on the web page.

• Line break tag: </br>

This element is very useful for shaping content. It inserts a line break into the text and can be used in headers, in paragraphs and anywhere on the page to move content to a new line.

• Span tag: <span> object </span>

This tag helps you maintain the format of the page. By wrapping an object with span tags, you  ensure that the same object does not interfere with the formatting of the
content around an image or icon.

How to update a CSS file

To update a .css file, most developers recommend using the same stylesheet for entire documents or your entire website. As a marketer, this will make your job easier.

If you have a style sheet, you can include CSS attributes, for example, that determine that all h1 tags must be bold, the font size must be 32, the font must be sans serif, and the text must be blue.

When writing your HTML code, you can simply link the style sheet to your HTML document, and then use an h1 tag. You will then see that the content of the tag has adopted this style.

It is also possible to update the CSS using inline styling. This method involves adding "style" tags to an h1 tag to specify certain elements such as font, thickness and color. However, this method takes more time and can be a source of errors and inconsistencies on your website. Nevertheless, it can be necessary and useful to update specific pages or elements.

CSS online:

Here's what inline CSS styling looks like:

Here, the CSS attribute determines the color indicated by the "style". It is possible to update the CSS inline using style codes and thus update all design elements, such as the fill, font family, background colors, or even margins.

Use this list of CSS codes to find specific inline style tags.
How to update a CSS file.

Note: Inline styling overrides style sheets. Any changes will overwrite the style in the main style sheet.

External style sheet: 

To update the CSS code using an external style sheet, you will need to create a separate .css file with the desired style for the relevant elements or groups, then link the .html file and the .css file.

Here's how to link an external style sheet and an HTML file:

This code tells your HTML file to associate the CSS file with this page. It should be in the header of your HTML document.

Note: The header of your HTML document and the h1, h2 and h3 tags are two very different things. The header tags in the document determine the titles of the different sections.

The <head></head> tag determines the header of your web page. It is possible to add Google Analytics tracking tags and other trackers to it to collect
more data about the web page.

Here's what an external .css stylesheet looks like:

If you link this stylesheet to an HTML document, the background will be light blue and all content in the h1 tags will be navy blue and indented 20px (pixels). When there is more than one CSS code, the software sets the following order of priority:

• Inline style,
• External style sheets linked in the <head> tag,
• Default browser style

HTML AND CSS: pitfalls to avoid

When it comes to HTML and CSS, developers will tell you that certain things are best avoided. Since CSS can be applied to multiple pages on your website, it's important to be careful before making any changes to them, as it can result in changes throughout your site.

So here are some tips on how to avoid certain pitfalls with HTML and CSS codes.

• HTML:

Think about the closing tag. For any opening tag, such as one that opens a paragraph <p>, there must be a closing tag, </p>.

Always insert alt tags to insert alternative text for images. This helps optimize SEO and allows you to describe the content of images for search engines.

Instead of line breaks, use the list tag described earlier to create lists. Think about the DOCTYPE element to make sure search engines recognize the document type. Otherwise, they won't be able to
interpret your code correctly.

• CSS: 

Sometimes it can make sense to apply an inline CSS style or a style to a very specific header or paragraph. However, it's easier to create one
style sheet for your entire website page with one main style for all h1, h2, h3 tags, backgrounds, margins, padding and other style elements.

When creating CSS style sheets, be sure to group the sections together to ensure that everything is well documented.

Avoid updating a stylesheet if you don't know how many pages will be affected by the changes made. When in doubt, consult your
developers. It's essential not to break pages on your site to avoid damaging the browsing experience.

Educational resources: trainings, courses and books to discover

You now have the basic knowledge of HTML and CSS. If you're interested in learning more, below you'll find a list of recommended trainings and
tutorials, as well as the names of communities that can help you develop your code creation skills.

Codeacademy offers courses for all programming languages and for all levels, from beginner to expert. You can access free courses, and there
is also a paid subscription to receive more advice and feedback from professionals.

W3Schools.com provides code simulators and a practice environment for you to test your code. It also offers templates
of code structure for HTML and CSS. freeCodeCamp is free and offers over 5,000 coding tutorials.

Learn to Code HTML and CSS by Shay Howe is a book that provides all the useful information aboutHTML and CSS.

Stack Overflow is an online community for developers with many question and answer sections that can be very helpful. Take advantage of their advice or
ask them to help you when you learn to code or
run into a problem.

Conclusion:

These tools will make your team of marketers more independent. This way, marketers and developers can work together to create a master list of HTML/CSS code that marketers can modify as needed, while allowing developers to maintain control over what not to modify.

You can practice by editing the HTML content of an email, creating a newsletter, adding content sharing links on social networks
in your next blog post, or by optimizing the SEO of your entire blog through the use of proper keywords in header tags, adding alternative text to images, and implementing good SEO
on-page practices.