Now with all that theory out of the way,
let's get back to our code and let's start writing more code
because that's what we're all here for in the end.
So I am back in that HTML file,
that index HTML file we traded earlier.
And it's still the only file,
I do have a second file in my folder now,
that is a file you don't have right now,
and you don't need right now.
It's just a file for me, that helps me manage my code,
and make it easier for me to provide code
snapshot attachments in this course,
so that's not a file, this gitignore file, which you have.
And therefore this index HTML file
is still the only file we have here.
And now I wanna work towards that end result
we wanna have, towards that first website
we wanna build here.
And that means that for example, here,
instead of saying hello world,
I wanna say, max challenge for, and then the current date,
because, keep in mind,
we're building this daily challenge website,
where we can set ourself a daily challenge
and make it public to the world,
to put some pressure on ourselves.
And therefore, here the title for this website
should be your name, challenge for, and then today's date.
And that could for example be, Wednesday, August 4th,
something like this.
So that's now my new title,
but of course that still just gives us such a heading.
The only thing that changed now is the text content,
but it's still a h1 element.
And hence, if we load this in the browser,
we still just see that text content here,
formatted as such a title.
By the way, make sure you always save your code files
after you change them.
Here in the Visual Studio Code,
you can tell that a file has unsaved changes,
by this white dot, which you see next to the file name.
Now, if you load your page in a browser,
you only see the latest saved version,
so to see those latest changes, you need to save that file,
and you can do that with file, save,
or of course, way quicker,
by using the shortcut which you see here.
And I'm using the shortcut all the time here in this course,
and I recommended you also use it all the time,
whenever you changed something.
Press that shortcut, by default control S,
or on macOS, command S, and ensure that you save
those changes you made to your code.
However, I now wanna add a second HTML element here,
I wanna add more content to this page.
And the content I wanna is the concrete goal I have
for today, which could be that I wanna learn
about the basics of web development,
specifically dive into HTML and CSS.
That could be my goal for today,
that I wanna dive into those technologies.
So that's now the second piece of content I add,
and very important, I add that,
outside of my first HTML element.
So after this closing HTML tag,
I'm adding this plain text like this.
Now if we save it like this, and I reload my page,
we therefore now see this text here.
And that is important and not necessarily obvious,
we see this text here,
even though this is actually not wrapped in HTML tags.
Remember what I said in the last lecture?
That the browser is quite forgiving?
You should describe your content,
because that adds more meaning for search engines
and people with assistive technologies,
but you technically don't have to.
It doesn't matter which element you choose,
or if you use an element at all,
it's just that some meaning might be missing.
And whilst visually, this page works for us,
if we're not blind, people that are blind,
or a search engines would see less than we do at the moment,
they would see that there is some text,
but they wouldn't know if that should actually be a title,
or if it should be just some regular text.
And that's why we should not add plain text like this,
but why we should also wrap this in some HTML tags,
to turn it into an HTML element,
because you want to add meaning
to every piece of content you add to your page.
But what is the meaning of this text here?
It's certainly not another title, we have one main title,
now that's kind of the content that belongs to that title.
So I would say it indeed is just some regular text,
a paragraph of regular text.
And therefore we now wanna use a different HTML element,
we don't want to use a h1 element again.
Now I showed you this HTML element reference on MDN,
and you'll find a link to this reference attached.
And there we can look for another element
that might make sense here.
Now, if you're here for the first time,
this can be overwhelming,
because there are loads of elements,
and hence I'll speed this up a bit.
We know that we have some text content,
so we wanna find a fitting element
for this specific text content.
And we don't really have a quote here,
we also don't really have a figure here,
or anything like that,
but I would say we have a paragraph here,
and that's a very common HTML element.
As a web developer, you're going to use the p element a lot,
because you work with text a lot, with standard text.
And if you have a standard paragraph of text,
that's nothing else than just regular text, the p element,
the paragraph element is your friend.
So therefore here, I'll go back to my code,
and I'll wrap this text with the p tags.
And I'll grab that closing tag here
and add it off of this text.
And now we added our second element,
we turned this plain text into a paragraph element,
where the content now is that text,
but now we added more meaning.
Now, visually, if we reload this page,
it looks exactly as before,
so it has no visual difference here in this case,
because the paragraph text, unlike the heading here,
which we had before,
doesn't get any default styling by the browser.
But from a semantic perspective,
so to meaning that is presented to search engines
and assistive technologies, we did now improve our content.
And now the second HTML element we added therefore.