Skip to main content

Get Started to Learn HTML: Four Basic HTML Elements You Must Know

For the past two days, I had studied HTML from MDN Web Doc,which is provided by Udemy course. 

Before I started, I felt so excited and also nerves. Can I really understand the content? What if the code language is too complex to understand? 

Whatever......Not matter what, I told myself just start to learn. If I am too afraid to even open the web page, I would never figure it out. Try first, and then see what would happen. 

As I read through the first part: Getting Started with HTML, I find it is not to difficult to understand the information. By following the instruction, I can start to write some basic HTML element in the test code box, and see the good result. At that moment, I feel so motivated.

Now, I am going to share my study note and thought with you.

What is HTML?

According to MDN,  HTML is a markup language used to tell your browser how to structure the web pages to visit.

Image you are building a house, HTML is like your house frame and structure. Before you renovate your house or move furniture inside each room, at least you have an empty house built. Your house needs to have door, window, wall, bedroom, living room, bathroom, kitchen, and maybe some stairs to the second floor. Those things are the most basic elements to a house.

What is Basic HTML Element?


An HTML element includes: opening tag, content, and a closing tag.

(Screenshot From MDN: Get Started to learn HTML)

Like the example above, between the opening tag <p> and closing tag </p>, which means "paragraph", you write the content inside it. No matter you write one sentence or five sentences inside the tags, the whole thing is counted one HTML element.

Four Basic HTML Element You Must Know:

  • Nesting Element:
Nesting element is that you put elements inside other elements. 

For example: <p> It is very important to know that.</p>

If you want to bold the word "important", you need to add an <strong></strong> element inside the <p></p>.

So the new element would be :

<p> It is very <strong> important </strong> to know that.</p>

This code result: It is very important to know that. The "important" is bold.

<strong></strong> tags mean that the word is to be strongly emphasized. By the way, <em></em> tags means italic.

If you want to bold and italic the "important". The code would be: 

<p> It is very <strong><em>important</em></strong> to know that.</p>

The result: it is very important to know that.

Mistake needs to avoid:

When I first write nesting element, I forgot to put closing </strong> tag after "important", and that results the rest of the sentence bold. So, always remember to put opening and closing tag when you write the element.
  • Block-level Element:
Block-level elements form a visible block on a page, and they will appear an a new line from whatever content went before it.

Basically, block-level element is that you want to separate the content into different part to make a clear structure on your web page, such as a new paragraph, list of things, navigation menu, etc.

Some most common block-level tags are : <ol> (order list), <ul> (unordered list), <li> (list item), <header> (page header), <p> (paragraph), <aside> (aside content), heading levels <h1> to <h6>.

For example: 


The code uses <p></p> tags which means to separate each word into a new paragraph. The result will be:

You can see that after we insert the block level tag <p></p> between each word, each word will become a new line and start a new paragraph.

  • Inline Element
Inline elements can be within block-level element, and it will not cause a new line to appear in the document. 

From my understanding, the inline element is more like to make some words or sentences special in a paragraph, such as bold, italic, add a link etc. 

However, wherever you put the inline element, it would not separate the word or sentence into a new paragraph. In the other word, the paragraph is not going to change.

The most common inline element tags are :<a></a> (hyperlink), <em></em> (italic), <strong></strong> (bold), <img> (image).

For example: 

I copy one paragraph from a website. In the code part, it includes one block-level tag <p></p>, and two inline tag <strong></strong> and <em></em>.

When I put the inline elements, the output paragraph is still remain one paragraph, but the word "free" and "multi-media features" change the style.


From this example, we can see that inline elements can be nested inside in a block-level elements, but a block-level element can not be nested inside in inline element. The block-level element can be nested inside a block-level element.
  • Empty Element
MDN describes that an empty element is a single tag, which is usually used to insert/embed something in the document at the place it is included. 

If  you want to insert a picture on your webpage, you will use <img> tag.

The code would be <img src="image link or image name from file">

For example, I want to insert one picture on my web page. The first step is to find a image from Google. Then I would copy the image address by right click the picture, and paste the image link in the tag.
from Google image


The code would be <img src="http://images4.fanpop.com/image/photos/19900000/cat-fun-funny-never-looked-so-cute-19942391-460-350.jpg">

At the end, the picture will be showed on your web page.

Therefore, above four elements are the basic HTML elements you must know, and they could be used in every single web page coding. Just practice! 







Labels:

Comments

Post a Comment

Popular posts from this blog

Intermediate Express.js: How To Add Styles & Partials in EJS File?

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...
Post a Comment
Read more

My Story: A Mommy Start To Learn Code From Zero

From Google Image I am not a programmer, and I thought I would never become one. Everytime I see someone is coding, I think he or she must be very talent.  For me, coding is a very difficult subject to learn. Not only the language has so many rules, but also the logical reasoning behind the language is complex.  In my graduated school, I knew many friends who didn't have any coding background, but they are doing programmer or developer jobs now. Some of them went to school to study coding, and some of them  learned to code by themselves. Their stories are so impressive.  I wasn't ready to learn code until I finished my first Chinese book "留学，我的青春呀!" recently. I always want to be a writer and write my own book. I started writing blog three years ago, and I updated my post two to three times every week. As I enjoyed writing , I started to get some followers, likes, and good comments on my blog. Then, I decided to plan my first book. My First...
Post a Comment
Read more

Three Most Common HTML Form Elements You Should Know

When I visited the Facebook page at the first time, it required me to sign up. Therefore, I completed the sign up form to create my new account. The form is very simple to fill in because it only asks for very common information such as full name, phone number, new password, birthday, and gender. It only took me one or two minutes to finish the form. Not only Social media sites require us to sign up first before we post anything, but many business or eCommerce sites also ask us to create new account before we take any action. For example, when I go to the Origins skin care site, it will pop up a email sign up form window. To encourage new customers to sign up, it gives a 15% off for the first order. It is definitely an attractive call-to-action message. Anyway, if your website requires users to sign up, you need to know how to create a HTML form. Yesterday, I just learned how to build a simple HTML form from Udemy course. And it is not that hard. All you need to kno...
Post a Comment
Read more