 So welcome. Thank you for being here. It's not easy to be at the first Talking the morning, especially after a party. So I really appreciate you all being here My name is Francesca As you have probably figured out by my accent. I'm from Italy And I'm the WordPress community manager at SiteGround a web hosting company and Sponsored proud sponsor of Montreal Before doing that, I was a freelancer that built websites for other freelancers and I spent a lot of time teaching My clients how to use WordPress and how to format their text, which is something that I think It's a bit underappreciated But actually and people don't really put a lot of time and attention in doing that But it's actually a very powerful way to make sure that people will read what you actually wrote So this talk is born from that experience Let's start with the statement. How many of you heard it? probably everyone and So content is king and it was declared so by Bill Gates more than 20 years ago in 1996 and Personally when I imagine a king I imagine it with Rich lavish clothes, right? So think of a well-formatted page as a beautiful embroidery that will enrich your Beautiful already beautiful text. We will I'm a bit of a Internet history geek so This talk would be in divided in two parts the first one We're gonna talk a little bit about history and theory So you'll know why we do things the way we do today in WordPress and in general in formatting your text So let's start with a little bit of history The web is getting old It's almost 30. It's gonna be 30 next year in March The first proposal for a distributed information system dates back March 1989. So almost 30 years For the purpose of this talk, I could go on and on about this For the purpose of this talk, we will concentrate on a couple of dates The first one is March 12 1989. Sir team burners Lee Wrote a proposal for what we now know as the World Wide Web The funniest thing I think is that it was deemed vague But exciting by his boss But ultimately they gave him the green light. So thank you We now have the web and a few years later He wrote a list of the first HTML elements. Do you know what HTML is? Is there someone that doesn't know what HTML is? Please don't be shy. We were not born with this Skills instilled in our head. So if you don't know what is HTML is, it's perfectly fine It's a markup language and it's the basically the base of everything you see in the web today In 1995 the specs for HTML 2.0 were published as a standard Which it means that all future implementation of HTML are based on that original list But finally the most important date for us here today is October 1st 1997 Jacob Nielsen who's a usability one of the word leading usability experts and User interaction experts if you don't know him I suggest you go and read his blog post because they're really eye-opening and Very interesting and his books as well are very interesting So he wrote this seminal piece called how users read on the web So how do users read on the web? Well, they don't None of us really read the web we scan we scan very long texts and We just grab words here and there so this Article again, it was written in October 1st 1997 lays out exactly how you should write for the web You should use bold. You should use titles. You should use list You should use short sentences divide long text in paragraphs And so all these elements which are HTML elements will help you achieve readability of your text and Ultimately you want people to read your text You don't want people to scan if you're a freelancer for example, and you're writing a sales page well, that's Your salary coming out of that page. So I suggest you put extra care Not only in writing in a way that will convince people to buy but make it also Readable if you go and have a wall of text You lost me. I will not even if I really need your service if that's a wall of text I can't I don't have time. I scan the text. I don't see what I need. I move on all right, so This is why you need especially if you're selling something to put extra care in Formatting your text so people will read Before we go into formatting for WordPress Let's talk a little bit of About HTML tags, so you'll know how they look like and if something goes wrong in your formatting in WordPress You can fix it by knowing this few HTML tags So first of all as we said HTML is not a programming language. It's a markup language It uses elements To define the structure of a page The the definition says it's a semantic Defines the elements in a page of semantically semantically is a big word that basically just says that The elements itself describe its content. Okay, so if it's a Aside it's a side if it's a picture. It's a picture and so on So if I use a paragraph element, which is the base of everything you're gonna write I'm not just You know it doesn't just look like a paragraph. I'm also telling the browser. That's a paragraph. That's not a list That's not a title. That's a paragraph So all web pages are based on HTML So I really suggest you go and learn a little bit about it because it's It's not too difficult, but it's very very powerful most HTML elements Need an opening tag and a closing tag in the form of angular brackets I think they're called in English and with a very few exception and Knowing these tags will help you make quick fixes if the needs arises all these tags can be basically added in WordPress by Pressing a button so you don't really need to know them, but knowing them will help you fix things And as you can see most tags are abbreviation of English words, so They're not really difficult to memorize piece for paragraph block quote is the whole word O-L is ordered list you L unordered list I'll I list items so if you can memorize those thing You know what we're talking about this is what these elements will look like in your website I would like to spend a few moments on the heading Element and introduce you to the general idea of accessibility In HTML you have six settings from one to six. They're hierarchical So heading one is more important than six. Don't use heading one in your page Or post because that tag is reserved for the page title and it's important Both for SEO and accessibility purposes so start from age to heading to One of the most common mistakes. I see people doing is using headings just because they look prettier So the look they'll use a heading for without having a heading to just because the heading for style is really nice And they use it to make it look nice, but that's not how they're intended to be used. All right, so headings are A romantic element. They're telling the reader and the browser that that's a title They're hierarchical. So two comes before three before four before five and six And Using them in the correct way Will help your readers and when I say the title say help your readers Reading through your text I'm meaning all the readers If you're not familiar with the concept of accessibility, I suggest you go and Read a little bit about it. If you go to wordpress.tv There's a big number of videos That will help you get started. So I'm not an accessibility expert. I wish I was But one thing is very clear. Don't assume everyone uses the web like you do There are people that might use assistive technologies people that might scroll with With keyboard so People might listen to web page instead of reading it So a well structured page that uses semantic html is Beneficial for everyone and it will make it Possible for everyone to enjoy what you're reading. So good formatting is really not about how it looks But it is about how easy it makes it for everyone to access information So please read about Accessibility the great thing is that you don't really need to do much to achieve an accessible Website you just go to wordpress.org slash themes Download the theme that it's already that it's accessible ready Don't mess up with the fonts the colors the sizes just use it as it is format your page In a proper way and there you go you have an accessible website so Just focus on writing good content and make it readable So we don't have time to go through all the options that you have in wordpress but we'll see the main ones and Some things might look a bit different. I think you already heard about Gutenberg Are you all familiar with the fact that there is a new editor coming into wordpress? Who is not Okay, so quickly quickly quickly after 15 years of having basically the same more or less Editor text editor in wordpress in the next major release of wordpress. This is going to change completely We're moving from Simple text that you can just you know make bold make I never know how you call that in English italic I think And add the titles, but you'll have blocks and blocks have different styles and meanings and usage and stuff like that Also, the name Gutenberg will become obsolete the moment a Gutenberg actually hits wordpress But we're gonna see also a little bit of How Gutenberg works in the long run? I really think it's a good thing that wordpress is moving to this kind of editor because it will make it Easier for people to make very readable rich text for those of us that are a bit old and grumpy, it's gonna take a little bit of adjusting but I Do believe In the long run It's gonna it's gonna help if you're already familiar with With the wordpress editor. Is there someone here that has never seen a wordpress? Website How okay perfect good So you already know that most icons look exactly like the icons you found in any text editor in the past 40 years So you have as we said you have different ways to format your text the editor What we call now the classic editor is what you see in your wordpress Website Gutenberg is the new editing experience And then you can actually edit everything with HTML So this is the formatting bar today if you can see only one line only the first line Press toolbar toggle and you'll have another list of buttons. I don't know if The screen Shots are clear. I know yesterday. We had a bit of a problem Can you see the buttons that are being pressed and more or less? Okay, if something is not clear Apparently turning this off and on will help but just stop me if you cannot see So you have two available views Visual and text the visual is what you see with all the buttons and what you see is what you get and The next one is text where you can use HTML tags to format your text In Gutenberg, you'll see a smaller. So this is Gutenberg and you'll see a smaller selection of buttons Again, the buttons haven't changed bold is always a big B So don't be afraid. I was terrified the first time I saw Gutenberg Because everything was in the wrong place, but I am really grumpy so but then you know when you You get over the shock the first five minutes of shock then you'll see the icons are absolutely the same so It is true that you need to do a little bit of effort to replace the things In your mind, but the icons are absolutely the same icons The other difference that you'll notice is that the bars will appear when they're needed So they're contextual. You will not have all those buttons all the time available So we start with some of the some of the options available. The first one is the paragraph selector and you can see in the in the Traditional editor you have paragraph heading again remember don't use heading because they look pretty but because you're structuring the content of Your text People using a screen reader for example depend on headings to understand the structure of the text itself. So Please use this to help as we said all the readers The preformatted element can be used to add a block of code and this is the screenshot from the editor And this is Gutenberg the procedure is a bit different You have two option you first write a paragraph and then you transform it into a heading a Preformatted text or any of the other elements that you see Or you can add a new block As in heading and then pick you see you have only two three four age two three four this is because as we say the H1 should be reserved for the page title and Honestly unless you have a super nested structured content. It's You will probably not go down to age five and age six This is the HTML for the headings again open tag H1 close tag H1 and pre What we saw the preformatted text and P is for the paragraph. So they're pretty easy to remember And this is the final result no matter with which formatting option you picked A bold and italic we learned how to use them more or less in grade three but Remember bold is to draw attention So don't make the whole page in bold or don't make the whole paragraph in bold and don't use it like in every You know for long sentences in every paragraph because otherwise if everything is bold nothing is bold So try to use it just to draw attention to what you really need the same goes for italic Actually every language has different rules how to use italic again It's not an element that you use because it's pretty it means something. So go back to your grammar books Check out. Why do you use italic in your language and use it for that? These are pretty much straightforward bees for bold ease for Italian I is for italic HTML and this is how it they look like in the final text Lists are a very important element They work because they appeal to the left side of our brain the analytical side So as soon as we see a list we know there's gonna be a step by step instructions numbered are used where there's a hierarchy and there are number required so one step follows the other and bulleted or unordered list Can be used when there is no order required You can just write Elements and then highlight them and turn them into into a list Make sure that you press enter When you want to go to a new element Same goes for Gutenberg. You can either have three blocks highlight them and turn them Three blocks because my list is made of three items, right? You can have 25 But then it gets a bit difficult to highlight them all So if you have a very long list that would suggest you start the block as a list and not turn Paragraph into a list that can be a bit difficult But you always have two options either first write everything and then turn it into something else. So start the block With the element you intend to use This is the corresponding HTML again try to memorize Oh L ordered list L I list item I Promise you especially in lists is so useful to know the HTML because as soon as you start to create a nested list With one of the of the automated tools is gonna get messy So you better know how to close an item and how to close a list so you can go in the text view and Just move the tags where do you want them to be? Another element that you will find in your formatting bar is block quote So block quote is used to quote someone Or something that you want to add In your text so the visual output of a block quote that depends on The style that your theme assigned to that with another language that it's called CSS a cascading style Shits, it's the language that describes the presentation of what you structured with a HTML and We'll leave it to that So every theme as a style dot CSS file where all these rules are described And this is another element the block quote that is often misused because it's very pretty usually themes Developers make it really nice. It stands out with the different Fonts or you know a cute element, but don't misuse it because this is another semantic element So the the moment you open block quote tag You're telling the browser that there is gonna be a quotation inside of it All right, so don't use it just because it's pretty if you want something pretty ask your developer to create a Nice pretty element that you can use to prettify your text In the editor you simply highlight a paragraph and turn it into a quote And in Gutenberg you have two options, which is really neat And the thing that I really like is that as soon as you turn a block into a quote It will help skew for a citation or a site a Citation this I sometimes it's e sometimes it's I is so confusing. We don't have that in Italian Okay, so the citation and I it's always a e in Italian So I think that's a cool feature because You know a lot of time we just quote people and we don't Give credit where credit is due if you use a quote. Why not saying who said it so you can do that in Gutenberg? really easily and This is what the HTML will look like in this case. It's a bit more complex because you need To if you want included the citation you need two tags and this is the final result Alignment we're gonna talk about this. I always always ask I see your reaction and I always ask myself if I should include this or not Because a alignment is not an HTML element. It's not a semantic element And in fact, it's a CSS class that will say how this paragraph will look like So beside the technical aspect of this I suggest you always unless you speak you're writing an Arabic or Hebrew or any other language That is right to left stick with left alignment Don't use justify. Don't use center The web is not a printed leaflet in a digital form So something that works very well in print, which is usually justify doesn't work. Well on a screen people with dyslexia have a very hard time seeing justified text on screen because the The the the words get stretched and it's very difficult to see where the new Sentence begins and if everything is aligned left we know from hundreds of years of Conditioning that that's where the sentence will start. Oh, right if you speak Arabic or Hebrew The left alignment will create a line On the left where the eye can always go back and we know where we are. I Actually saw this this I'm in a hotel nearby and every morning also in print by the way, that's true every morning I go to the lady and I say my my number and they have The the room number and the name and the code the printed on a for Paper and it's all stretched out and every morning. She has a very hard time Following with her eye The number of my room with my name and with the kind of breakfast I have why they didn't put every word one after the other It would be so much easier because she had You know, she knew where the line starts instead. She has to go every time. I like where is this line ending? So don't do that on screen because it's even more difficult. You cannot take a ruler Well, I do it sometime, but you cannot take a ruler and see where this line Starts and where it ends So, please no justify no center no right to left unless you speak a language that needs the right to left If you must align for some reason There are the relevant buttons And you don't need to align left because that's the default in a LTR LTR Installation you can align only an entire paragraph. So make sure you highlight everything. This is the final result Strikes through I'm an abuser of a strike through I admit But please don't do it like me use it for its intended use It's a semantic element that represent deleted text So and browsers will render it as a strike through text Again, very easy, but what I mean is You can see here the real intended use In the text as soon as I highlight something and make it deleted It actually adds the time when it was deleted. So I use the strike through but I shouldn't because I should know better Text caller will skip this one Don't use it. Just Don't strike through theme developers and designers put a lot of love and care in Making everything nice and the palette is working and if you had a custom made the theme They probably went through hours of excruciating Pain for picking up six six six like a six six six hex or a six six seven or something like that So don't mess up with that process So don't introduce random callers in this beautiful palette that was studied And designed especially for that theme if you must and I hope you don't that's how you do it So you just select the portion of the text that you want and Press the corresponding color in Gutenberg you'll find a lot of options to color your text This is probably one of the parts I'm less fond of because it gives you The power to color the entire block Now, I don't know if you can see this in the screenshot So it says if you pick this I mean even if you're not visually impaired I think you have a really hard time writing Reading this black text over an orange background So I'm not super fond of this feature, but I'm very happy that the Gutenberg team added this This call out that says this color combination may be hard to read Try using a brighter background So make sure that there is a good contrast if you must and I I mean I I Get it all right up until now to get a Background in your text you needed to mess around with HTML and CSS Now it's really easy to do, but please always be considerate Please always always remember that what you see is not what other people might see I Am struggling with this quite a lot because I'm getting it's getting harder and harder for me to see both from afar and From close, so I started to notice all these things like the font size The contrast between the background and the and the font color So if you decide to use this feature, please remember to use it Respectively of other people needs and Sometimes things go wrong So please explore both the classic editor and the Gutenberg editor just tons of features that we don't have time to go through Right now, but they're there for you to try and play around and sometimes things go wrong So there's a bit of things that do tend to happen more than other but now that you know The basic HTML for writers you can fix them quite easily Nested elements, that's what is I promise you is gonna happen to you sooner or later It means that one element one HTML element got inside the other one So maybe you're in a block quote Element and you want to add a list right after that The list is gonna end up in the block quote because you go enter And the list is gonna be inside it. So the thing you need to do It's not cursing at your screen. Although that helps Helps emotionally, but it will not help with your text So just go to the editor the text editor and move now, you know, how a tag looks like in HTML So move the block quote closing tag where you actually want to close the quote And that's pretty much what you need to do Or in Gutenberg start a new block That's even easier Another common annoyance is paragraph versus new line. So you press enter You just want a new line and instead you get a new paragraph Again keep your cool Do shift enter Instead of just enter do shift enter this will create a new line for you instead of a new paragraph Same things in Gutenberg So if you press enter once you'll get a new block if you press shift enter You'll get a new line and finally my favorite gave me out of this list You start a list you want to add something and you'll keep being in the list You want to add a new text? So again, it's pretty easy. You press enter twice and you'll get out of the list Or if you're adventurous and you want to try it out go into the text and Move the closing tag of the list where you want the list to end And Sam goes For Gutenberg, but instead of a new paragraph you get a new block Okay, so as I said, I'm a major Internet history nerd and I do really love a good formatted text because it's really I think it really really helps with Getting the knowledge do you want so I added tons of resources To these slides that you can find on Twitter and I'm gonna post them again You get the proposal by a third team bernersley for the word right web html specs Accessibility resources which I really suggest you familiarize yourself with and That's it for me. If you have any questions, please ask. Thank you And I'll go to the happiness bar after the talk So if you want to nerd out with me about formatting text, just please join me questions I need Okay, yes Yes Okay, so the question he is The question is and this is very relevant to French speaking people and the Italian speaking people accented characters Turn out to be weird characters in your text, so if you are That's a unicode issue if you are a Mac user you're in luck because Macbooks have the same contextual keyboard that iPhones have so if you want to have an accented e you just press for a few seconds on the E and it will show up a small menu with all the different ease If you're a windows user, it's a little bit more difficult because you need to memorize a few unicode Characters that come out of combinations otherwise in the Classic editor There's a button that looks like an omega a Greek omega And there you have all the accented characters So for example one of my pet peeves is in Italian when you start a sentence with an accented e a lot of people do e and Apostrophe and that's just wrong. That's not a correct Italian So you just look for the button It's in the second line of the formatting bar look for the button with the Greek omega and there you'll have all the special characters They did it wrong, but now you do how to do it, right? So do it, right? But yeah, there's a code for it does a name for this it's Unicode Mosh-mosh, I don't know but yeah, it does it does happen But so again, there's something that you can make sure to do right But if a website is already done in that way you cannot fix it unfortunately More questions If you have a question you really need to call my attention because I say that a very hard time seeing behind line for more or less Yes Yes, what is a Johnson box? Oh, okay. So the question is Would you use a background colored element to draw attention to a part of the text? Yes, I would But use it responsibly so If you want to draw attention to one thing Use it for that. It's very common to see in sales pages You know this colored boxes That most of the time have a call to action Or in other pages like sign up for my newsletter, you have a call to action and that's fine But this is why I say use it responsibly because you probably want to Draw the attention to one thing and one thing only is either sign up buy or You know if you're not selling anything or you're not trying to get people email addresses and you're Explaining something you might want to have like a recap of what you said in a in a colored box That's fine, but just make sure that you have one because if you start having two three four and They're in different colors. That's like, what am I supposed to look at? Where is my attention? It's the same with bold like use it really to draw attention to something and whatever you decide to use whatever Background you decide to use always remember that the font color should be with enough contrast Yesterday I signed up for a newsletter and the and the text in the sign-up box was white The box was white and the text was white. I was like What what's going on here? So I just I said, okay I'm gonna go blind and I wrote my address and then I highlighted the thing I was like, all right. I I got the right address But so don't make this make it readable you really want I cannot Stress enough how important it is for freelancers and business owners To use formatting in a way that will get you more clients Okay, if you're writing a sales page, you want people to read to the bottom of it what you have the buy now A button so if the text is not well formatted, I will not get to the end of the page. No one will All right, so make sure we can read What you're writing? Thank you for the question. Do we we have time for one more question and then I'm gonna go up to the happiness bar so if someone wants to ask I Think we're oh yes Alora it depends as I say thank you for the question. So the question is is formatting affecting the way search engine index your text and see your text and Show it in In the search results. So if you use a If you use semantic HTML, which is the tags that we said are like headings paragraph list It will affect it in a way that it's if I say that something is an H2. It's a heading to Google we recognize that as an important element in the page And if you I'm not an SEO expert But what I understand is that a well formatted page where the information you want to give both to humans and Browsers are formatted in the right way then Google will recognize it and it will affect Your indexing because let's say you you are you have a page that it's about your web design services So I would assume the H1 of the pages Web design WordPress websites And then if you have in an in an H2 a Description of what the service is gonna be then Google will pick up on this So I would say that the right formatting will Will help you also with ranking of course ranking is done with it like I don't know 500 variables in an algorithm. So Formating is just one of them, but it helps So use It helps also because Google is moving to a different kind of Search optimization. So you probably heard it's not about the keywords It's about really understanding the intention of the person that is looking for something So the more the text is readable and it's clear and the more it's gonna help but because It will pick up on what the user really wants So the user is the center of all of this Even before the browser does this Okay, I think we're done. Thank you very much for being with me this morning and have a lovely day