DEV Community: Bronwen Gien

What are Heading Tags?

Bronwen Gien — Wed, 16 Mar 2022 18:02:17 +0000

One of the first tags you will learn in HTML is the heading tag, which is why we also included it in our list of 10 HTML tags every beginner should know. Heading tags range from <h1> (Heading 1) to <h6> (Heading 6). As a beginner at coding, I was pleasantly surprised when I came across the heading tags as they were so simple to understand and implement in my code. The rest of this article will detail what heading tags are, when to use them and what they do exactly.

Heading tags are HTML tags that represent your page’s headings. Headings help the user (and browser) understand the importance of the content below the heading and what the content will be about. A <h1> tells the browser that heading is more important than a <h4>.

Table Of Contents

What are heading tags used for in HTML

If you have seen how heading tags are rendered in the browser, you may be asking, “Why should I use heading tags when I can just change the weight and size of the font?“.

By adding heading tags, rather than simply changing the font weight or size, you tell the browser more about the importance of the heading and its subsequent content than merely making a formatting change.

You can change the formatting of a heading tag to look how you would like it to in weight, colour, size and more through CSS. Although headings with different tags render differently in the browser, heading tags have very little to do with formatting.

HTML headings are also used to benefit end-users. End-users frequently scan a page based on the headings, so organising content according to its importance and allocating the appropriate header can be very helpful.

Lastly, but by no means least are search engines, like Google. Search engines like Google utilise headings to index the structure and content of web pages. Using your heading tags appropriately makes it easier for the Google search engine to rank your web page.

How many types of headings can be written in HTML

According to the official HTML documentation 6 different levels of headings exist. These different levels are represented by tags from <h1> to <h6?>.

Which is the largest heading tag

The <h1> heading tags is the tag that will render the largest text (assuming no styling) and will be given the highest level of importance. <h1> tags are normally closely associated keywords in SEO, where the goal is to insert your keyword into a <h1> to tell search engines that your content relates to the specific keyword.

Learn more about heading tags and what the benefits are of using heading tas by Clicking Here.

How to connect CSS to HTML

Bronwen Gien — Mon, 14 Mar 2022 16:45:10 +0000

Welcome to the wonderful world of coding! In this blog post, we’ll be discussing how to connect your CSS file to your HTML file. This is an important step in creating a web page, and if you’re just starting out, it’s a good idea to get comfortable with this process. So let’s get started!

As a beginner, I was intimidated to start with CSS as quickly as I did. I had only just started with HTML, and it felt like it was too soon to start my second language. But it’s never too early. The reality is that if you learn styling in HTML, the syntax is the same. The only difference is how you format the actual code, which is why you can learn two programming languages at the same time.

How to connect CSS to HTML is relatively simple. All you need to do is add a <link> tag in the head section of your HTML file and add the location of your CSS file with a rel attribute of “stylesheet”.

Table Of Contents

Basic HTML Document Structure

If you know your Basic HTML Document Structure, you know that your document contains a <head> tag, and various metadata should be included in the <head> tag. One of the items to include in your head tag is the connection to your CSS file.

The first thing you need to do is include a <link> tag in your <head> tag.

Ways to connect CSS to HTML

There are a few ways to connect a CSS stylesheet to an HTML document. This article will show you the most common methods and explain how I suggest beginners connect CSS to HTML files.

The first way to connect CSS to HTML is by using the element, which is placed in the <head> section of your HTML document. This method is most commonly used when you want to load an external CSS file. This is the method that we will give code examples for below, as it is one of the easiest ways for beginners to connect CSS to HTML.

The second way to connect CSS to HTML is by using the <style>element, which is placed in the <head> section of your HTML document. This method is most commonly used when you want to include a small amount of CSS code in line with your HTML code. I don’t recommend this method as this is effectively mixing content with design. I have written a detailed article on the 6 reasons you shouldn’t style inline in your HTML that you can read if you are interested in understanding why this is not recommended in more detail

The third way to connect CSS to HTML is by using the <script> element, which is placed in the

or section of your HTML document. This method is most commonly used when you want to include a CSS file as a JavaScript resource.

Each of these methods has its advantages and disadvantages, so you’ll need to decide which one is best for your project.

As mentioned above, I recommend the first method for beginners who are learning how to connect CSS to HTML files.

Let us dive into the more technical elements and go through some code examples on how to connect a CSS stylesheet to HTML.

How to connect CSS to HTML

Learn how to connect your CSS in your HTML file with a code example by Clicking Here

Basic HTML Document Structure

Bronwen Gien — Sat, 12 Mar 2022 19:21:11 +0000

If you’re new to coding, building a website from scratch can be daunting. But don’t worry, it’s quite simple! In this post, we’ll look at the basic structure of an HTML document. The basic HTML document structure is the skeleton on which all websites are built, and once you understand this, you’ll be well on your way to creating your own beautiful website. Ready to get started? Let’s go!

When developing a web page, it’s critical to use the right HTML document structure. Web pages may break, or the search engine crawlers may not read the page if the Basic HTML document structure is incorrect.

The basic HTML document structure includes the <html>, <head> and <body> tags where a <title> tag is required to be nested inside the <head> tag. In this article, we will break down what you should include in each one of these and why.

HTML is a markup language, which means it’s used to “mark up” material in a document. In this instance, a webpage with structural and semantic information instructs a browser on how to display it.

Please note that this article references HTML5, which is the latest version and if you are starting to learn now, we suggest you start on this version.

Table Of Contents

Basic HTML Document Structure

If you are looking for a quick copy and paste of the basic HTML Document structure and understand the meaning of all the tags, feel free to use the below. If you want to understand the detail behind these tags and find out what should be included, please continue reading.

Basic HTML Document Structure Tags
The Basic HTML Document structure is pretty simple and is for the most part made up of 3 different tags, the ,

and . When you dive deeper into HTML, you will realise that the page structure can get a bit more complex due to new semantic features in HTML5 known as Semantic HTML tags.

Doctype Tag
The first line of code <!DOCTYPE html> is referred to as a doctype declaration that informs the browser of the page’s HTML version.

We are using the HTML5 doctype, the most recent version of the HTML language. Several distinct doctype declarations correlate to different HTML versions. In HTML 4 alone, 3 different doctype declarations could be used, just by starting with HTML5 Basic HTML Page Structure is already much easier!

The Doctype declaration is not case sensitive, and therefore, all of the below versions will work:

To learn more about the Basic HTML Document Structure Click Here.

How to use the Head tag in HTML and what to include

Bronwen Gien — Thu, 10 Mar 2022 08:28:55 +0000

As a beginner coder, the word metadata can sound scary, but it’s not that bad. Metadata can be very important as it tells your browser, a social media platform, or a search engine all about your web page, which in turn tells other people about your web page.

Data about data is a common description of metadata. To put it another way, if your webpage’s HTML is data, metadata is extra information used to describe various aspects of that HTML. For example, the Doctype declaration tells the browser what version of HTML the document is written in.

In this article, I will go through what tags can be inserted into the

tag to make your site more user-friendly to machines, which will help your search optimisation.

The <head> tag is a basic element of an HTML Document and should be used correctly. At a minimum, the <title> must be nested in the <head> tag, but other useful metadata should be nested here too such as meta tags.

If you are unsure about the

tag and where to use it, I suggest you read my article on the [Basic HTML Document Structure.](https://worldofdev.info/basic-html-document-structure/)

Table Of Contents

What is the head tag in HTML
How to use the head tag in HTML and what to include
- The Title Tag
- The Style Tag
The link Tag
- The Meta Tag
  - Descriptive attributes
  - Technical attributes
Standard head tag code
Conclusion:

What is the head tag in HTML

The <head> element separates <html> and <body> tags and can be considered for metadata.

Metadata is the information about the HTML document and is not shown when the HTML document renders in the browser.

Other very specific tags can be included in the <head> tags, such as the <title> tag (see below), character sets, viewport settings, styles, and scripts.

How to use the head tag in HTML and what to include

As mentioned above, very specific tags can and should be included in your HTML document’s head tag.

This article is not intended to be an exhaustive list but rather a beginner-friendly guide to what should be included and why including the following tags should be standard on every HTML document.

The title of the document is defined by the <title> tag. Title tags are the only required meta tags that need to be included in your <head> tag, and every HTML document needs to have a title tag.

Title tags are text-only tags vital for search engine optimisation (SEO). The

tag is also the only tag that HAS to be included in your HTML document, all the subsequent tags are optional.

Good title tags normally contain flowing text that is longer and more descriptive, but less than 60 characters.

Your Head tag should now look like this:

To read the rest of this article on how to use the tag and what to include, Click Here

Why Learn to code - 6 reasons you may not have thought about

Bronwen Gien — Wed, 09 Mar 2022 15:03:53 +0000

Many people used to think of coding as a hobby for “nerds” who tinkered with computers in their basements. However, coding has evolved from a pastime to a skill in high demand in today’s world.

Learning to code could be the next step you want to take for personal and professional development (and financial benefit) such as developing critical thinking, improving your attention to detail, remote working opportunities, the ability to turn your ideas into reality and the fact that coding works well in a range of non-coding jobs

Table Of Contents

Why learn to code
Learning to code develops critical thinking
- Improve your attention to detail
- Remote working is accepted
- Turn your ideas into reality
- Coding skills can come in handy in a range of jobs
- Anyone can do it
Conclusion

Why learn to code

Do you have a great idea for an app you want to make into a reality? Do you want to build games? Do you want to automate tasks and make your life easier and more efficient? All of these could be a great motivator to learn to code. Learning to code can have a surprising number of advantages.

I have found, incorrectly, that many people want to learn to code for financial benefits or to open up other job opportunities. While these are both reasons that are often behind why some people learn to code, I don’t feel it should be the driving factor. When learning to code, you are about to start a lifelong journey. Technology is always evolving and changing, and coding requires you to learn to stay on the cutting edge constantly.

If you want to learn to code, one of the multiple benefits is financial; however, I wouldn’t suggest this is your driving reason. It would help if you were passionate about technology or what you want to create so that you don’t feel like you are stuck doing something that you don’t enjoy the rest of your life. I go into this in more detail in this article

So for that reason, I will cover some less talked about benefits of why you should learn to code.

Learning to code develops critical thinking

Critical thinking could be an article on its own. In essence, critical thinking necessitates logic and requires one to think clearly and rationally while also comprehending the logical relationship between ideas.

Instead of accepting ideas and assumptions at face value, critical thinkers question them by discovering, analysing, and systematically solving problems.

Coding or programming gives a machine a task to complete based on the logical guidelines you’ve established. You need to break down complex tasks into their building blocks, one step at a time. This approach to problem-solving can be very useful in life, not only in coding.

These are just two reasons why you should learn to code, read the last 4 by Clicking Here.

PS. None of them have to do with money!

What is Semantic HTML?

Bronwen Gien — Tue, 08 Mar 2022 09:08:33 +0000

Producing semantic HTML originates from the desire to communicate, which should be the primary purpose of every online page. By including semantic tags in your text, you convey more information about it to the browsers and, importantly, search engines.

Semantic HTML tags indicate what the different sections of an HTML Document are instead of merely how they look. This is a key principle in web design and semantic HTML tags make it easier to see what information is on the page and its importance.

Table Of Contents

What is semantic HTML?

Not all tags are created equally in HTML. Some are semantic tags, and some are non-semantic. Elements such as <div> and <span> tell the browser nothing about the content, making them non-semantic.

Semantic elements such as <header>, <nav>, and <footer> provide browsers with a clear definition of the content within the tag that defines its content.

Semantic HTML tags

Header:

The <header> tag is normally used for a banner image or a series of navigational links (see <nav> below). The typical contents of a <header> element are elements like an <h1> tag or a logo.

For more code examples that you can copy and explanations of the different Semantic HTML sections click here

Should you Learn 2 Languages at the same time?

Bronwen Gien — Thu, 03 Mar 2022 07:47:16 +0000

It is possible to learn two programming languages at the same time, and in some cases, it can be recommended, such as is the case with HTML and CSS. HTML and CSS work hand in hand and learning them at once could make your coding journey easier.

I recently started my coding journey (January 2022) and asked myself, “Can I learn two programming languages simultaneously?”It didn’t take me long to stumble across the answer, a resounding yes, by the way.

You can, and in some instances should learn two programming languages simultaneously. When considering what languages to learn together the biggest consideration should be syntax. If they are similar, like HTML and CSS then you should learn two programming languages at the same time.

Table Of Contents

Can you learn multiple programming languages at once

Yes, you can learn two programming languages simultaneously, but depending on which languages you are pairing together, this may make your learning process take longer.

You would probably learn two programming languages just as quickly if you started with one, finished it and then moved on to your second language than learning them together. It would likely take longer as each language has its syntax, and learning different syntaxes together could create confusion, specifically as a beginner.

The exception to the above is when two languages go hand in hand.

Learn two programming languages at once

Find out my thoughts in the rest of the article Should you learn 2 languages at the same time by clicking here.

Is Programming Hard to Learn?

Bronwen Gien — Wed, 02 Mar 2022 08:10:27 +0000

As someone who recently started my coding journey (January 2022), I know what it feels like to hit the invisible wall between tutorials and actual coding. If you are wondering if programming is hard to learn or even possible to learn, you have come to the right place.

Programming can be hard to learn, but this often depends on where you start your coding journey. If you start with a more advanced or complex language you could find programming hard to learn. That is why I feel that the best programming language to learn first is HTML.

This article will unpack some of the challenges I faced when I decided to learn a programming language, if I overcame them and what you can do today to increase your chances of having a more successful coding journey.

Table Of Contents

Is Programming Hard to Learn?

The ability to code is effectively the ability to instruct computers to complete countless tasks flawlessly. This power does not come cheaply; hours pay for this skill. Hours of learning, hours of practice, hours of problem-solving and, depending on how skilful you are, hours of trying to figure out where that damn missing colon is!

The reality is that the fundamental principles of coding are not hard to learn. From my experience, most coding is made up of loops and if statements. Think about it: all any computer program does is perform an action x amount of times (in a loop) IF certain criteria are met. IF a criterion is not met, the computer performs a different action based on what you instruct it to do.

The question then becomes, is learning how to write an If statement difficult? Sure different languages may have different syntax to know, but the principle is the same. It is an IF statement. You can do it in Excel.

So if that is true and all programmes are mostly IF statements, no matter how complex they may be, why do so many people struggle to find programming hard to learn?

All the established developers I follow on Youtube make coding look so simple. So much so that I feel pretty incompetent when watching their videos. Maybe the question is, rather, why do beginners find programming hard to learn?

Why do beginners find programming hard to learn

Find out why by reading the rest of this article here

4 Benefits of Semantic HTML

Bronwen Gien — Tue, 01 Mar 2022 08:14:57 +0000

What is semantic HTML?

Semantic HTML markup is a method of generating and organizing HTML (Hypertext Markup Language) in such a manner that it emphasizes the content and meaning rather than its look. Semantics and accessibility are built into HTML by design, but they’re useless unless applied appropriately. Understanding the structure of your content and how people and machines will interpret it is essential to writing semantic markup.

HTML has always had semantic markup but HTML5 included even more semantic tags like <section>, <article>, <footer>, <nav>, and <aside>. You can learn more about these and what they are here. The purpose of semantic HTML is to distinguish between different sorts of data as easily as possible for browsers, developers, and crawlers. In short semantic HTML tags help clarify what information is on the page and how important it is.

Previously, a website could have been organized solely with <div> tags, leaving search engines, crawlers, and other developers in the dark about what that page is about. Developers may be more clear about overall content and write it so that computers can comprehend using semantic markup.

Table Of Contents

Benefits of Semantic HTML

SEO (Search Engine Optimisation)

This one should be pretty obvious, and when most people think about the benefits of semantic HTML, they think about SEO.

Understanding and using semantic markup ensures that your content reaches your intended audience. The relevance of your target keywords is determined by their position in the HTML hierarchy. Keywords placed in a <h1> tag, for example, are given greater weight than those in a <p> tag.

Semantic HTML, therefore, assists search engines in ranking your website based on the most relevant and meaningful content on the page.

Semantic HTML is an excellent technique to tell search engines what to index. Once your content is indexed appropriately, you can gain significant traffic organically simply by appearing on the first page of Google Search Engine results. Ranking organically can save you or your client thousands in advertising costs!

Read the rest of this article and learn more about Semantic HTML here

Follow me if you are interested in more content for beginners written by a beginner!

Happy coding!

Best Programming Language to Learn First and Why

Bronwen Gien — Mon, 28 Feb 2022 08:00:35 +0000

“What is the best Programming language to learn first” is often met with a response of “It doesn’t matter what programming language you learn first”. I get it everyone is on a different journey, and one answer may not suit everyone. Well, in this article, I will go out on that limb and provide you with my answer as a beginner. I have been where you are. I am just someone in your shoes that wishes I had an article like this when I started my coding journey (January 2022).

HTML makes up the core structure of pretty much every website that exists, and as an added benefit it is one of the easiest languages to learn, that is why we suggest that no matter if you are doing a front-end or backend route that the best programming language to learn for is HTML.

Table Of Contents

Start with the fundamentals

I know how excited you are to build the next “big thing”, I am too. If you want to find out what I am trying to achieve, you can go check out my recent blog, “Why I am learning to code.”

In reality, it doesn’t matter if you can build the most advanced algorithm if you don’t know how to register a domain name, build a basic website or add a security certificate.

The above things are easy to do, specifically with tools like WordPress, Elementor and hosting platforms like Siteground.

Understanding the basics of the internet and how computers process and store data will make you a better developer in the long run. The FREE CS50’s Understanding Technology Course presented by a Harvard lecturer teaches you about all of the above. I found this course extremely helpful.

Read the rest of this article on our blog by clicking here

Learn to code with me - why I am learning how to code

Bronwen Gien — Sat, 26 Feb 2022 18:18:40 +0000

I have started and failed at the #100daysofcode challenge more times than I care to count on my coding journey, and the reason why I am learning code is likely different from yours, specifically if this is the first time you have thought about doing it. If you are on the fence about starting your coding journey or, like me, you have tried and failed a couple of times and are looking for a deeper motivation to make this time different, you are in the right place.

General Reasons to learn coding
Don’t learn for the money
Why I am learning to code
What code am I planning to learn
How long is it going to take for me to learn to code
Conclusion

General Reasons to learn coding

I will not touch on this in too much detail as you can quickly do a Google search on the reasons to learn code or you can read my article on 6 reasons why you should learn to code.

Programming and code are fundamentally logical processes, having the ability to code aids your critical thinking ability, which makes you a more effective problem solver, and employers are always looking out for people with this skill!

Don’t learn for the money

The more obvious reason many people want to learn to code is the possible salaries that can be earned. Now I will admit that these salary figures are enticing and you may think a great salary is reason enough to stay motivated and start your coding journey. Wrong!

I was one of those people trying to learn a new skill mainly for the financial rewards it could offer, and with that mindset, I didn’t even make it past day 20 of the #100daysofcding challenge.

If you think, “I’ll be different, I am a dedicated person with willpower”. I can guarantee you I thought the same, but here is the problem. The reality is that learning a new skill is difficult, specifically when you are going through the process on your own and not part of a coding Bootcamp or coding community. Who do you ask all the questions to when you get stuck? Yes, you can easily Google your problem or error message, but are you advanced enough to understand the answers on Reddit or Quora? I know I wasn’t.

Eventually, learning to code can start to feel like an advanced course in finding the most obscure videos on Youtube rather than learning to code.

By this point, you have invested hours into your coding journey, possibly sacrificing sleep, if you have a day job, and time with family and friends. You start to ask yourself, “why should I learn to code” suddenly, the financial reasons that you thought were so important don’t seem to be as important anymore.

At this time, you need to dig deep to keep yourself motivated, and it’s because I am at that point in my coding journey that I am sure that this time it will be different.

If you have found this article interesting so far you can read the the remaining reasons of why I am learning to code by Clicking Here